Adding lightbox overlay to default WP gallery

Sure, WP has a great inbuilt gallery feature. Unfortunately it does not allow you to change the ‘rel’ attribute for links. It’s odd that wp doesn’t already provide an option to change the rel attribute for the hyperlinks that link directly to the image attachments. Here is a simple code hack to make your WP gallery images open up in an overlay screen like lightbox or any other js modal window.

Change ‘rel’ attribute of WP default gallery

You will have to edit post-template.php in the wp-includes directory. Find the following line of code (WP 2.8 has it in line#946)

return apply_filters( 'wp_get_attachment_link', "<a title="$post_title" href="$url">$link_text</a>",
$id, $size, $permalink, $icon, $text );

Change the above line of code with

return apply_filters( 'wp_get_attachment_link',
"<a title="$post_title" rel="shadowbox[media]" href="$url">$link_text</a>",
$id, $size, $permalink, $icon, $text );

That’s it. Now all your image attachments would open up in a lightbox. [PS: The code above will be found in a single line in post-template.php. It has been broken down into multiple lines for easy readability.]

Posted by

Deepak Thomas is a guy who hearts wordpress. If you're having trouble with wordpress, tweet it with @thinkdj and he'll try to solve your queries for a box of chocolates.

3 comments » Write a comment

  1. Thanks for posting this – this is very close to what I have been trying to achieve…Do you know how to do this using something like add_filters in a custom functions.php file – to change the functionality of wp_get_attachment_link without having to worry about WordPress upgrades undoing the changes?

  2. Before deciding to display the "title" 'View all posts filed under…' it looks to your description for that category. Everybody wants to modify the code, which has it's advantages, but if you just want the "title" for that category to display something to your liking you just have to enter that in for the description for that category. If you want it to display nothing, you don't have to delete that line of code in classes.php. You just have to enter a blank space in the description field. Then it won't display anything as a "title" for that category link.

  3. thanks so much for this, it's exactly what I need to achieve. The only problem is I'm new to this so I have no idea where to add this code…would you be able to tell me where I should add it?

Leave a Reply

Required fields are marked *.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>