Frontend Ajax with WordPress

Most likely if you are a theme or plugin developer you will need a way to send AJAX calls to fetch new updates or to create new database records or anything else that may require a hidden backend http call.

This post will show you how that is done.

Unlike the admin area, frontend ajax in WordPress is on a tricky side.

We will design a really basic plugin to learn how this stuff actually works. I am using WordPress 3.6 beta.

First Step

We will call our plugin “Test Plugin”, so lets declare plugin meta comment

/wp-content/plugins/test-plugin/test-plugin.php

 

Second Step

Enqueue our JavaScript File ajax.js. Please note that we will be creating this file in a second.

/wp-content/plugins/test-plugin/test-plugin.php (append)

 

Couple of points to note above are that, First we are loading our scripts for frontend only thus we are check  if the Dashboard or the administration panel is attempting to be displayed with is_admin() function and Second we are localizing a variable called ajaxurl that we can access globally as text_plugin.ajaxurl

To read more on localizing some data please read this

Third Step

Lets create our ajax.js file, please note that I am creating

/wp-content/plugins/test-plugin/ajax.js

 

As you can see that this is a really simple jQuery Ajax call. If you want to learn more on jQuery Ajax please read thisThe ajaxurl javascript global does not get automatically defined for you on frontend that is why we localized this property to be available to our function in previous step.

Fourth Step

Ok Don’t be judgemental about this one and me being lazy, but to code below should be appended to our test-plugin.php file.

/wp-content/plugins/test-plugin/test-plugin.php (append)

 

Few things you should know

  1. When adding actions such as wp_ajax or wp_ajax_nopriv you should always append the action you state in your Ajax handler. In our case it is test_plugin that is why you see wp_ajax_test_plugin and wp_ajax_no_priv_test_plugin  actions added to our plugin. Thus basic format of these functions is wp_ajax_nopriv_(action) and wp_ajax_(action)
  2. We are appending an anchor to post content just to demo if our ajax call is successful. You can do shortcodes, forms, etc etc to test this stuff out.
  3. Both front-end and back-end Ajax requests use admin-ajax.php

The result

You should see a link at the end of each post/page of your blog. Not Ideal but that is for demo purposes 🙂

When you click on that link you shall see this

Result

 

I hope that this post will help you some how. There are some points to remembers that you can build your own Ajax handler PHP files too, so this is not the only option but this option reflects the WordPress way. Advantage of this is that you will have access to important initializations such as $wpdb etc

If I am missing a point or two please feel free to add your insights via comments

Cheers

 

 

Comments

  1. I tried to activate the above plugin.

    But I get the following erroron the plugin activation page:

    Parse error: syntax error, unexpected ‘someUniqueFnName’ (T_STRING) in /home/greentes/public_html/wp-content/plugins/test-plugin/test-plugin.php on line 38

    Have you got any ideas please?

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.