WordPress + Slick Slider = Better Galleries

I recently noticed an odd pattern in WordPress sites that I have been developing for clients at work. The problem, if you can call it that, is that even though there isn’t a need for image galleries in the initial brief or proposal, once the site has been handed over the client will notice the native WordPress Gallery option and add one into a page.

This poses an issue because unfortunately WordPress, by default, adds in a gallery that leaves a lot to be desired. Then, often because a gallery wasn’t asked for, it isn’t even something that is covered in our training sessions with clients, meaning that 9 times out of 10 what ends up getting added in is a 3 column thumbnail image gallery.

It isn’t really fair to say that the clients are in the wrong in doing this, instead it’s more an odd side effect of developing custom WordPress websites to order. In this process we only develop briefs state as being needed. So I started to think about how I could improve on the WordPress gallery in a way that could be dropped into any site we work on in the future. The main idea that came up from this was to incorporate Ken Wheeler’s slick slider and make the WordPress gallery work in conjunction with this.

My first attempt was to simply call slick on the mark-up that WordPress adds into a page to create a gallery but this unfortunately created a bit of a mess at it mixed the slick code into a description list, leaving only a blank space on the page. So I looked around and delved into the gallery function eventually finding a filter that you can apply to the gallery before it is output. The final code to be added to the functions.php file is as follows;

add_filter('post_gallery','slickGalleryMarkup',10,2);

function slickGalleryMarkup($string, $attr){

  $output = '<div class="wp-gallery">';
  $images = get_posts(
    array(
      'post_type' => 'attachment',
      'include' => $attr['ids'],
      'orderby' => 'post__in'
    )
  );

  foreach($images as $galleryImage){
    $output = $output.'<div class="gallery-slide">'.wp_get_attachment_image($galleryImage->ID, 'large').'</div>';
  }

  $output = $output.'</div>';

  return $output;
}

From there you can then initialise slick against this new gallery mark-up as follows;

$(document).ready(function() {
  if($('.wp-gallery').length) {
    $('.wp-gallery').slick({
      // slick options
    });
  }
});

Personally I then recommend including the slick basic style sheet and adding any additional style that you would need for your custom theme, of course you can choose to include one of the included slick themes if you find that easier. Either way once you’ve worked through the styles and got everything matching up with your WordPress theme then you should end up with something looking a bit like this.

^{All rights to the example images in this slider belong to Warner Brothers Animation, I’m claiming no ownership.}

This isn’t to say this is a perfect solution to the problem. It does however add some nice functionality that will be easy to replicated across a number of sites.

---