Your AJAX Starter Kit, WordPress edition (Part 1/2)

AJAX, or if you want to be unnecessarily verbose, Asynchronous JavaScript And XHTML, is simple enough to implement on its own. In the past, I've performed a few basic demos on how to implement AJAX, and even done a jQuery version. Today's post is analogous to the other two; except that there's a little complication.

Because we'll be doing it in WordPress.

For those of you who are blissfully unaware of what WordPress is, it's an open-source Content Management System used to develop websites and applications. However, the applications part would be pretty hard if a developer had no idea how to wrangle some AJAX out of WordPress. Having gone through the process myself, it's my opinion that this is not at all straightforward for the uninitiated. And what I would like to do today, is take you through the process of creating a plugin in WordPress which we can then use to implement AJAX.

This is going to have a few moving parts.

To begin, I will create a plugin in WordPress. This is really nothing more than creating a folder in the plugins folder of the wp-content directory, then creating a PHP file. I'm not going to elaborate on this; because this isn't a web tutorial and even if it were, that's not what it's about.

plugins/tt_ajax_test/tt_ajax.php

<?php
/**
 * Plugin Name: AJAX Test
 * Plugin URI: http://www.teochewthunder.com
 * Description: This plugin implements and tests AJAX functionality
 * Version: 1.0.0
 * Author: TeochewThunder
 * Author URI: http://www.teochewthunder.com
 * License: GPL2
 */

JavaScript

Now, before you can have AJAX, you first need to be able to run JavaScript. We will be creating a JavaScript file in the folder we just created. I'd prefer, as a matter of good practice, to put that file in a sub-folder, perhaps named js. Call it anything you like. We'll use jQuery for this. Use a ready() method to run our test command, which will simply pop up an alert message.

plugins/tt_ajax_test/js/ajax_listener.js

jQuery(document).ready(function(){
    alert('test js');
});

Then in the PHP file, we use add_action() to add this newly-created function tt_ajax_listener().
plugins/tt_ajax_test/tt_ajax.php

<?php
/**
 * Plugin Name: AJAX Test
 * Plugin URI: http://www.teochewthunder.com
 * Description: This plugin implements and tests AJAX functionality
 * Version: 1.0.0
 * Author: TeochewThunder
 * Author URI: http://www.teochewthunder.com
 * License: GPL2
 */

function tt_ajax_listener() {

}

add_action( 'wp_enqueue_scripts', 'tt_ajax_listener' );

This function basically calls wp_enqueue_script() to ensure that the JS file we just wrote, is included in the pages of the WordPress site. Before that, we also have to run wp_register_script() using the URL of the JavaScript file, and because we're going to use jQuery, we pass that in as an argument.

plugins/tt_ajax_test/tt_ajax.php

<?php
/**
 * Plugin Name: AJAX Test
 * Plugin URI: http://www.teochewthunder.com
 * Description: This plugin implements and tests AJAX functionality
 * Version: 1.0.0
 * Author: TeochewThunder
 * Author URI: http://www.teochewthunder.com
 * License: GPL2
 */

function tt_ajax_listener() {
    wp_register_script( 'ajax_listener', plugin_dir_url( __FILE__ ) . '/js/tt_ajax_listener.js', ['jquery'] );

    wp_enqueue_script( 'ajax_listener' );
}

add_action( 'wp_enqueue_scripts', 'tt_ajax_listener' );

Now when you refresh, this should come up. That's how you know it's working.

Of course, there's a possibility that we don't want this script to fire off just anywhere. So here's a really cheap way of making sure that it only fires off on specific pages. Basically, check for the URL and make sure it confirms to certain requirements. Now if you run the page again, you won't see anything.

Be warned that this is really not a great way to implement things, but this is just an example. A very clumsy example.

plugins/tt_ajax_test/js/ajax_listener.js

jQuery(document).ready(function(){
    if (window.location.href.indexOf("ajax-test") > -1) {    
        alert('test js');
    }
});

I'm creating a page here. This one is titled ajax-test, and in the screenshot, you can see the URL. And you can also see that the popup appears here because "ajax-test" is in the URL.

For this page, I added the following code via the built-in CMS.

<div>
    <div class="tt_placeholder">This is a placeholder</div>
    <input type="button" id="btnAjax" value="AJAX Call">
</div>

This ensures that now we have a button and a placeholder, with id and class attributes we can leverage on later.

All good? Moving on...

Now we have working JavaScript, and a test page from which to launch our AJAX call. All we're lacking now is more JavaScript to make that AJAX call, and back-end code to execute the command.

Next

Don't quit on me just yet! We will be implementing an AJAX call.