Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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?

share|improve this question
    
This is similar to wordpress.stackexchange.com/questions/20854/… –  Ian Dunn Sep 13 '12 at 8:22
add comment

1 Answer

Hi @Denis Belousov:

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

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

http://mikeschinkel.com/websnaps/skitched-20101225-004514.jpg

And finally here is the result:

Conditional Loading of Javascript in WordPress

P.S. Happy Holidays!

share|improve this answer
    
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
    
@MikeSchinkel - At the moment I only acquire programming, but the copy / paste does not do. I'm trying to understand how works that or another code, but do not always have enough knowledge. Please edit my name in answer, in my language it sounds ugly. Thanks. –  Denis Belousov Dec 25 '10 at 22:19
    
@Denis - Sorry about the name typo, fixed (what is your language? You understand English better than I understand yours. :) So did this answer help you? –  MikeSchinkel Dec 26 '10 at 3:22
    
again mike rocks! :D –  rsman Dec 26 '10 at 5:35
show 11 more comments

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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