I know there have been a couple of questions in relation to this and had a look at them, but mine differs slightly on the problem experienced and the code. I am basically building my first theme and hoping to implement PrettyPhoto, I have been careful with enqueue'ing scripts and jQuery and have NivoSlider working ok, but have obviously missed something here, hence the question!

Firstly I have this code for the WP jQuery in the functions.php file:

function scripts_jquery_load_scripts() {
wp_enqueue_script( 'jquery' );
add_action('wp_enqueue_scripts', 'scripts_jquery_load_scripts');

Then for PrettyPhoto I have the following code also in the functions.php:

function prettyphoto_load_scripts() {
wp_register_script( 'jquery.prettyphoto', get_bloginfo('template_directory').'/prettyphoto/js/jquery.prettyphoto.js',      array('jquery'));
wp_enqueue_script( 'jquery.prettyphoto' );
add_action('wp_enqueue_scripts', 'prettyphoto_load_scripts');

and for the style

function prettyphoto_load_styles() {
wp_register_style( 'prettyphotocss', get_bloginfo('template_directory').'/prettyphoto/css/prettyphoto.css');
wp_enqueue_style( 'prettyphotocss' );
add_action('wp_enqueue_style', 'prettyphoto_load_styles');

and finally to add the rel"prettyphoto" on the link surrounding the image

add_filter('the_content', 'addprettyphotorel', 12);
add_filter('get_comment_text', 'addprettyphotorel');
function addprettyphotorel ($content) {   
global $post;
$pattern = "/<a(.*?)href=('|\")([^>]*).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>(.*?)<\/a>/i";
$replacement = '<a$1href=$2$3.$4$5 rel="prettyphoto['.$post->ID.']"$6>$7</a>';
$content = preg_replace($pattern, $replacement, $content);
return $content;

I have used Firebug to try and work out where my mistake is, I have the WP includes Jquery appearing in the head, as well as the PrettyPhoto script. Also checking the image container I have the following appearing:

<a title="European Rugby 7s-29" rel="prettyphoto[230]" href="http://localhost/wp-content/uploads/2012/08/European-Rugby-7s-29.jpg"><img title="European Rugby 7s-29" alt="European Rugby 7s-29" class="attachment-thumbnail" src="http://localhost/wp-content/uploads/2012/08/European-Rugby-7s-29-150x150.jpg"></a>

But the thumbnails still open up in a new window and not with PrettyPhoto. I have set WP_DEBUG to true in the wp-config.php file, resolved a few unrelated issue as well just incase they were having an affect.

I am running this all on a WAMP server at the moment, and planning to place online in the next day to see if this helps the issue, I know Jetpack will not work on WAMP.

If anyone one has any possible tips it would be really appreciated?

Thanks in-advance,


Additional information

Adding this as some details from Firebug, below is what is being displayed in the head of the page:

<script src="http://localhost/wp-includes/js/jquery/jquery.js?ver=1.7.2" type="text/javascript"></script>
<script src="http://localhost/wp-content/themes/director/js/responsive-images.js?ver=3.4.1" type="text/javascript"></script>
<script src="http://localhost/wp-content/themes/director/prettyphoto/js/jquery.prettyphoto.js?ver=3.4.1" type="text/javascript"></script>

I have also looked at the script tab when running Firebug, in the list responsive images appears first, then Prettyphoto and finally jQuery. I assumed that the scripts load in the order they are listed in the head?

  • Have you checked the Javascript error console panel in Firebug, after clicking the prettyphoto link?
    – onokazu
    Aug 22, 2012 at 16:36
  • Are you instantiating Pretty Photo? $("a[rel^='prettyPhoto']").prettyPhoto(); Aug 22, 2012 at 16:51
  • @user940956 thanks for the tip, not used firebug for Javascript before, can you elaborate on what I am looking for?
    – Ant
    Aug 23, 2012 at 6:37
  • @BrianFegter thanks for coming back. This could be it as from what I have seen on other lightbox examples you place some code in the header.php to initialise. I have not placed any further code, and the basic tutorial I used for this did not specify any. I am willing to give this a go though as can easily delete if not working, so if I placed your sample code in script tags in the header would that be a possible solution?
    – Ant
    Aug 23, 2012 at 6:44

2 Answers 2


Ok, after a few days trying various variations on the code I was originally using I still had no success. I took my theme right back to the bare bones, and tried the code again, I even tested the code of the TwentyEleven theme but still had no joy. I have an answer but not using the code above.

To register and enqueue the scripts I place the following in the functions.php:


function prettyphoto_load_scripts() {
wp_register_script( 'jquery.prettyphoto', get_bloginfo('template_directory').'/prettyphoto/jquery.prettyPhoto.js',array('jquery'));       // array('jquery') = new script depends on Jquery, cause WordPress to load Jquery before the new script.
    wp_enqueue_script( 'jquery.prettyphoto' );
wp_register_script( 'enablepretty', get_bloginfo('template_directory').'/prettyphoto/enablepp.js');  // array('jquery') = new script depends on Jquery, cause WordPress to load Jquery before the new script.
    wp_enqueue_script( 'enablepretty' );
wp_register_style( 'prettyphotocss', get_bloginfo('template_directory').'/prettyphoto/css/prettyPhoto.css');
    wp_enqueue_style( 'prettyphotocss' );

add_action('wp_enqueue_scripts', 'prettyphoto_load_scripts',11);

The second script I am registering and enqueuing called enablepretty.js is to enable prettyphoto, the contents of which are below:

jQuery(document).ready(function() { 
var items = jQuery('div#textcontent-container a').filter(function() {
    if (jQuery(this).attr('href'))  
        return jQuery(this).attr('href').match(/\.(jpg|png|gif|JPG|GIF|PNG|Jpg|Gif|Png|JPEG|Jpeg)/);
if (items.length > 1){
    var gallerySwitch="[customPP]";
    var gallerySwitch="";


Note the 'div#textcontent-container is specific to my test theme, you will need to alter this to the div surrounding your gallery or content. I have used data-rel="prettyPhoto" as opposed to rel="prettyPhoto" this will avoid issues when validating HTML5.

Hope this helps someone else!



Make sure you initialize it aswell.

Put this in your header as test.

<script type="text/javascript" charset="utf-8">
  • apparently this was already in comments suggested aswell.. so did it help?
    – woony
    Aug 23, 2012 at 10:12
  • it says , "No posts were found. Sorry"
    – woony
    Aug 23, 2012 at 14:44
  • I didn't expect you to check that quick! :-) I have just recreated the gallery page again, as something I did and this time it shows the rel"prettyphoto" in the image link. use this link simples.net23.net/?page_id=13
    – Ant
    Aug 23, 2012 at 14:47
  • can you try something and change your doctype? set it to this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    – woony
    Aug 23, 2012 at 14:50
  • Changed doctype as requested
    – Ant
    Aug 23, 2012 at 14:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.