Loading WordPress posts with Ajax and jQuery

April 1, 2010 by Emanuele Feronato
Filed under Ajax, Javascript, Php, WordPress | 11 Comments

After seeing how to include jQuery Ajax calls in your WordPress blog, it’s time to load posts on the fly, without reloading the page.

As for the previous example I am using the standard Kubrick theme… without any plugin installed.

Look how I load the posts under the header by clicking on their titles… even the ones with “more” tag appear complete without reloading the page:

Let’s start with header.php modifications

This is the script I added under

<?php wp_head(); ?>

That is the JQuery part

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
	$.ajaxSetup({cache:false});
	$("h2 a").click(function(){
		var post_id = $(this).attr("rel")
		$("#your_post_here").html("loading...");
		$("#your_post_here").load("http://<?php echo $_SERVER[HTTP_HOST]; ?>/triqui-ajax/",{id:post_id});
		return false;
	});
});
</script>

I already explained the first 4 lines in the previous tutorial.

Line 5: Waiting for the user to click on an hypertext over an h2 heading. I am doing it because in Kubrick post titles are rendered this way:

<h2><a href="<?php the_permalink() ?>"....

This should change from theme to theme, but this works on Kubrick

Line 6: Retrieving the rel attribute of the link and saving it in a variable called post_id. You’ll see later in this tutorial how this attribute will contain the unique ID of the post we want to show.

Line 7: In an element with your_post_here id I am writing “loading…” because I’m starting to load the post. You’ll see later in this tutorial where to place the element

Line 8: Now thw ajax magic… in the your_post_here element this time I load the output of a page of the blog called triqui-ajax. You’ll se later in this tutorial how to create it. This will work if the permalinks of your blog aren’t the default ones. Go to Settings -> Permalinks and select Day and name

I am also passing in POST a variable called id with the content of post_id variable (the post unique id)

Line 9: I added this line to prevent the browser to jump to the link… remember? I want to load the post in the same page.

Now it’s time to make some changes to index.php

This is how I modified it:

<?php
/**
 * @package WordPress
 * @subpackage Default_Theme
 */
 
get_header(); ?>
 
	<div id="content" class="narrowcolumn" role="main">
	<div id = "your_post_here"></div>
	<?php if (have_posts()) : ?>
 
		<?php while (have_posts()) : the_post(); ?>
 
			<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
				<h2><a href="<?php the_permalink() ?>" rel="<?php the_ID(); ?>" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
				<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>
 
				<div class="entry"> 
					<?php the_content('Read the rest of this entry &raquo;'); ?>
				</div>
 
				<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>
			</div>
 
		<?php endwhile; ?>
 
		<div class="navigation">
			<div class="alignleft"><?php next_posts_link('&laquo; Older Entries') ?></div>
			<div class="alignright"><?php previous_posts_link('Newer Entries &raquo;') ?></div>
		</div>
 
	<?php else : ?>
 
		<h2 class="center">Not Found</h2>
		<p class="center">Sorry, but you are looking for something that isn't here.</p>
		<?php get_search_form(); ?>
 
	<?php endif; ?>
 
	</div>
 
<?php get_sidebar(); ?>
 
<?php get_footer(); ?>

To tell the truth, I only added a line and changed a bit another one:

Line 10: This is the div that will contain the post, the one I change with jQuery (remember? lines 7 and 8 in the jQuery script)

Line 16: Here I changed the rel attribute to store the unique id of the post I want to load. I used it at line 6 in the jQuery script

And the template files do not need any other change.

Now it’s time to create a new page template with some code that will load the selected post.

In your template directory create a new php file, no matter its name… you can call it example.php and write this:

<?php
/*
Template Name: Triqui Ajax Post
*/
?>
<?php
	$post = get_post($_POST['id']);
?>
<?php if ($post) : ?>
	<?php setup_postdata($post); ?>
	<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
		<h2><?php the_title(); ?></h2>
		<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>
 
		<div class="entry"> 
			<?php the_content('Read the rest of this entry &raquo;'); ?>
		</div>
 
		<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>
	</div>
<?php endif; ?>

As you can see it’s almost the same code you can find in index.php at lines 15-24… because I just want to load a post in the same way the index file does. I just removed the anchor tag in the title, because I don’t want it to be clickable. And obviously I read the id value passed by the jQuery script at line 8

The only interesting lines are lines 2-4… yes, the comment… because this way I am giving the template page the name Triqui Ajax Post.

Now in your admin area create a new page, call it Triqui Ajax (do you remember the permalink url at line 8 in the jQuery script…) and select Triqui Ajax Post as template

And that’s it… you don’t need anything else, and the blog will work as in the video.

Enjoy

Rate this post: 1 Star

(6 votes, average: 5.00 out of 5)

Loading ...

Share on Facebook
Be my fan on Facebook - exclusive content

» WordPress themes are designs for WordPress - one of the most popular blogging software nowadays.
You will be pleasantly surprised by WordPress Themes provided by Template Monster. All of them are of professional design and high quality.

11 Responses

Loading WordPress Post with AJAX and JQuery | WPLover says:

April 2, 2010 at 2:24 pm

[...] Loading WordPress Post with AJAX and JQuery [...]

Reply
Ezequiel M. says:

April 3, 2010 at 12:37 am

Nice, Thanks for share!

Reply
Devon says:

April 3, 2010 at 10:09 pm

Very cool article, thanks Emanuele!

Reply
Loading WordPress posts with Ajax and jQuery – a real world example : Emanuele Feronato - italian geek and PROgrammer says:

April 6, 2010 at 11:28 pm

[...] you are looking for a real world example made with Loading WordPress posts with Ajax and jQuery or you haven’t played LineBall yet, or you played it, you loved it and you want to know who [...]

Reply
samuel jesse says:

July 4, 2010 at 7:42 am

I couldn’t get this to work.

On line 8 of the header code I had to replace:

http://

with:

and it worked fine.

Thanks for the post! Very helpful.

Reply
- Marc says:
  
  July 20, 2010 at 5:04 pm
  
  Damnit, What was it that you replaced it with @samuel?
  
  I have tried everything with this. It just doesn’t work.
  
  I AM using 3.0
  
  Please let readers know if this works on 3.0!
  
  Thanks so much for your help,
  Marc
  
  Reply
samuel jesse says:

July 4, 2010 at 8:46 am

That didn’t let me paste code sorry…

Reply
Ben says:

July 6, 2010 at 8:42 pm

Hi,

This is a great tutorial. However I need to achieve something different. I have a list of categories that show initially in a certain page. When I click one category, the posts under that category should show via ajax in the same page. I already made this part working. So now that the posts under the category I selected are displayed, what I want to do is, when I click a post, the content of that post should also be loaded in the same page via ajax. So this should all happen without leaving the page that I was on from the start.

Please help. Im really stucked.

Thanks!

Reply
- Ben says:
  
  July 7, 2010 at 3:27 pm
  
  I get it now. I was sure that loaded links arent working using the “.click”. I found out about the “.live” and its working now. So I used the original code you provided for the initial links that I have – which are the categories, then I added another function for the links that are freshly loaded – the posts under the selected category:
  
  $(“a.loaded-link”).live(‘click’, function(){
  var post_id = $(this).attr(“rel”)
  $(“#your_post_here”).html(“loading…”);
  $(“#your_post_here”).load(“http:///my-other-php-file/”,{id:post_id});
  return false;
  });
  
  Im now calling a different file that generates a different output.
  
  Reply
Steven says:

July 28, 2010 at 3:44 pm

Nice technique! But the downside is that the url doesn’t change so you can’t use the back and forward buttons of your browser. I want to use jQuery Address together with you code. How do I begin?

Reply
Maor says:

August 6, 2010 at 2:32 am

Thank you very much for the post!

Working great on WP3.0.1 as well.

Reply