Ajax WordPress post popup with SimpleModal and jQuery ...

Today we are going to look at getting the content of a post using ajax and then display it in a popup box. The popup part is actually the easiest part, thanks to the fantastic Simple Modal plugin for jQuery written by Eric Martin.

So the basics here are:

    * we call a page using ajax, passing the id of the post
    * The page grabs the content of the post we requested and returns it to the script
    * We then output the content in a div and “simplemodal” it

And for the result, click on this link.

The major problem when it comes to ajax and WordPress is that you need to call a php script that will have access to all the WordPress built in functions. The solution came from this post from John Faulds.

Basically you create a page template that will be in charge of grabbing the post from the id we pass and returning the content to the script.

This is going to be a simple loop like this:

<?php
/*
Template Name: Ajax Handler
*/
?>
<?php
 $post = get_post($_GET[id]);
?>
<?php if ($post) : ?>
 <?php setup_postdata($post); ?>
 <div class="whatever">
  <h2 class="entry-title"><?php the_title() ?></h2>
  <div class="entry-content">
   <?php the_content(); ?>
  </div>
 </div>
<?php endif; ?>

Save this code in a file called ajax-handler.php in you theme folder. Now if you go in your admin panel and create a new page, you should be able to select this template as the page template. So I have created a page in WordPress called Ajax Handler with the template “Ajax Handler” assigned to it. The special function we use here, get_post(), will grab the content of a post with the Id we’ve passed with ajax as a GET variable.

Talking about ajax, lets have a look at the function to do the stuff:

jQuery(a.postpopup).click(function(){
  id = jQuery(this).attr( arel);
  jQuery(<div id="ajax-popup"></div>).hide().appendTo(ody).load(http://urlofyoursite.com/ajax-handler/?id=+id).modal();
  return false;
 });

note: I am using ‘jQuery’ instead of $ because I use the jQuery included in WordPress which is in no conflict mode. If you use normal jQuery then replace all occurrences of ‘jQuery’ by $ in my javascript snippet.

This a very simple way to do it, thanks to jQuery. This means: when a click on a link with a class postpopup, get the id from its rel attribute, create a empty div, load the page ‘ajax-handler’ and add the content of the data returned to the div. Then SimpleModal it.

The html for the link should look like this:

<a href="javascript:;" rel="postid" class="postpopup">this link</a>

note: in this html it would be better to replace the href by the actual url of the post, so if someone hasn’t got javascript enable they can still view the content.

And that’s it, all done. To get everything to work you will of course need to include jQuery and SimpleModal on your page. Don’t forget to hide your ajax handler page from your blig navigation. If your theme is using the wp_list_pages function you can pass a parameter ‘exclude=id_of_the_page’ to exclude it from the list.

 Original Source:
http://wordpressthemescollection.com/ajax-wordpress-post-popup-with-simplemodal-and-jquery-488.html