Customizing the output of the [gallery] shortcode

The default output for the WordPress gallery is pretty bare bones. They simply output the pictures in a whatever x whatever grid and allow you to link to the file or media page from each pictures. The great thing about that is that you can really go nuts customizing it and make it into anything you need.

This snippet of code will make anywhere you use the ['gallery']¬†shortcode into a flexslider with the thumbnail carousel. If you didn’t want the thumbnails you can simply remove the chunk of code where I loop through the images again to output the carousel.

First you have to include the flexslider scripts in your theme by pasting this in your functions.php and upload the files to the corresponding directory

 

Paste this code in your functions.php. You can edit the output to have any HTML structure you would like. This can really be a base for any type of slider.

 

Now to simply initialize the slider using flexslider’s functions. You can put this directly in your footer.php or you can include it in your functions.php using wp_footer to output the script.

 

The_Idiot

About Lindsay

Self made millionaire.. Oops I mean web developer.. who started out learning how to build websites with tables and dreamweaver, I now almost entirely focus on CMS-based development, usually WordPress. I love coding and designing and regularly switch between my left and right brains.

4 thoughts on “Customizing the output of the [gallery] shortcode

  1. Hi. I wanted to know if this will work to get images in a gallery to link to another page or url, instead of just redirecting to the image? Thank you.

    • lindsay Branscombe

      yep you can just add in the anchor tags before the image tags and that will work just fine.

  2. how so? I am a newbie.

  3. […] Customizing the output of the gallery¬†shortcode […]

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">