Using AJAX with WordPress for conditional loading

AJAX has become a big part of responsive design for me. I use it to load secondary content into larger viewports to make it easier to find/view than if it is behind a small link in the footer or somewhere like that.

In WordPress it’s really easy to do, but this is one of those situations where I couldn’t find a definitive guide to how it’s done, so I’ve written this that will hopefully fix that. Two steps:

function get_latest() {
	$args = array(
		'posts_per_page'  => 5,
		'category'        => 1,
	);

	$posts_array = get_posts($args);

	echo '<nav role="navigation">';

		echo '<h2>Latest News</h2>';

		echo '<ul>';

	foreach ($posts_array as $post):
		setup_postdata($post);
		echo '<li><a class="' . esc_attr("side-section__link") . '" href="' . esc_attr(get_page_link($post->ID)) . '">' . $post->post_title . '</a>';
	endforeach;

	echo '</ul>';

echo '</nav>';

	die();
}
// creating Ajax call for WordPress
add_action( 'wp_ajax_nopriv_get_latest', 'get_latest' );
add_action( 'wp_ajax_get_latest', 'get_latest' );

It’s a straightforward WordPress function — it could be anything at all, even something as simple as echo ‘<a href=“https://twitter.com/intent/user?user_id=123456789"&gt;follow me on twitter</a>. There are two things worth noting however. The die() is necessary at the end to stop any further PHP processing in /wp-admin/admin-ajax.php which outputs 0. If we don’t use die() at the end of our function a 0 will appear after our list. The other thing to note is the block of two add_action() functions. This will not work without them. Now to the front end. We need to create a JavaScript function that calls /wp-admin/admin-ajax.php and tells it which PHP function to run.

jQuery.ajax({
	type: 'POST',
	url: '/wp-admin/admin-ajax.php',
	data: {
		action: 'get_latest', // the PHP function to run
	},
	success: function(data, textStatus, XMLHttpRequest) {
		jQuery('#latest-news').html(''); // empty an element
		jQuery('#latest-news').append(data); // put our list of links into it
	},
	error: function(XMLHttpRequest, textStatus, errorThrown) {
		if(typeof console === "undefined") {
			console = {
				log: function() { },
				debug: function() { },
			};
		}
		if (XMLHttpRequest.status == 404) {
			console.log('Element not found.');
		} else {
			console.log('Error: ' + errorThrown);
		}
	}
});

All we need to do in here is tell the function which PHP function to run and where to put the output, in this case in a container element with id latest-news. You can wrap the jQuery function in a matchMedia test or use a technique that uses JavaScript to test a CSS property value that only applies to larger viewports. That’s all there is to it. It’s quick and easy but a reliance on jQuery might not be your bag. However AJAX is one thing jQuery is very good at getting working cross browser painlessly.