3

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.com/?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?

4

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:

WordPress Post Editor with 'Ugly Photo' Shortcode
(source: mikeschinkel.com)

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

https://mikeschinkel.com/websnaps/skitched-20101225-004514.jpg
(source: mikeschinkel.com)

And finally here is the result:

Conditional Loading of Javascript in WordPress
(source: mikeschinkel.com)

P.S. Happy Holidays!

  • I can't understand how to add this code to my purpose. The main purpose of the prettyPhoto plugin is to load images into popup window. For this we must add for all images rel="prettyPhoto" attribute and link after this looks like this: <a href="/big_image.jpg" rel="prettyPhoto"><img src="/small_images.jpg" alt="" /></a> . My portfolio template already include rel="prettyPhoto" for all images. I just want to check if a page exist rel="prettyPhoto", if yes include prettyPhoto.js. Yes, later I can add images to post/page by hand with rel="prettyPhoto" attributes. My name is Denis:) – Denis Belousov Dec 25 '10 at 15:07
  • @Denis: Then just replace strpos($post->post_content,'[ugly-photo]' with strpos($post->post_content,'rel="prettyPhoto"' and just don't use the shortcode. (BTW, can I assume you are not a programmer and are just copying and pasting code rather than using it as a study aid to learn how to do these things yourself? I'm not challenging, I just want to learn what your skill level is because I'd answer differently for a copy-and-paster than for a developer.) – MikeSchinkel Dec 25 '10 at 20:38
  • 1
    again mike rocks! :D – rsman Dec 26 '10 at 5:35
  • 1
    @Denis Belousov - What evidence do you have for NOTHING? You don't see your script work, or have you viewed the source in browser and don't see the <link> generated in the HTML output? If it shows up in <link> have you verified that the URL is correct, i.e. have you used your browser to download the .JS file? Could it be an error in your Javascript instead? Also, where are you putting the code, in a plugin or your theme's functions.php file? If a plugin, why do you used ` get_bloginfo('template_directory')`? Is there a chance you are using Child Theme? – MikeSchinkel Dec 27 '10 at 2:40
  • 1
    @Denis Belousov - My plugin is very, very simple. I'm 99% sure you have something that is conflicting and causing it to fail. Why not download the PhpStorm 2.0 beta and ZendDebugger so you can trace through to figure out your issue like I would do if I had your site on my local machine? confluence.jetbrains.net/display/WI/Web+IDE+EAP It's the absolute best tool you'll find for resolve issues like this. – MikeSchinkel Dec 27 '10 at 14:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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