I am trying to use jQuery to display the comment-section of my WordPress-pages, but without requiring that jQuery be present on all pages that allows comments. Basically, I need the following:

  1. A generic javascript implementation of the ‘in view’ jQuery-plugin (http://remysharp.com/2009/01/26/element-in-view-event-plugin/)
  2. A method of activating jQuery (core) when the div containing the comments come into view.

This would then load jQuery, which in turn would load the comments-section of the page, but only when that section became visible through the browser viewport.

The problem seems to be that I really cannot use ‘wp_enqueue_script’ (WordPress’ generic way of adding scripts) for this, as it is a PHP-function. Is there some method that would allow me to implement a functionality as described above (without breaking WordPress/jQuery-functionality)?

EDIT:
I need to enable jQuery only when the reader decides he wants to read comments (as opposed to only opening a page, seeing the title and leaving) – much in the style of Disqus. Disqus appears to be activated only when visible in the viewport, and I am assuming, at the same time the controlling Javascript is activated.

How would I do something like that in regular Javascript (activating jQuery), and then porting it to WordPress?

3 Answers
3

1. Register jQuery and the plugin within your head

wp_register_script( 'jquery' );
wp_register_script( 'your_jquery_plugin', STYLESHEETPATH, 'jquery', '0.0', false );

2. Register a meta box

It should be a simple checkbox. Please do it like it’s described on the codex page for add_meta_box() (don’t just repeat this one here). If you follow the rest, then the $id for the meta box should be 'jquery_comments'.

Example (shortened):
inside functions.php

    function add_jquery_comments_meta_box() {
       $id = 'jquery_comments';
       $title = __( 'jQuery Comments, please?', 'your_textdomain_string' );
       $context="side"; // advanced/normal also possible
       $priority = 'low'; // high also possible
       $callback_args=""; // in case you want to extend it
       add_meta_box( $id, $title, 'add_jquery_comments_cb_fn', 'post', $context, $priority, $callback_args );
    }
    add_action( 'admin_init', 'add_jquery_comments_meta_box', 1 );

    // Prints the box content
    // Please adjust this to your needs - only slightly modified from codex example
    function add_jquery_comments_cb_fn() {
       // Use nonce for verification
      wp_nonce_field( basename(__FILE__), 'your_noncename' );

      // The actual fields for data entry
?>
      <label for="jquery_comments"><?php _e("Do you want jquery comments on this post?", 'your_textdomain_string' ); ?></label>
      <input type="checkbox" id="jquery_comments" name="jquery_comments" />
<?php
    }

3. enqueue the script based on your meta box as the condition

and then write a function like this in your functions.php file

function add_jquery_comments_plugin() {
   wp_enqueue_script( 'jquery' );
   wp_enqueue_script( 'your_jquery_plugin' );
}
// and call it depending on a conditional in the comment form hook
if ( get_post_meta($post->ID, 'jquery_comments', true) ) {
   add_action( 'comment_form', 'add_jquery_comments_plugin' );
}

Leave a Reply

Your email address will not be published. Required fields are marked *