Almost four years ago, I wrote what would be one of the most popular posts ever on this site: Taking Control of WordPress Gallery Styling (Without a Plugin). I think it resonated because WordPress’s gallery styling has been heavy-handed, injecting a <style> tag and snippet directly into the page with some mildly arbitrary CSS.

Things have changed with the release of WordPress 3.9. You can now declare theme support for HTML5 galleries (and captions), which outputs <figure> and <figcaption> elements and removes the default, injected styling. Now, we can have control over the gallery style more easily.

Enable HTML5

The first step is declaring support for HTML5 galleries—I’d recommend going ahead with captions, too. Make sure you’re on WordPress 3.9, and add this to a theme file (yes, functions.php is fine):

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

Styling

You’ll need to style the galleries yourself now, including that horizontal distribution that WordPress did do really well. You can start with what used to be injected, which I’ve adapted to work with classes instead of IDs:

.gallery {
  margin: auto;
}

.gallery .gallery-item {
  float: left; // Change to 'right' if RTL is enabled
  margin-top: 10px;
  text-align: center;
}

.gallery img {
  border: 2px solid #cfcfcf;
}

.gallery .gallery-caption {
  margin-left: 0;
}

That’s certainly not required; it just gives you a starting point.

WordPress used to calculate the width of the items in a gallery using PHP, because we need to know how many items are in a row (“Columns”) and divide that by 100 to get the proper percentage. We can use JavaScript to set this width, because WordPress still adds a class to the gallery element telling us how many elements go in a row.

<script>
// Cache the Gallery element
var gallery = jQuery('.gallery');
if ( gallery.length > 0 ) {
  // Find the WordPress class that tells us how many columns to use
  var columns = jQuery.grep(gallery.attr('class').split(' '), function(v, i) {
      return v.indexOf('gallery-columns') === 0;
  }).join();
  // Get the number out of the class and calculate the width
  gallery.find('.gallery-item').width( 100/parseInt(columns.replace('gallery-columns-', '')) + '%' );
}
</script>

Lightbox

I like using Nivo Lightbox—so much so I built a WordPress plugin for it. You can grab that plugin and activate it, and it will work automatically throughout your site, including grouping galleries together automatically.

You can also easily integrate it into your theme. If you’re going that route, you ought to combine all the needed CSS and JS files with your theme files to gain any benefit—otherwise, just use the plugin. When integrating, I install Nivo Lightbox with Bower and enqueue the needed files with my existing Grunt configuration. Since the script is used nearly everywhere, we might as well include it in the main files.

You’ll want to do two things to integrate in this manner: change the theme CSS a bit and add the initiation call to your JavaScript file.

Nivo Lightbox CSS

I pull the CSS from the default Nivo Lightbox theme and put it in my own file for two reasons. First, since I’m including the files in a Grunt task, the paths to the small lightbox images (like the “close icon) need to be changed. Second, this allows me to make any visual changes I want. Just make sure those CSS components are pulled in after the main nivo-lightbox.css file.

Nivo Lightbox JS

To initialize the lightbox, we need to add a quick function call. The following is in my plugin that I linked up, but you’ll need it regardless:

<script>
jQuery(document).ready(function(){
    jQuery('.gallery a:has(img)').attr('data-lightbox-gallery', 'nivo-gallery');
    jQuery('a[href*=".png"]:has(img), a[href*=".gif"]:has(img), a[href*=".jpg"]:has(img)').nivoLightbox();
});
</script>

This looks through the page and initializes any link that’s pointing to an image, and adds a data attribute to gallery images so they’re grouped together.

You can add options inside the nivoLightbox() call as you wish.

That should get you started! Looking back on an old article, seeing its popularity, and seeing WordPress naturally evolve to address its concerns is encouraging.

I hope this updated article helps you move forward in building great websites. As always, feel free to leave questions in the comments area.

Want blog posts sent directly to your email?

Sign up to get emails from Logos Creative! You'll get the latest blog posts and an occasional extra email. Unsubscribe (easily) at any time.

May 9, 2014 — 2 Comments — In Blog, Development, Tutorial, WordPress