I'm trying to add Javascript for my "PrettyPhoto" plugin to pages only when their content contains rel='prettyPhoto'. This looks very simple to me but all solutions I've found on the internet doesn't work for me. One example is:

<?php
function load_my_js() {
  if(is_admin() ) return; // never mind if this is an admin page
  global $post;
  if (strpos($post->post_content,'rel="prettyPhoto') == false) return
  wp_register_script('js_test',plugins_url().'/demo/test.js',array('jquery'));
  wp_enqueue_script('js_test');
}
add_action('wp','load_my_js');
?>

Another one from Yoast:

function yst_conditional_thickbox() {
  global $post;
  if (is_singular() &&
    strpos($post->post_content,'class="thickbox"') !== false) {
      wp_enqueue_script('thickbox');
      wp_enqueue_style('thickbox');
  }
}
add_action('wp_print_styles','yst_conditional_thickbox');

Maybe you know how to do this? Thank you!

UPDATE

This is how looks your code:

class UglyPhotoPlugin {
  static function on_load() {
    add_action('wp',array(__CLASS__,'load_my_js'));
  }
  static function load_my_js() {
    if (!is_admin()) {
      global $post;
      if (strpos($post->post_content,'rel="prettyPhoto"') !== false) {
        wp_enqueue_script( 'jquery' );
        wp_enqueue_script( 'prettyJs', get_bloginfo('template_directory').'/js/jquery.prettyPhoto.js', array( 'jquery' ) );
      }
    }
  }
}
UglyPhotoPlugin::on_load();

HTML output:

We are here!stdClass Object
(
    [ID] => 17
    [post_author] => 1
    [post_date] => 2009-12-25 17:10:18
    [post_date_gmt] => 2009-12-25 17:10:18
    [post_content] => 
    [post_title] => Portfolio
    [post_excerpt] => 
    [post_status] => publish
    [comment_status] => closed
    [ping_status] => closed
    [post_password] => 
    [post_name] => portfolio
    [to_ping] => 
    [pinged] => 
    [post_modified] => 2010-12-21 00:24:59
    [post_modified_gmt] => 2010-12-21 00:24:59
    [post_content_filtered] => 
    [post_parent] => 0
    [guid] => /?page_id=17
    [menu_order] => 3
    [post_type] => page
    [post_mime_type] => 
    [comment_count] => 0
    [ancestors] => Array
        (
        )

    [filter] => raw
)

This code is generated above !DOCTYPE. Am I right?

I'm trying to add Javascript for my "PrettyPhoto" plugin to pages only when their content contains rel='prettyPhoto'. This looks very simple to me but all solutions I've found on the internet doesn't work for me. One example is:

<?php
function load_my_js() {
  if(is_admin() ) return; // never mind if this is an admin page
  global $post;
  if (strpos($post->post_content,'rel="prettyPhoto') == false) return
  wp_register_script('js_test',plugins_url().'/demo/test.js',array('jquery'));
  wp_enqueue_script('js_test');
}
add_action('wp','load_my_js');
?>

Another one from Yoast:

function yst_conditional_thickbox() {
  global $post;
  if (is_singular() &&
    strpos($post->post_content,'class="thickbox"') !== false) {
      wp_enqueue_script('thickbox');
      wp_enqueue_style('thickbox');
  }
}
add_action('wp_print_styles','yst_conditional_thickbox');

Maybe you know how to do this? Thank you!

UPDATE

This is how looks your code:

class UglyPhotoPlugin {
  static function on_load() {
    add_action('wp',array(__CLASS__,'load_my_js'));
  }
  static function load_my_js() {
    if (!is_admin()) {
      global $post;
      if (strpos($post->post_content,'rel="prettyPhoto"') !== false) {
        wp_enqueue_script( 'jquery' );
        wp_enqueue_script( 'prettyJs', get_bloginfo('template_directory').'/js/jquery.prettyPhoto.js', array( 'jquery' ) );
      }
    }
  }
}
UglyPhotoPlugin::on_load();

HTML output:

We are here!stdClass Object
(
    [ID] => 17
    [post_author] => 1
    [post_date] => 2009-12-25 17:10:18
    [post_date_gmt] => 2009-12-25 17:10:18
    [post_content] => 
    [post_title] => Portfolio
    [post_excerpt] => 
    [post_status] => publish
    [comment_status] => closed
    [ping_status] => closed
    [post_password] => 
    [post_name] => portfolio
    [to_ping] => 
    [pinged] => 
    [post_modified] => 2010-12-21 00:24:59
    [post_modified_gmt] => 2010-12-21 00:24:59
    [post_content_filtered] => 
    [post_parent] => 0
    [guid] => http://mysite/?page_id=17
    [menu_order] => 3
    [post_type] => page
    [post_mime_type] => 
    [comment_count] => 0
    [ancestors] => Array
        (
        )

    [filter] => raw
)

This code is generated above !DOCTYPE. Am I right?

• javascript
• conditional-content

• This is similar to wordpress.stackexchange/questions/20854/… – Ian Dunn Commented Sep 13, 2012 at 8:22

1 Answer 1

Not sure what exactly your code is doing wrong but here's code that does it right. I've decided to wrap the code in a class to be used for your plugin, and for humor I called it "Ugly Photo Plugin." Here's the full code:

<?php
/*
Plugin Name: Ugly Photo Plugin
*/
class UglyPhotoPlugin {
  static function on_load() {
    add_action('wp',array(__CLASS__,'wp'));
    add_shortcode('ugly-photo',array(__CLASS__,'ugly_photo_shortcode'));
  }
  static function ugly_photo_shortcode($attributes,$content,$code) {
    return '<div rel="ugly-photo">' . $content . '</div>';
  }
  static function wp() {
    if (!is_admin()) {
      global $post;
      if (strpos($post->post_content,'[ugly-photo]') !== false) {
        wp_enqueue_script( 'jquery' );
        wp_enqueue_script( 'js_test', 
          plugins_url('/demo/test.js',__FILE__), 
          array('jquery') );
      }
    }
  }
}
UglyPhotoPlugin::on_load();

Note that I've decided to use a shortcode [ugly-photo] and am testing for it instead of 'rel="prettyPhoto"' because WordPress' WYSIWYG TinyMCE editor will strip out the "rel" value from your <div> so using the shortcode solves that problem.

Here's what the post looks like when editing:

_{(source: mikeschinkel)}

Here's what my Javascript File has in it and where I've located it:

_{(source: mikeschinkel)}

And finally here is the result:

_{(source: mikeschinkel)}

P.S. Happy Holidays!