This website is an example of a WordPress site which has a fully ajax-based theme. The main advantage for visitors is that the transition to a new page is animated, and that makes the user experience more slick. And because not many pages have this effect, it makes the website more unique.
There is actually a plugin for WordPress which makes your site fully ajax-based. However, the last update is from 2009. I don’t want an unsupported plugin to be involved in such a fundamental part of my website. (I actually don’t know if it works with the newest version of WordPress, but I wouldn’t be surprised if it doesn’t.) Too bad! A plugin would be the easiest solution to ajaxify your blog.
Overview
When adjusting the theme yourself, there are two main things that need to be done:
- The website needs javascript which does some browser functionality. It has to fetch the page and put it in the correct div. It also has to update the hash-tag in the url-bar. The hash-tag has to be checked regularly for changes to detect and capture a press on the back/forward-button.
- The website needs a theme which accomodates for the ajax-calls. When responding to an ajax call, the website should not include the header or footer. And there are some small changes required to make the browsing more smooth (for example with submitting comments).
There is a lot of information on the internet about part 1, so I won’t go into details there. A decent explanation can be found here (when using that example with wordpress, you shouldn’t modify the url in loadpage function.)
Making WordPress ajax-ready
For this explanation, I will assume that you will be adapting the default twentyten-theme. But it is possible in any theme.
Make sure that the javascript appends a specific GET parameter to the url on the ajax request. When the normal request in the browser would be www.example.com/test/, the ajax request would be www.example.com/test/?type=ajax. This parameter will enable us to distinguish a normal request (which should result in a normal page) and an ajax request (which should contain the content without the header or footer).
To fetch this parameter wordpress-style, we need to add the expected parameter-name to the query_vars. To do so, we need to add some code in the functions.php script in the theme’s folder. For twentyten, it can be found here: wp-content/themes/twentyten/functions.php. We’ll simply add the parameter-name to the query_vars.
1
2
3
4
5
6
| add_filter('query_vars', 'add_type_parameter' );
function add_type_parameter( $queryvars )
{
$queryvars[] = 'type';
return $queryvars;
} |
This enables us to check anywhere if we’re dealing with an ajax request or not. We want to do this on every place the header is included. For the main page, this is in index.php (in the twentyten folder). You’ll see something like this:
1
2
3
4
5
6
7
8
| <?php get_header(); ?>
<div id="container">
<div id="content" role="main">
<?php get_template_part( 'loop', 'index' ); ?>
</div><!-- #content -->
</div><!-- #container -->
<?php get_sidebar(); ?>
<?php get_footer(); ?> |
We want the header, sidebar, footer (and container-div) to be excluded on an ajax-request. In line 3, we check if it is an ajax-request. In line 5 and 15 the header, footer, sidebar (and container div) are only inserted if it is not an ajax request:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <?php
global $wp_query;
$ajax = isset($wp_query->query_vars['type']) && $wp_query->query_vars['type']=='ajax';
if(!$ajax)
{
get_header();
echo '<div id="container">';
}
?>
<div id="content" role="main">
<?php get_template_part( 'loop', 'index' ); ?>
</div><!-- #content -->
<?php
if(!$ajax)
{
echo '</div><!-- #container -->';
get_sidebar();
get_footer();
}
?> |
And that’s the basics! You can check if it works by going to the homepage of your site, and append ?type=ajax to the url. For example: www.example.com/?type=ajax.
Now it only works on your front-page. To make it work everywhere, we’ll have to repeat this for every occasion the header, sidebar or footer gets included. In twentyten this is in the files: 404.php, archive.php, attachment.php, author.php, category.php, index.php, onecolumn-page.php, page.php, search.php, single.php, tag.php. Alternatively, you can just change the header, sidebar and footer functions to output nothing on an ajax request. But this does not allow you to exclude a div (such as the container-div above).
Comments
The major remaining problem is the comments-posting. When posting a comment, WordPress redirects you. This cannot be caught in your javascript code (which is a shame!). So we need a way around it. You can just download a plugin which ajaxifies comment posting, and effectively does the workaround for you. Alternatively, you could apply a quick hack in wp-comments-post.php. At the end of that file it redirects the user, so when it is an ajax request, you could just return the redirect-url and let your javascript take care of the redirect. Keep in mind that such a hack is not a good solution, mainly because your have to re-apply it every time you update WordPress.
Have fun ajaxifying your theme!
I like this post| 3 people like this post.
