Remove the default Gallery Style in WordPress

2 minutes read

We want to customize lots of things in our WordPress themes, and WordPress gallery style can be one important of those. At first, it may seem easy stuff, but actually it isn’t that easy.

As a developer, you may think of customizing the look of WordPress galleries just by adding some CSS in the style.css of your theme. But that alone is not gonna work since WordPress automatically adds a default style snippet in the post that contains a gallery, which provides default styles to the gallery, and also overrides all of your CSS code coming from the style.css or anywhere else.

The code automatically hooked by WordPress in a gallery post looks somewhat like below:

<style type='text/css'>
	#gallery-1 {
		margin: auto;
	}
	#gallery-1 .gallery-item {
		float: left;
		margin-top: 10px;
		text-align: center;
		width: 33%;
	}
	#gallery-1 img {
		border: 2px solid #cfcfcf;
	}
	#gallery-1 .gallery-caption {
		margin-left: 0;
	}
	/* see gallery_shortcode() in wp-includes/media.php */
</style>

The need to remove the default gallery style

As a user, you may need to do that to customize your galleries look and feel. As a developer, you may need to do that to make your galleries match the theme styles. You might have already seen some professional themes providing custom Gallery styles.

Dandelion WordPress Theme Gallery
Example of Custom Gallery on Dandelion WordPress Theme

In order to make galleries adopt our custom styles, we’ve to stop WordPress adding this bit of code into the gallery posts.

Removing the default CSS code from gallery posts

Now we know that the hurdle in our way to customize our gallery look is the auto-added style snippet. Once we restrict the addition of this default style, we are almost done.

Well, this will only take a single line of code. Add the below code in functions.php file of our WordPress theme:

add_filter( 'use_default_gallery_style', '__return_false' );

The above hook tells WordPress not to add that style code segment in the post containing a gallery.

Now, you have to save the functions.php file and then view a gallery post. The galleries must be rendering without styles added to them OR they must be adopting the CSS if you’ve added in the style.css of the theme. Hope it served well :)

Facebook Twitter LinkedIn Telegram Whatsapp Pocket

Related Posts:

WordPress automatically adds its current Version number to the head section of the themes. If you view the source of a WordPress-based website, you may find out the WordPress version it is using. Below given is the meta tag that carries that version informatio...
A Content slider allows us to present the content in style, without using much space on our websites. Some of the best examples of the content you would love to put in a content slider are: Featured posts Image Gallery Testimonials There are some cool free p...
The default WordPress search is the only thing that used to annoy me a lot and I wasn’t using it on any of my WordPress sites. There are a number of reasons back then to stop using WordPress search feature, and the best one for me was it throwing unrelated lin...