How to use PrettyPhoto with WordPress Featured Images

The thing I love most about web design/development is that there’s always something new to learn. There’s not a day goes by when I don’t have to try something I haven’t done before.

Today I had a requirement to make Featured Images open in a lightbox when clicked on by a user. You’d think that kind of functionality might be built into WordPress, but it appeared not.

Researching the problem on Google, I found a variety of solutions to the problem, but none that actually worked for me. So I scratched my head a bit and eventually came up with the following technique. I hope someone out there finds it useful!

1. Download and install PrettyPhoto

First of all, I chose to use the PrettyPhoto Jquery lightbox clone. You can download the files from here. I chose the Production version.

Unzip the file, and then copy js/jquery.prettyPhoto.js into your themes ‘js’ folder.

Copy the css/prettyPhoto.css file into your themes ‘css’ folder.

Copy all of the folders found within the /images/ folder into your theme’s ‘images’ folder.

2. Instantiate PrettyPhoto in your theme

I find the best way of including files in your theme is to use WP’s enqueuing system. This prevents conflicts between files and is a nice tidy way of adding Javascript and CSS files in to your theme without having to write <link> tags directly into the <head> section of your theme.

To enqueue the files, open up your theme’s functions.php file.

Add the following lines:

function run_my_scripts() {
if (!is_admin()) {
wp_deregister_script('jquery'); //Prevent WP from using its own copy of Jquery, so you can specify the version you want

wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js', false, '1.11.0'); //Specify the version of Jquery that you want
wp_register_script('prettyPhoto', '/wp-content/themes/my_theme_name/js/jquery.prettyPhoto.js', false, ''); //Add the prettyPhoto script
wp_register_script('custom', '/wp-content/themes/my_theme_name/js/custom.js', false, ''); //Add your custom script

wp_enqueue_script('jquery');
wp_enqueue_script('prettyPhoto');
wp_enqueue_script('custom');
}
}

Save this file.

Next, we need to tell WordPress to run this function. We do this in the theme’s header.php file.

Add the following somewhere between the tags:

<?php run_my_scripts();
wp_head(); ?>

Save the file.

Next we need to instantiate PrettyPhoto in our custom.js file.

Add the following into custom.js:


$(document).ready(function(){
$("a[class^='prettyPhoto']").prettyPhoto();
});

When you reload your site, you should see something similar to the following in the HTML source code:

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js?ver=1.11.0'></script>
<script type='text/javascript' src='http://www.mywebsitename.co.uk/wp-content/themes/my_theme_name/js/jquery.prettyPhoto.js?ver=3.8.1'></script>
<script type='text/javascript' src='http://www.mywebsitename.co.uk/wp-content/themes/my_theme_name/js/custom.js?ver=3.8.1'></script>

3. Add your featured image

Edit one of your posts/pages within WordPress WP-admin, and add a featured image. make sure you press the Update button (or ‘Publish’ if this is a new page).

If your theme is not already set up to display featured images, then you’ll need to add a bit of code to either your post or page template to enable it to display the image.
I tend to name my templates according to their function, so the home page always uses a template called template-homepage.php, and content pages always use a template called template-content.php
In this case, I’m going to add my featured image into my content page template.

Add the following PHP code into your template, wherever you would like the featured image to be displayed:


<?php if ( (function_exists('has_post_thumbnail')) && (has_post_thumbnail()) ) { //Check whether a featured image has been added to this page/post
the_post_thumbnail('large');
} ?>

Save the file.

When you reload this page in your front-end site, you should see the featured image you’ve chosen being displayed in position. However, at the moment it won’t enlarge when you click on it. We have to make it clickable first, by wrapping it in an anchor tag.

Replace the code you added above with this instead:


<?php if ( (function_exists('has_post_thumbnail')) && (has_post_thumbnail()) ) { //Check whether a featured image has been added to this page/post
$full_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full'); //Fetch the URL of the featured image
echo '<a href="' . $full_image_url[0] . '" title="' . the_title_attribute('echo=0') . '" class="prettyPhoto">'; //Wrap the <img> in an <a> tag
the_post_thumbnail('large',$default_attr); //Display the featured image itself
echo '</a>';
} ?>

Now save this file, go back to the front-end of your site and voila the featured image should be clickable. When you click on it, it should open up in a lightbox window.

This seems like a long and convoluted process, but it does work, at least if you’re developing a custom WordPress theme.

Good luck!