Gallery shortcode inserts styles

  • Hi there,

    I’m trying to create a gallery with WordPress using the native gallery function. I don’t want to use any plugin, as the native gallery does all I want it to do. However, whenever I insert the shortcode ([gallery]), it also, right before the images, inserts this code:

    <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>

    I don’t want this code, as I’d like to style my own gallery! In the media.php file in wp-includes, I’ve tried to change the code for this, and nothing happens.

Viewing 4 replies - 1 through 4 (of 4 total)

  • Try re-writing the gallery shortcode – without the CSS – within functions.php as my_gallery_shortcode and then add:

    remove_shortcode('gallery');
add_shortcode('gallery', 'my_gallery_shortcode');

    Just remember to add the relevant CSS to your stylesheet. I do this on all of my themes.

    You can also apply a filter to the gallery style without fiddling with any of the code.

    Add this to your functions.php and remember to add the relevant CSS to your theme stylesheet:

    <br />
<pre><code>add_filter( 'gallery_style', 'my_gallery_style', 99 );

function my_gallery_style() {
    return "<div class='gallery'>";
}

    This will effectively obliterate all of the inline styles that the Gallery Shortcode injects into the Html. Even gets rid of the reference to media.php in the comment following the inline style.

    The 99 argument in add_filter is to make sure that my_gallery_style is processed later in the queue.

    Webstractions,

    Thanks for that! But it should be:

    add_filter( 'gallery_style', 'my_gallery_style', 99 );

function my_gallery_style() {
    return "<div class='gallery'>";
}

    hi there,

    Is there anyway i could replace
    <div class='gallery-item'>
    with my own classes.

    i am trying to get this

    <div class="grid_4 alpha center">
	<div class="borderBoxNoPadding padding5">
	[img]
	</div>
	</div>
	<div class="grid_4  center">
	<div class="borderBoxNoPadding padding5">
	[img]
	</div>
	</div>
	<div class="grid_4  center">
	<div class="borderBoxNoPadding padding5">
	[img]
	</div>
	</div>
	<div class="grid_4  omega center">
	<div class="borderBoxNoPadding padding5">
	[img]
	</div>
	</div>

    Notice the first div and last div have another class (alpha, omega)

    Any tips??

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Gallery shortcode inserts styles’ is closed to new replies.