Remove the default Gallery Styles in WordPress

We want to customize a lot of things in our WordPress themes, and WordPress gallery style can be one of those. At first, it looks like to throw some CSS code in the style.css and it’s done. But that alone, is not gonna work.

Why? Because WordPress automatically adds a default style snippet in the post containing the gallery, and this overrides all of your CSS code coming from style.css or anywhere else.

The default gallery styles looks similar to the below code:

<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 WordPress default Gallery style

Custom works may include styling of different elements in your WordPress, lets take example of premium WordPress themes with great features like image gallery styled from scratch. See below how Dandelion theme implemented a cool, new gallery style:

To style WordPress galleries like this, you will need to get rid of the default gallery styles.

How can I remove the default gallery style in WordPress?

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

So, what else I need to do to get this done? Well, this can be accomplished by telling WordPress not to add that style code segment in the post containing a gallery. We can do that by adding the below hook in functions.php of our WordPress theme:

add_filter( 'use_default_gallery_style', '__return_false' );

Save the functions.php file. Now, open a gallery post in your WordPress, you’ll see ugly, unstyled images there.

Now, add your custom styles to style.css and test a gallery. Bang! Your custom WordPress gallery styles are now working!