Having a thumbnail image embedded in a post or page that you can click on and enlarge (lightbox-style), is not only slick-looking but also very useful. We write lots of blog posts and tutorials where readers need to zoom in and see a larger picture.

It’s relatively easy to do with all the WordPress plugins out there today (like this one) but we prefer to not use plugins (most we’ve used are bloatware or poorly written) if we can. In addition, some plugins require you to manually add rel=”colorbox” to every image you embed into a post/page which tends to be a pain.

So here’s a technique we use with our favorite lightbox-style jQuery plugin, Colorbox which will automatically add the rel=”colorbox” attribute for you.

Prerequisites

1. Comfortable editing your theme functions files
2. Already have the Colorbox jQuery plugin setup on your theme

Step 1

Open and edit your themes functions.php file and place the following code in there:

// adds the colorbox jQuery code
function insert_colorbox_js() {
?>
    <script type="text/javascript">
    // <![CDATA[
    jQuery(document).ready(function($){
        $("a[rel='colorbox']").colorbox({
                transition:'elastic', 
                opacity:'0.7', 
                maxHeight:'90%'
        });
        $("a[rel='colorboxvideo']").colorbox({
                iframe:true, 
                transition:'elastic', 
                opacity:'0.7',
                innerWidth:'60%', 
                innerHeight:'80%'
        });
    });  
    // ]]>
    </script>
<?php
}
add_action( 'wp_head', 'insert_colorbox_js' );

This jQuery code hooks into the wp_head located in your theme header and looks for any linked images on your page/post with rel=”colorbox” and binds the Colorbox jQuery function to it.

The next part is where the magic comes in. You would typically think of trying to add the rel=”colorbox” using jQuery but it actually needs to occur before the page is rendered since the colorbox jQuery function binds to the elements on document ready.

So we’re going to use the_content WordPress filter which runs before the Javascript loads.

Step 2

Below the code you just pasted into your functions.php file, place the following code:

// automatically add colorbox rel attributes to embedded images
function insert_colorbox_rel($content) {
	$pattern = '/<a(.*?)href="(.*?).(bmp|gif|jpeg|jpg|png)"(.*?)>/i';
  	$replacement = '<a$1href="$2.$3" rel=\'colorbox\'$4>';
	$content = preg_replace( $pattern, $replacement, $content );
	return $content;
}
add_filter( 'the_content', 'insert_colorbox_rel' );

What that code does is search for any linked images on the page/post and adds in rel=”colorbox” automatically. That’s all there is to it. You could also change the \’colorbox\’ to \’lighbox\’ or any other jQuery plugin to essentially do the same.

Like this tutorial? Subscribe and get the latest tutorials delivered straight to your inbox or feed reader.