x + 3 ≅ buttons

My previous post teaches you how to use jQuery and Ajax for the administration pages in your WordPress plugins. To use them in your user-facing pages requires a few changes.

We’ll use here a simlarly contrived example. Let’s say you use <!--more--> in your longer posts so they don’t fill up too much of your page. Normally, clicking the “Read more…” (or whatever text you use) link takes the user to a separate page with the complete post. In our example, rather than sending the reader to a new page, we’ll make an Ajax request to get the rest of the post and insert it directly into the current page.

Step 1: A Standard WordPress Template

Somewhere in your template, you’ll find a section like:

<div class="entry">
  < ?php the_content('Read more...'); ?>
</div>

This displays the contents of your post, with the “Read more…” link at the end to read whatever was cut off by <!--more-->. Pretty simple.

Step 2: Get the Full Post

Now it’s time to start writing our plugin. We’ll call it “Post Expander”, so our plugin file will be called post-expander.php.

We need a function that will return just the contents of a post. For example:

function post_expander_show_post (  ) {
  if ( have_posts() ) {
    while ( have_posts() ) {
      the_post();
      the_content('Read more...');
    }
  }
  die();
}

This function will take advantage of the WordPress loop, printing out just the contents of the post before dying.

So how and when do we call this function? First, we use the init hook to see if the requested posted our special post_expander variable.

function post_expander_activate ( ) {
  if ( isset( $_POST["post_expander"] ) ) {
    add_action( 'wp', 'post_expander_show_post' );
  }
}
 
add_action('init', 'post_expander_activate');

If the variable is set, we attach post_expander_show_post to the wp hook, which runs after posts are loaded but before any templates are executed. Now, if a page is requested with the post_expander variable posted, this plugin will intercept the request.

Step 3: Write the JavaScript Function

So we need a JavaScript function to post that request and insert the full post into the page. We’ll put that code in post-expander.js.

jQuery(document).ready( function($) {
  $(".more-link").click( function() {
    var link = $(this);
    $.post(link.attr("href"), {
        post_expander: 1
      }, function(data) {
        link.parents(".entry").html($(data));
      }
    );
    return false;
  });
});

Pretty simple JavaScript, that. (NB: link.parents(".entry") makes the assumption that the body of your post is in a div with the class entry.)

Step 4: Load Your JavaScript into the Page

Just a bit of housekeeping left, now. We need to load our JavaScript into the page, taking care to mention that it requires jQuery.

function post_expander_list_scripts ( ) {
  wp_enqueue_script( "post-expander", path_join(WP_PLUGIN_URL, basename( dirname( __FILE__ ) )."/post-expander.js"), array( 'jquery' ) );
}
 
add_action('wp_print_scripts', 'post_expander_list_scripts');

Once again, this plugin is not entirely practical, but you’re welcome to download the full code.