Sivel.net

One of the biggest things that irritates me when using the [gallery] shortcode is that style tags are inserted into the post content. Why does this irritate me? Because this does not validate as XHTML 1.0. Luckily the fix is quite easy. Add the following code as a plugin or to your themes functions.php and say goodbye to the style tags in your post content.

add_filter('gallery_style', create_function('$a', 'return "
<div class=\'gallery\'>";'));

One side effect to doing this is that the CSS normally outputted to into your post content is no longer output at all. You will need to add the CSS to your themes css file, usually style.css. The following css is the default output:

<style type='text/css'>
	.gallery {
		margin: auto;
	}
	.gallery-item {
		float: left;
		margin-top: 10px;
		text-align: center;
		width: 33%;
	}
	.gallery img {
		border: 2px solid #cfcfcf;
	}
	.gallery-caption {
		margin-left: 0;
	}
</style>

The width for .gallery-item is a dynamic value determined by the columns attribute specified in the [gallery] shortcode. The default is 3 columns which makes the width 33%, floor(100/$columns) .

I have also written a plugin called Gallery Shortcode Style to Head which does a forward lookup to determine if a post uses the [gallery] shortcode and if it does, prints the default CSS to the head. While the plugin works and performs its function, I still prefer a solution that has less overhead associated with it, hence the code provided in this post.