Including jQuery Ajax calls in your WordPress blog

March 30, 2010 • Ajax, Javascript, Php, WordPress by Emanuele Feronato • 6 Comments

I want to show you how to include jQuery ajax calls in your WordPress blog.

The reason is simple: sometimes you may need to update the content of a WP page without reloading the entire page.

This is useful when you want the user to interact with your blog without forcing him to reload the page. Or when you want some events to happen “automatically” without user interaction.

In this video I am changing the header at every second without reloading the page.

Also notice I am doing it from the default Kubrick theme with a fresh installation… I am not using any jQuery powered theme or plugin. Let’s see how can you make it.

In this case all changes have been made in header.php file, adding nine lines after

<?php wp_head(); ?>

Here they are:

<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});
	var refresh = setInterval(function(){   	
		$("#description_span").load("<?php bloginfo('template_url'); ?>/example.php");
	},1000);
});
</script>

First, I am loading jQuery using Google as content delivery network.

Then, when the document is ready, I disable the cache to stop jQuery .load response from being cached.

Now I just execute an ajax call to example.php file at every second and print the result in the element with description_span id

This is example.php content

<?php
 
echo rand(1,10000);
 
?>

Now it’s time to locate description_span element… it’s in the header, next to the description of the blog.

<div class="description"><?php bloginfo('description'); ?> like other <span id = "description_span"></span> ones</div>

And that’s it. This time I changed the header without touching the content, next time (the aim of my experiment) I’ll change the content without touching the header, maybe because the header contains a Flash game called LineBall… (yes, I am designing a WP theme for a game official site).

Rate this post: 1 Star2 Stars3 Stars4 Stars5 Stars (9 votes, average: 4.33 out of 5)
Loading ... Loading ...
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.
Be my fan on Facebook and follow me on Twitter! Exclusive content for my Facebook fans and Twitter followers

This post has 6 comments

  1. dario111cro

    on March 30, 2010 at 6:59 pm

    Very useful. Thanks. But… example is not good because you can do same thing with just JS.

  2. Yarden Refaeli

    on March 30, 2010 at 10:53 pm

    @dario – this is just proof of concept, you may use it to load data from MySQL database for example using PHP script…

    Note: repeating ajax calls (as well as regular HTTP requests) over and over may harm your servers, so use it with care.

  3. Porter

    on March 31, 2010 at 7:58 am

    Neat stuff, I’ve known about the power ajax, but never actually used it. I like that you would be able to load data without refreshing the page, that’s extremely useful in specific situations. Thanks for sharing.

  4. Loading WordPress posts with Ajax and jQuery : Emanuele Feronato - italian geek and PROgrammer

    on April 1, 2010 at 11:52 pm

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

  5. Marc

    on July 20, 2010 at 5:28 pm

    Hi everyone,
    Why can’t you do it this way:
    $(document).ready(function(){
    $.ajaxSetup({cache:false});
    $(“h2 a”).click(function(){
    var post_id = $(this).attr(“href”)
    $(“#your_post_here”).html(“loading…”);
    $(“#your_post_here”).load(post_id);
    return false;
    });
    });

    That way i don’t need to resort to changing permalinks and it’s a step less?
    Thanks so much for the tutorial!

    They are so scarce, can’t find them anywhere.

  6. wordpress elite

    on November 28, 2010 at 1:30 am

    I like it. Very userful. You can also check this post on using wordpress jquery ajax.

< >