Display a Random Post (with AJAX Refresh)

The Easy Way To Make WordPress Ajax Pagination Using jQuery

5 tips for using AJAX in WordPress

Make an Infinite More-Posts Section

WordPress and jQuery: Troubleshooting, Implementing Sidebar Tabs and More

AJAXing a WordPress Theme (screencast)

5 Tips For Using jQuery With WordPress

Create a jQuery Carousel with WordPress Posts

Integrating Fading Button Navigation

Place the code bellow inside your theme’s function.php file. Don’t forget to change the “TwitterProfileName” with your twitter profile name.

function parse_feed($feed) {
    $stepOne = explode("<content type=\"html\">", $feed);
    $stepTwo = explode("</content>", $stepOne[1]);
    $tweet = $stepTwo[0];
    $tweet = str_replace("&lt;", "<", $tweet);
    $tweet = str_replace("&gt;", ">", $tweet);
    return $tweet;
}

function getTweet(){
$feed = "http://search.twitter.com/search.atom?q=from:TwitterProfileName&rpp=1";
$twitterFeed = file_get_contents($feed);
echo parse_feed($twitterFeed);
}

Now wherever you like to show the twitter status just call the getTweet() function.

jQuery

$.getJSON("http://twitter.com/statuses/user_timeline/username.json?callback=?", function(data) {
     $("#theIdOfTheElement").html(data[0].text);
});

Change “#theIdOfTheElement” with the ID of the element you want to show the twitter status in.

Solution

<ul>
	<li><?php next_posts_link('&laquo; Older Entries') ?></li>
	<li><?php previous_posts_link('Newer Entries &raquo;') ?></li>
</ul>

The code above is used to make the previous and next page for the posts. First we need to add an ID for the unordered list so we can add select it using jQuery later. Let’s give it ID ‘postPagination’.

<ul id='postPagination'>
	<li><?php next_posts_link('&laquo; Older Entries') ?></li>
	<li><?php previous_posts_link('Newer Entries &raquo;') ?></li>
</ul>

Now let’s make it work with ajax. Insert the code bellow in header.php file of your theme.

<script type="text/javascript" charset="utf-8">
jQuery(document).ready(function(){

	jQuery('#postPagination a').live('click', function(e){
		e.preventDefault();
		var link = jQuery(this).attr('href');
		jQuery('#content').html('Loading...');
		jQuery('#content').load(link+' #contentInner');

	});

});
</script>

Change the #content with ID of the div that wraps the #contentInner div of your page.

Here is how the layout looks.

<div id='content'>
    <div id='contentInner'>
        The Posts and the navigation are here
    </div>
</div>

That’s it. Now when a link for previous or next post pages is clicked the new content will be loaded using ajax. If you are having troubles with these just say what’s your problem in the comments and i’ll do my best to help you.

Notice: Don’t forget to include the jQuery library inside the theme if it’s not already included.

Bonus example: Fading animation

Just change the javascript part to be like the snippet bellow.

jQuery(document).ready(function(){

	jQuery('#postPagination a').live('click', function(e){
		e.preventDefault();
		var link = jQuery(this).attr('href');
		jQuery('#content').fadeOut(500).load(link + ' #contentInner', function(){ jQuery('#content').fadeIn(500); });

	});

});

That’s all. You can also download the files which include the fading animation.

Update:
You can now download the modified files. The files are from the “Classic” wordpress theme that comes with the wordpress download.

Update:
Improved code and added a “loading” message. (the download files are also updated).

Update:
Bonus example added with fadeIn and fadeOut. You can download the files from the example.