Home » WordPress gallery filter to modify the HTML output of the default gallery shortcode and style

WordPress gallery filter to modify the HTML output of the default gallery shortcode and style


Many people ask me how to filter the output of the WordPress gallery shortcode and styles so I figured I’d write a quick filter that has my usual explicit commentary so that people can easily copy/paste it to create their own custom filter.

Note: This is a custom WordPress gallery filter to modify the HTML output of the default gallery shortcode and style. It is only meant to use as a starting point so you can modify your gallery output to your liking with your own gallery filter.

This is an example of how to add a custom filter to modify the output of the gallery shortcode generated by WordPress. This is basically a filter that will output the code WordPress already outputs with some added comments so you can copy/paste this into functions.php and modify it to your liking.

If you have any questions, please feel free to post a comment. I’m always happy to help!

26 comments on “WordPress gallery filter to modify the HTML output of the default gallery shortcode and style

  1. Tony on

    This is great!

    I’m using a media categories plugin and I would like to add the category into the output – as a class so I can style the images.

    Would I be right in assuming the query would need to sit inside the foreach ($attachment loop? And that I would use the $id variable to select the category?

    I appreciate your input.

    Reply
    • Jeff Hays on

      Hey Tony,

      I’m glad this was helpful. As long as the media categories plugin you’re using allows you to grab the category by the attachment id, then that’s absolutely right. If you have issues implementing that, let me know and I’ll see if I can install that plugin and reproduce what you’re trying to achieve.

      Reply
  2. ovidiu on

    hi there,

    I am having a problem with my galleries, if I activate tiled galleries from within jetpack, my lightbox plugin stops working. The author of the lightbox plugin told me I need to customize the wp gallery shortcode and introduce You need to put rel=”lightbox” or rel=”lightbox[gallery-n]” before the border=”n” in tiled gallery links.

    I googled and found your page, would you mind showing me where this rel=”ligthbox” needs to go? (I really suck at PHP)

    Reply
    • Jeff Hays on

      Hey ovidiu,

      Sorry for not getting back to you, I must have started to respond to this and then closed my browser unexpectedly. You’d want to change the way $link is set in the code sample above, and instead of using wp_get_attachment_link() you may want to use wp_get_attachment_url() so you can build the link yourself in the $output section on line 112.

      In the code sample above, wp_get_attachment_link() builds the entire anchor tag so you don’t have the opportunity to add a rel="lightbox" attribute to that anchor tag as needed. Let me know if you still need help with this and perhaps we can setup a time to chat online if you continue to have issues.

      Reply
  3. Philipp on

    Hey Jeff,

    this is exactly what I was looking for the last two days. Thank you so much for this. I tried to add new classes to the and Tags.

    The only thing I still can’t find is where can I add an additional class to the img-tag? Any ideas?

    best regards

    Philipp

    Reply
    • Jeff Hays on

      Hey Philipp,

      It should be around line 104 of my example. You’d want to change that to grab the attachment’s URL instead of using wp_get_attachment_link(). Then on line 112 of my example, you’d build your own anchor tag with the URL, and build your own tag inside there with the src pointing to that same URL. You should then be able to add any classes you want to the tag since you’re printing it out yourself (instead of relying on wp_get_attachment_link()).

      Reply
  4. Tania on

    This article has been very helpful. However, I’m a little stuck on how I can add media queries to make the gallery responsive. Basically, I want 5 columns for a desktop, 3 for a tablet, and 1 for a smartphone like this:

    Reply
    • Jeff Hays on

      Hey Tania,

      What have you tried? Are you adding this CSS to the gallery css filter in the code snippet above or are you adding this to your stylesheet? Do you happen to have a test link up that I can use to help troubleshoot? If not, I could possibly setup a site/gallery and arrange a time to help you troubleshoot via chat. I’m on IRC during EST timezone business hours in #robido on freenode.

      Reply
    • Jeff Hays on

      Hey vb078,

      There already is a unique ID applied to each gallery div in this code sample that is formatted like galleryid-3 for example. Do you need something different than what’s currently there? Are you saying you need a unique ID on each item in the gallery that uses the attachment ID?

      Reply
  5. Bülent Sakarya on

    Hello..

    I’m tring this but pagination not working.

    If I add gallery in a page, pagination works, but, if I add gallery in a post or custom post type it doesn’t work. I see pagination links.

    What the reason can be?

    Thanks..

    Reply
    • Jeff Hays on

      Hey Bülent,

      Your pagination links should be unrelated to the filter in this article, but typically speaking “pagination” shouldn’t be on a single post without <!‐‐nextpage‐‐> in the content. Check your single.php (and any other single post template your theme has) and verify the paginate_links() function is present and make sure you’ve added <!‐‐nextpage‐‐> between every page break.

      It’d be hard to say for sure without seeing some of the code in your theme and the content in your articles. If you want additional help I’m typically online on IRC from 9am-6pm on freenode helping people with WordPress and other programming and server admin troubles. I am often found in the #wordpress channel and there’s also a chat page on this site that will connect you right to the #robido channel on freenode if you want to ask me questions and chat live 🙂

      Reply
    • Jeff Hays on

      Hey Mike,

      You’d want to change the way $link is set in the code sample above – instead of using wp_get_attachment_link() you may want to use wp_get_attachment_url() so you can build the link yourself in the $output section on line 112.

      In the code sample above, wp_get_attachment_link() builds the entire anchor tag so you don’t have the opportunity to add a title=”yourcaption” attribute to that anchor tag as needed. Once you change that to wp_get_attachment_url() and build your own <a> tag (with the href set to the output of wp_get_attachment_url()) you should also be able to set a title attribute with the output of $attachment->post_excerpt. Let me know if this answers your questions or if you need more clarification.

      Reply
  6. Luke on

    Just Great!

    An other question: I would like to link the gallery thumbnails to the ‘large’ images insead of the fullsized image.

    How is this possible?

    Reply
    • Jeff Hays on

      Hey Luke,

      On line 104 of my code snippet you can change all occurrences of the $size variable on that line with whatever size you’d like to link to (i.e. change every $size on line 104 to ‘large’).

      Reply
      • Luke on

        Thank you for your reply!
        I changed the two $size variable on line 104 to ‘large’.
        Unfortunately it changed only the size of the images which are displayed but not the link on the images – the link to the ‘bigger’ imge was still full size.

        Luke

        Reply
  7. Marek on

    Hello, great tutorial. What if I don´t want to modify all galleries but only one and the rest will use the traditional wordpress output. Now the filter change the output for all galleries.

    Reply
    • Jeff Hays on

      Hey Marek,

      Great question. You’ll want to add an if statement inside your filter function (the first line) that will simply return $output; if it’s not the page/post/whatever you’re looking for. Let me know if you have any questions.

      Reply
  8. desainrumahmoderen.com on

    Yοur method of explaining everything in this post is truly good.
    Everyone should be able to effortlessⅼү understand it.
    Thanks a ⅼot!

    Reply

Leave a Reply

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