How to Remove Inline Style Of WordPress Gallery Shortcode

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:

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 thoughts on “How to Remove Inline Style Of WordPress Gallery Shortcode”

I just need to find a way to get the rid of the inserted clear:both line breaks that works now.

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

Tran Ngoc Tuan Anh says:

April 9, 2012 at 2:02 am
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' )
}
```

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!

Thank you

Вы эту статью гуглом переводили что ли.

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