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(document).ready(function() {
	jQuery('a.postpopup').click(function(){
		id = jQuery(this).attr('rel');
		jQuery('<div id="ajax-popup"></div>').hide().appendTo('body').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 code would go in an external javascript file you would include on your page or in the header. But the first option is recommended.

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.

And for the result, click on this link.

Bookmark This () Tweet This Bookmark This (http://wordpressthemescollection.com/ajax-wordpress-post-popup-with-simplemodal-and-jquery-488.html) Bookmark This (http://wordpressthemescollection.com/ajax-wordpress-post-popup-with-simplemodal-and-jquery-488.html)

Blog

The little details: playing with date display

The little details is a new category about what tiny details can make a good or just average design. Details give depth to a website in ways that the user does not always see but feel nonetheless. Today's "little details" will focus on the date display. Particularly present on blog, the date is... read more

WooThemes Playground

WooThemes, the fantastic premium WordPress theme club has just released something they call "The Playground". It basically allows you to try any of their themes, front end AND back end. This is a very good move from their part we think has new potential buyer will be able to try out the theme inside... read more