Ajax Driven WordPress Website (Server Side)

I recently built a website for a designer where he requested the entire thing be Ajax driven and WordPress managed. I have built websites like this in the past using both Drupal and WordPress. In the past however I feel I have made the process overly complicated on the client side, often requiring huge amounts of Javascript to display pages. Using different code for different layouts etc. In hindsight this was a bad idea for several reasons. Firstly search engines might not see the same layout as you are showing the user. Same goes for people with Javascript turned off. Large quantities of additional and unnecessary Javascript need to be written. Finally it is a much longer development process from the method I chose this time.

Though this method was more difficult from the client side of scripting, it was much simpler from the server side perspective. I would create a page in WordPress called Ajax. Then write a custom template that would take a $_GET parameter of ‘URL’, get the post ID from the URL, get the post by that ID and simply pass the post object back as a JSON object. This is very simple (1-2 lines of code), except when you come to laying out your pages and need to specify where each individual div should go. To call it was simple, http://yoursite.com/ajax?URL=/about. To maintain it was a nightmare!

What I wanted this time was the ability to create the entire website just as I would without AJAX in mind. Style all the pages and create whatever templates I need using CSS and HTML. This saves a great deal of time when just doing little things. Believe me a refresh without AJAX is always much quicker than with, and if you think how many times you refresh when developing it makes a massive difference. Then I would in a similar way to my original method create a WordPress page called Ajax which I’d pass a $_GET parameter of URL to. However instead of grabbing the post as an object I would have the template grab the entire page content as a browser would receive it. This means any styles, template structure and custom fields will already have been applied and formatted. I’d simply need to fish out the divs I want and pass them back as a JSON object. Then simply replace the existing ones on the page. For me this meant just taking out the #main div and replacing the existing one. You also need to extract some other elements for styling reasons. I for example needed the classes listed in the body tag too.

You will require a really great PHP script to retrieve and extract the DOM elements in your AJAX called Simple HTML Dom. Below is my AJAX template class. There is almost zero error checking.

<?php
/*
Template Name: Ajax Post
*/

include("wp-content/themes/6cm/scripts/simple_html_dom.php");

// URL
if(isset($_GET['url'])) {
	$url = $_GET['url'];
	if($url != "") {
		// Get post
		$post = get_post(url_to_postid($url));
		// Add paragraphs
		$post->post_content = wpautop(do_shortcode($post->post_content));

		// Get entire page
		$html = file_get_html(get_bloginfo('url') . $url);
		// Extract just <div id="main">...</div>
		$ret = $html->find('div[id=main]', 0);
		// Extract <body> classes
		$body = $html->find('body', 0);
		$body_class = $body->class;
		// Get page scripts
		// $script = $html->find('head script', 1);

		// Create JSON Array
		$json_return = array();
		$json_return['html'] = $ret->innertext;
		$json_return['post_object'] = $post;
		$json_return['body_class'] = $body_class;
		// $json_return['script'] = $script;

		// Print JSON
		print json_encode($json_return);
	}
}
else {
	print 0;
}
?>

Next step is to implement a Javascript/jQuery deep linking script like Asual to write deep links. This allows users to easily make their way to specific pages and not experience the one page woes of Flash websites. You’ll also need to implement jQuery AJAX functions to call and replace content when links are change.

I’ll return shortly to write about my Client side scripting for this project. Hope this can be helpful for someone.


Posted

in

,

by

Tags: