We’ve been concentrating on WordPress development lately, building a new site for an existing customer and designing a site for our sister company, Mercury Photo Bureau. Both sites are mobile friendly, with progressive enhancement for larger displays. Key to testing the layouts was the Responsive Design Test bookmarklet for Chrome.
The Mercury Photo Bureau site is based on a commercial theme. We’ve hacked the heck out of it to improve the user experience, and we’re going to share one of the improvements with you here.
Integrating prettyPhoto
Adding prettyPhoto to Post Thumbnails (Featured Image)
The commercial theme uses the prettyPhoto WordPress lightbox plugin for its portfolio pages. WordPress also includes a shortcode for its own native galleries, which don’t use prettyPhoto for the overlay. They’re s kind of ugly. Plus, wouldn’t it be nice to have a consistent presentation for all the lightboxes on the site? Here’s how you can make that happen.
Before you start, be sure you understand how to create a WordPress child theme. We’re not going to hack the original theme, because any updates would overwrite our changes; instead, we’re going to make all modifications to our child theme.
In your child theme, create the following documents. Change “/siteroot” to the appropriate location, e.g., “/etc”. Use your own theme name in place of “your_childtheme_name”:
- /siteroot/wordpress/wp-content/themes/your_childtheme_directory/style.css
- /siteroot/wordpress/wp-content/themes/your_childtheme_directory/functions.php
- /siteroot/wordpress/wp-content/themes/your_childtheme_directory/js/custom.js
Also, copy /siteroot/wordpress/wp-content/themes/your_parent_theme_directory/single.php and paste it to your theme’s root directory (/siteroot/wordpress/wp-content/themes/your_childtheme_directory/)
Open style.css
in a text editor and place the following at the very top. Change yourthemename to the name of your theme’s parent directory; note that this is case sensitive. You can also place some optional lines in the comments; see the WordPress Codex.
@charset "UTF-8";
/* --------------------------------------------------------------
Theme Name: yourchildthemename
Template: yourparentthemename
--------------------------------------------------------------- */
@import url("../your_parent_theme_directory/style.css");
Open your new custom single.php
in a text editor and find a line beginning with:
<?php if(has_post_thumbnail()
Paste this between it and the next line:
<?php $post_image_id = get_post_thumbnail_id($post_to_use->ID);
if ($post_image_id) {
$thumbnail = wp_get_attachment_image_src( $post_image_id, 'full', false);
if ($thumbnail) (string)$thumbnail = $thumbnail[0];
}
?>
Find this line:
<?php the_post_thumbnail($thumb_size, array( 'title' => get_the_title() )); ?>
and change it to:
<a href="<?php echo $thumbnail ?>" rel="prettyPhoto"><?php the_post_thumbnail($thumb_size, array( 'title' => get_the_title() )); ?></a>
What Did We Just Do?
First, we created a variable, $post_image_id
; we set the variable by retrieving the ID of the post thumbnail. Then we check that the post thumbnail exists; if it does, we find the path to the full image using wp_get_attachment_image_src
. Next, we add a link to the full sized image <a href="<?php echo $thumbnail ?>"
, add a rel="prettyPhoto"
so prettyPhoto can access the link, insert the post thumbnail, and close the link.
Adding prettyPhoto to Post Images
WordPress will process the main theme’s functions.php
, followed by your custom functions.php
. Open your child theme’s functions.php
and place the following code in it:[*]
<?php
if (!is_admin()) {
// Deregister already loaded script; otherwise our custom script will load before jQuery and won't work
wp_deregister_script('jquery');
// Reload CDN; change version to whatever currently supported by WP
wp_register_script('jquery', ('http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'), false);
wp_enqueue_script('jquery');
// Register our custom script
wp_register_script('your_childtheme_custom', get_stylesheet_directory_uri().'/js/custom.js',false);
// Enqueue scripts
wp_enqueue_script('your_childtheme_custom');
}
// Add prettyPhoto to gallery image links
add_filter( 'wp_get_attachment_link', 'gallery_prettyadd');
function gallery_prettyadd ($content) {
$content = preg_replace("/<a/","<a rel=\"prettyPhoto[pp_gallery]\"",$content,1);
return $content;
}
?>
Pretty self-explanatory; read the commented lines to see what it does.
Writing Our Custom Script
Open custom.js
and paste in this code:
jQuery(document).ready(function ($) {
// Add prettyPhoto to post and page linked images. NOTE: /your_childtheme/functions.php handles adding this to galleries
$('.single-post .blog-post-entry .blog-post-thumbnail a,.blog-post-content .wp-caption a,.post-content .wp-caption a').has('img').attr('rel', 'prettyPhoto'); // Don't define a gallery, so no square brackets!
// Add title attribute from image to link when clicked, so prettyPhoto doesn't return 'undefined'. Only returns the title of the clicked image, so don't use this on galleries!
$('.single-post .blog-post-entry .blog-post-thumbnail a img').click(function () {
var desc = $(this).attr('title');
$('.single-post .blog-post-entry .blog-post-thumbnail a').has('img').attr('title', desc);
});
$('.blog-post-content .wp-caption a img').click(function () {
var desc = $(this).attr('title');
$('.blog-post-content .wp-caption a').has('img').attr('title', desc);
});
$('.post-content .wp-caption a img').click(function () {
var desc = $(this).attr('title');
$('.post-content .wp-caption a').has('img').attr('title', desc);
});
});
Again, the commented lines explain what’s going on here.
Further Reading
I found these tutorials invaluable when writing this code.