We make extensive use of WordPress here at Rocket Pop, but we do have a few other tricks up our sleeves. We recently inherited a project built on CakePHP and have been working with Dedicate My Run, to add new features and get their site ready for launch. One of the new features we’ve been working on is integrating WordPress for the business’s communications needs.

Once we completed the WordPress development, we wanted to have the most recent blog post appear on the front page of the overall site. That is, outside of WordPress. My first thought was a basic WP_Query page without making use of my theme: <?php define('WP_USE_THEMES', false);?>.

The page loads fine in your browser and the JSON data appears properly. However, as soon as you request this URL via AJAX, you’ll notice a nice 404 error in your debug console of choice (Firebug, Chrome Inspector). If you log your errors (specifically the XMLHttpRequest) and pay close enough attention, you’ll really start to pull your hair out. Why? Because you’ll notice that included in the jqXHR['responseText'] object is the JSON/HTML data you want!

What?!?!?!?

Quite simply, WordPress is inserting a 404 header into your request when it recognizes an AJAX request. Now that we know WordPress is throwing a wrench into our plans, how do we get the content we want? The way to get data from WordPress via AJAX is to pass ALL AJAX requests through /wp-admin/admin-ajax.php (don’t let the ‘admin’ fool you, it’s for ALL AJAX requests, front and back) and create a callback handler in your theme’s functions.php or your plugin file. Here’s what mine looks like in our functions.php file:

If you’ve worked with WP_Query before, the only thing that should look new to you is the first line add_action(wp_ajax_runners_rant, runners_rant_callback). “This hook allows you to create custom handlers for … AJAX requests.”1 The most important part to remember is the suffix after wp_ajax_: that’s the “action” we’ll pass in our AJAX call in Javascript. The second half of the action is the name of the function that WordPress will execute in response to the request. Another important note: at the end of the response, make sure you end with die() or you’ll notice a random ‘0’ thrown into your response. This happens because WordPress will call die(0) if you have not already killed the process.

Now, let’s look at the AJAX call.

There are two keys in our javascript to make it work well with WordPress. First, on line 2 is the url. We’re calling /wp-admin/admin-ajax.php as discussed above.

The second section to pay attention to is the data section on line 6. Within the data is the variable action and it’s set as runners_rant. This must be identical to the suffix we mentioned above, wp_ajax_runners_rant, in order for WordPress to know what function to execute. As we’re passing content, there is no processing or crunching of data client-side, we simply append the return to the waiting container and our most recent blog post appears in our CakePHP application.


1. WordPress Codex.