Getting control of the WordPress Galleries

For a few versions now WordPress has had a gallery shortcode feature that you can add in via the Add Media button. Getting it to play nice with your theme however can take a bit than is really needed. Here are a couple of tips I picked up when I had to customise it for a recent client project.

It inserts inline styles by default

By default when you put a gallery into your post it will inject some inline styles. A bit naughty yeah. I only noticed because it was forcing a 2px border around my thumbnails but after a quick search I found this post on CSS Tricks explaining how you can remove this “feature”.

The simple solution to this is to add a filter into your functions.php that will disable this output:

add_filter( 'use_default_gallery_style', '__return_false' );

Updating your theme to use HTML5 Support

This worked ok but then I lost all my styles so I started digging a little deeper because all I wanted to remove was that 2px image border.

It turned out that since WordPress 3.9 they have implemented an alternative version which uses HTML5 tags and skips the default styles by default. This seemed like a better solution and its also simple. Remove the last filter if you added it above and replace it with:

add_theme_support( 'html5', array( 'gallery', 'caption' ) );

Now we are at least using modern techniques and our 2px border has gone but so has all the other styles.

Getting some basic styles back in

After you switch over to HTML5 you need to provide all the formatting yourself. It occurred to me that this problem has likely already been solved in the built in themes that WordPress come packaged with. I opened the /wp-content/themes/twentyfifteen/styles.css file and a quick search showed me what I needed:

/**
 * 14.2 Galleries
 */

.gallery {
    margin-bottom: 1.6em;
}

.gallery-item {
    display: inline-block;
    padding: 1.79104477%;
    text-align: center;
    vertical-align: top;
    width: 100%;
}

.gallery-columns-2 .gallery-item {
    max-width: 50%;
}

.gallery-columns-3 .gallery-item {
    max-width: 33.33%;
}

.gallery-columns-4 .gallery-item {
    max-width: 25%;
}

.gallery-columns-5 .gallery-item {
    max-width: 20%;
}

.gallery-columns-6 .gallery-item {
    max-width: 16.66%;
}

.gallery-columns-7 .gallery-item {
    max-width: 14.28%;
}

.gallery-columns-8 .gallery-item {
    max-width: 12.5%;
}

.gallery-columns-9 .gallery-item {
    max-width: 11.11%;
}

.gallery-icon img {
    margin: 0 auto;
}

.gallery-caption {
    color: #707070;
    color: rgba(51, 51, 51, 0.7);
    display: block;
    font-family: "Noto Sans", sans-serif;
    font-size: 12px;
    font-size: 1.2rem;
    line-height: 1.5;
    padding: 0.5em 0;
}

.gallery-columns-6 .gallery-caption,
.gallery-columns-7 .gallery-caption,
.gallery-columns-8 .gallery-caption,
.gallery-columns-9 .gallery-caption {
    display: none;
}

This almost worked for me except for two things. First I removed the padding in that .gallery-item class:

.gallery-item {
    display: inline-block;
    /* padding: 1.79104477%; remove this line */
    text-align: center;
    vertical-align: top;
    width: 100%;
}

Also you need to set the figure tag to 0 margin if your boilerplate hasn’t already done so:

figure {
    margin: 0;
}

After that it displays nicely.

Finishing Touches – The lightbox

Instead of just clicking through to the raw image or an attachment page I wanted the images to load up in a lightbox. I’ve head JetPack includes a nice feature which does this for you but you have to sign up an account for the client and getting the verification code through their email address has just seemed like an unnecessary waste of time.

Instead I used this popular plugin, Lightbox Plus Colorbox, which uses the incredibly popular jQuery colorbox script as its underlying javascript. The only catch I found was that you need to make sure you set the gallery to point at the media file when you are inserting it. By default it will point at the post attachment page:

Conclusion

In this article we have learned a couple of simple ways to tap into the deep power of customising WordPress. By simply changing a couple of internal settings we can enhance the functionality and meet clients needs more closely. We’ve also seen that sometimes it can be simpler to grab a quick plugin to fill in gaps where WordPress or our theme let us down.