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!
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
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
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.
/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.