Emanuele Feronato

Talking about Ajax, Javascript, Php and WordPress.

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

Here they are:

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

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

 like other  ones

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).