Gallery Shortcode Inline Style

How to Remove Inline Style Of WordPress Gallery Shortcode

Anh Tran

Some users don’t notice this, but by default WordPress displays inline style for gallery shortcode. If you look at the source of a post that contains [ gallery ] shortcode, you’ll see something similar to:

Gallery Shortcode Inline Style

The <style> tag should not be there. It will break your HTML validation (if you care). Another reason you should get rid of that is it adds some additional CSS rule such as image border and margin-top which you might don’t like.

To remove that inline <style> tag, just add the following line in your functions.php file:

add_filter( 'use_default_gallery_style', '__return_false' );

The function __return_false is a small built-in function that simply returns false. It will stop WordPress from using default gallery style.

Then you should add your own gallery style in your stylesheet. Here’s my style that you can get and change:

.entry-content img {
	max-width: 98%;
	padding: 1%;
	border: 1px solid #ccc;
}
.gallery {
	clear: both;
	overflow: hidden;
	margin: 0 auto;
}
.gallery .gallery-item {
	overflow: hidden;
	float: left;
	margin: 10px 0 0;
	text-align: center;
	list-style: none;
}
.gallery-caption {
	font-size: 11px;
}

/*
Image sizes depending on the number of columns
Based on Hybrid theme
*/
.gallery-columns-0 .gallery-item {
	width: 100%;
}
.gallery-columns-1 .gallery-item {
	width: 100%;
}
.gallery-columns-2 .gallery-item {
	width: 50%;
}
.gallery-columns-3 .gallery-item {
	width: 33.33%;
}
.gallery-columns-4 .gallery-item {
	width: 25%;
}
.gallery-columns-5 .gallery-item {
	width: 20%;
}
.gallery-columns-6 .gallery-item {
	width: 16.66%;
}
.gallery-columns-7 .gallery-item {
	width: 14.28%;
}
.gallery-columns-8 .gallery-item {
	width: 12.5%;
}
.gallery-columns-9 .gallery-item {
	width: 11.11%;
}
.gallery-columns-10 .gallery-item {
	width: 10%;
}
.gallery-columns-11 .gallery-item {
	width: 9.09%;
}
.gallery-columns-12 .gallery-item {
	width: 8.33%;
}
.gallery-columns-13 .gallery-item {
	width: 7.69%;
}
.gallery-columns-14 .gallery-item {
	width: 7.14%;
}
.gallery-columns-15 .gallery-item {
	width: 6.66%;
}
.gallery-columns-16 .gallery-item {
	width: 6.25%;
}
.gallery-columns-17 .gallery-item {
	width: 5.88%;
}
.gallery-columns-18 .gallery-item {
	width: 5.55%;
}
.gallery-columns-19 .gallery-item {
	width: 5.26%;
}
.gallery-columns-20 .gallery-item {
	width: 5%;
}
.gallery-columns-21 .gallery-item {
	width: 4.76%;
}
.gallery-columns-22 .gallery-item {
	width: 4.54%;
}
.gallery-columns-23 .gallery-item {
	width: 4.34%;
}
.gallery-columns-24 .gallery-item {
	width: 4.16%;
}
.gallery-columns-25 .gallery-item {
	width: 4%;
}
.gallery-columns-26 .gallery-item {
	width: 3.84%;
}
.gallery-columns-27 .gallery-item {
	width: 3.7%;
}
.gallery-columns-28 .gallery-item {
	width: 3.57%;
}
.gallery-columns-29 .gallery-item {
	width: 3.44%;
}
.gallery-columns-30 .gallery-item {
	width: 3.33%;
}

10 comments

  2. Hi,
    When I add the filter I get this error:

    Fatal error: Call to undefined function add_filter() in /homepages/……./wp-includes/functions.php on line 4393

    1. Hi Alexandre,
      Do you put the line add_filter… in functions.php file? If so, that’s very weird. You can try this instead

      add_action( 'init', 'remove_gallery_styles' );
function remove_gallery_styles()
{
    add_filter( 'use_default_gallery_style', '__return_false' )
}

  3. Thank you! I´ve implemented this solution for a project i´m working on. I was using a plugin before to fix this, i´m happy i can get rid of it now!

  6. Después de buscar, la forma más sencilla que conseguí es añadir esta línea de código al archivo o plugin de funciones
    add_filter( 'use_default_gallery_style', '__return_false' );
    Saludos

Comments are closed.