WordPress AJAX: Frontend & Backend Implementation

I was recently working on a WP site that required AJAX functionality on the frontend. Having implemented WordPress AJAX for my Book It! Transportation plugin on the backend, I figured it would be a cinch. Come to find out, it required a little more work to accomplish.

I was recently working on a WP site that required AJAX functionality on the frontend. Having implemented WordPress AJAX for my Book It! Transportation plugin on the backend, I figured it would be a cinch. Come to find out, it required a little more work to accomplish.

After digging around multiple blogs and the WordPress Codex, I found it a little difficult to find full working examples. Get ahead of the learning curve by learning how to implement WordPress AJAX for both the frontend and backend below.


WordPress AJAX for the Backend

This is a cinch to do. Currently, the core of WordPress uses AJAX only in the administration screens. For instance, AJAX is used for instant updates when you are doing comment moderation, and when you are adding and deleting items from lists such as categories, blogroll, and posts; AJAX is also the technology behind the auto-save functionality on post and page editing screens. Several themes and plugins also use AJAX; for instance, some post rating plugins use AJAX to store the visitor’s rating in the database and then display an updated average rating.

Since AJAX is already built into the core WordPress administration screens, adding more administration-side AJAX functionality to your plugin or theme is fairly straightforward, check out the example below.

This should be fairly straight forwared. It uses WP’s admin_footer action (see add_action) to include some JS in the footer that makes the AJAX magic happen. Take a look at $.post if you’re not familiar with it.

With the code above, you’re defining your action, a WordPress nonce for security, and any other data you want to send. You’ll use the action you define as part of the WP function you’ll create that handles the AJAX request. See below:

We’re using WP’s wp_ajax_(action) hook to handle the AJAX request. This hook allows you to create custom handlers for your own custom AJAX requests. The wp_ajax_ hook follows the format “wp_ajax_$youraction”, where $youraction is your AJAX request’s ‘action’ property you sent in the JS above.

Also, be sure to include the check_ajax_referer to verify that the request came from the right place.

That’s it! You will need to add a few details, such as error checking, but hopefully the example above will be enough to get you started on your own administration-side AJAX plugin.

WordPress AJAX Backend Example

Here’s a full working example of WordPress AJAX in the backend. This will produce a JS alert box with the text 1044 when a page has been loaded in the administration panel. In the functions.php file:

WordPress AJAX for the Frontend

This takes a little extra work to accomplish. Since WordPress 2.8, there is a hook similar to wp_ajax_(action):

You’ll need to use this hook if you’re planning on implementing WordPress AJAX on the frontend. If you want to fire your AJAX function both both logged-in and logged-out users, you’d do this:

Something else to keep in mind when implementing WordPres AJAX on the frontend is, unlike on the admin side, the ajaxurl javascript global does not get automatically defined for you, unless you have BuddyPress or another Ajax-reliant plugin installed. So instead of relying on a global javascript variable, you’ll need to declare a javascript namespace object with its own property, ajaxurl. Use wp_localize_script() to make the URL available to your script, and generate it using this expression: admin_url( 'admin-ajax.php' ). See below:

Another thing to keep in mind is, both front-end and back-end AJAX requests use admin-ajax.php so is_admin() will always return true in your action handling code. When selectively loading your AJAX script handlers for the frontend and backend, and using the is_admin() function, your wp_ajax_(action) and wp_ajax_nopriv_(action) hooks MUST be inside the is_admin() === true part.

AJAX requests bound to either wp_ajax_ or wp_ajax_nopriv_ actions are executed in the WP Admin context. Carefully review the actions you are performing in your code since unprivileged users or visitors will be able to trigger requests with elevated permissions that they may not be authorized for. See below:

Here the AJAX action my_frontend_action will trigger the PHP function my_frontend_action_callback() for all users. The AJAX action my_backend_action will trigger the PHP function my_backend_action_callback() for logged-in users only.

WordPress AJAX Frontend Example

Here’s a full working example of WordPress AJAX in the frontend. This will produce a JS alert box with the text 1044 when a page has been loaded in the administration panel. In the functions.php file:

In the example.js file:


Learn more about WordPress AJAX

MailChimp PHP API Class: Simple Library for MailChimp API V2

The past couple of months I’ve been working to move a little over 260,000 subscribers from Eloqua to MailChimp. The company that owns the site does heavy email marketing that differs from the typical MailChimp user. This requires some advanced functionality that MailChimp’s interface does not provide. The solution, MailChimp API which allows us to build out our own custom functionality where MailChimp falls short.

The past couple of months I’ve been working to move a little over 260,000 subscribers from Eloqua to MailChimp. The company that owns the site does heavy email marketing that differs from the typical MailChimp user. This requires some advanced functionality that MailChimp’s interface does not provide. The solution, MailChimp API which allows us to build out our own custom functionality where MailChimp falls short.

I was going to build out my own MailChimp PHP API class, but luckily after a little digging, found Drew McLellan‘s MailChimp v2 wrapper. Unlike a lot of the PHP libraries out that are complex, confusing wrappers, this one is super-simple and light-weight. It allows you to quickly access the MailChimp API and start coding your own applications.

Download the MailChimp PHP API Class

MailChimp PHP API Class

Using this MailChimp PHP API Class is as simple as the class is itself. You can either download it by clicking the button above or install the mailchimp-api using Composer. In order to install it with Composer, see the docs for more details.

Once you’ve got it installed, you’ll be ready to build out your application. Just grab your MailChimp API key and initialize the class.

Once initialized, you can begin calling out to the MailChimp API and request the data or functionality you need for your app.

MailChimp PHP API Class Examples

I’m a visual learner, so put together some examples for the MailChimp PHP API Class. I’m also interested in how others use APIs to build out applications. Be sure to comment below and let me know how you’ve integrated this API for your projects.

List Related Methods

List Related Methods

These are just a few examples using the MailChimp API. Check out their docs for a full list and details of all the methods they provide.


MailChimp List Related Methods

Get emails that complained.

MailChimp API Method:
lists/abuse-reports (string apikey, string id, int start, int limit, string since)

Access up to 180 days of aggregated activity for a list (does not include AutoResponder activity).

MailChimp API Method:
lists/activity (string apikey, string id)

Subscribe a batch of emails.

MailChimp API Method:
lists/batch-subscribe (string apikey, string id, array batch, boolean double_optin, boolean update_existing, boolean replace_interests)

Maximum batch sizes vary based on the amount of data in each record, though you should cap them at 5k – 10k records, depending on your experience. These calls are also long, so be sure you increase your timeout values.

Unsubscribe a batch of emails.

MailChimp API Method:
lists/batch-unsubscribe (string apikey, string id, array batch, boolean delete_member, boolean send_goodbye, boolean send_notify)

Retrieve the clients that the list’s subscribers have been tagged as being used.

MailChimp API Method:
lists/clients (string apikey, string id)

Access the Growth History by Month in aggregate or for a given list.

MailChimp API Method:
lists/growth-history (string apikey, string id)

Add a single Interest Group.

MailChimp API Method:
lists/interest-group-add (string apikey, string id, string group_name, int grouping_id)

If interest groups for the List are not yet enabled, adding the first group will automatically turn them on.

Delete a single Interest Group.

MailChimp API Method:
lists/interest-group-del (string apikey, string id, string group_name, int grouping_id)

If the last group for a list is deleted, this will also turn groups for the list off.

Change the name of an Interest Group.

MailChimp API Method:
lists/interest-group-del (string apikey, string id, string old_name, string new_name, int grouping_id)

Get the list of interest groupings for a given list.

MailChimp API Method:
lists/interest-groupings (string apikey, string id, bool counts)

Add a new Interest Grouping.

MailChimp API Method:
lists/interest-grouping-add (string apikey, string id, string name, string type, array groups)

If interest groups for the List are not yet enabled, adding the first grouping will automatically turn them on.

Delete an existing Interest Grouping.

MailChimp API Method:
lists/interest-grouping-del (string apikey, int grouping_id)

This will permanently delete all contained interest groups and will remove those selections from all list members.

Update an existing Interest Grouping.

MailChimp API Method:
lists/interest-grouping-update (string apikey, int grouping_id, string name, string value)

Retrieve all of the lists defined for your user account.

MailChimp API Method:
lists/list (string apikey, struct filters, int start, int limit, string sort_field, string sort_dir)

Retrieve the locations (countries) that the list’s subscribers have been tagged to.

MailChimp API Method:
lists/locations (string apikey, string id)

Get the most recent 100 activities for particular list members.

MailChimp API Method:
lists/member-activity (string apikey, string id, array emails)

Get all the information for particular members of a list.

MailChimp API Method:
lists/member-info (string apikey, string id, array emails)

Get all of the list members for a list.

MailChimp API Method:
lists/members (string apikey, string id, string status, struct opts)

MailChimp API Method:
gallery/list (string apikey, struct opts)

How to Fix WordPress CSS & JS From Breaking

I recently came across a strange WordPress issue that was driving me up a wall. After completing a fresh install in a MAMP environment, I was having intermittent issues where it appeared the CSS and JS wasn’t getting loaded in the admin dashboard.

Ever run into CSS or JS failing to load when working on a WordPress project locally? Me too!!! I even tried a fresh install using MAMP, but still got intermittent issues. It was driving me nuts until I did a little googling and found what the problem was.

WordPress loadscripts Screenshot Error

If you’re seeing something like what’s shown above, you’re probably having the same issue I was with the load-scripts.php and load-styles.php files. I was surprised to see on a fresh install of WordPress, console was returning a bunch of CSS and JS errors. I took a look at one of the problem files, load-scripts.php from the console and found:

WordPress load-scripts.php Console Error

Yikes! Initially I thought my install got corrupted somehow, so tried to re-installing WordPress again with no luck. After digging around, I came across this post by Michael Novotny.

Basically, he found that hacking a WordPress core file — which is a big no-no, could fix the problem. In wp-admin/load-styles.php he replaced this line:

error_reporting(0);

with:

error_reporting( E_ALL | E_STRICT );

and Viola! All was working again. Although like I said, editing a core WordPress file is never a good idea.

The Solution

So what’s a good fix for this bug? One of Michael’s readers, Dan, posted a comment in response to his post:

I also had this issue with MAMP pro. I found that adding:

define( 'CONCATENATE_SCRIPTS', false );

to wp-config.php worked as well. Perhaps you might feel a little better modifying config file over a core file.

This is a much better fix instead of hacking at WordPress’s core files. So in wp-config.php at the bottom of your file, place the following code:

define( 'CONCATENATE_SCRIPTS', false );

Check out this article by Jean Galea for further reading on this pesky bug.

How to Add Custom Shortcodes in Drupal 7

I was recently tasked with adding the ability for writers to enter simple shortcodes in Drupal’s WYSIWYG editor. My first thought was, no problem! It’ll only take me a few minutes. Like with everything Drupal, nothing is that simple. The ease at which WordPress makes it for developers to create and build blows Drupal out of the water. Simple tasks like creating these shortcodes — filters in Drupal speak—is a cinch using WordPress’s Shortcode API. So, how do you add custom shortcodes in Drupal?

I was recently tasked with adding the ability for writers to enter simple shortcodes in Drupal’s WYSIWYG editor. My first thought was, no problem! It’ll only take me a few minutes. Like with everything Drupal, nothing is that simple. The ease at which WordPress makes it for developers to create and build blows Drupal out of the water. Simple tasks like creating these shortcodes — filters in Drupal speak—is a cinch using WordPress’s Shortcode API. So, how do you add custom shortcodes in Drupal?

Custom Shortcodes in Drupal 7

Before I begin, bare with me, because as I said before—I’m a WordPress developer. There may be an easier way to go about doing this, but this is what I’ve found works best after reverse engineering Drupal’s Node Embed module. I also came across the Custom Filter module which seems to accomplish this. I’d rather learn how to do it myself, than a plug and play option so I get more familiar with how Drupal works. Suggestions welcomed!

Build the Drupal Functionality

I started off with building a custom module that will hold my shortcode logic. Here’s the directory structure:

  • Webroot
    — sites
    — all
    —- modules
    —– custom
    —— custom_shortcodes
    ——- custom_shortcodes.info
    ——- custom_shortcodes.module

First, you need to tell Drupal about your module. In the custom_shortcodes.info:

name = Custom Shortcodes
description = Sets up a custom filter that enables custom shortcodes.
core = 7.x

That’s it for that file. Next comes the custom_shortcodes.module file. This is where all the magic happens:

That’s it for the module. Now, you’ll need to enable it through admin/modules or with Drush:

Once you’ve enabled the module, you’ll need to update the text formats so the Custom Shortcodes filter is enabled through admin/config/content/formats.

Now when you enter [style:class_name]Content[/style] in Drupal’s WYSIWYG editor, the front-end output will look like this:

Wouldn’t it be nice to have a button on the editor to do this for you? I agree. But alas, haven’t figured out that part yet. Once I do, I’ll come back and update the post so you’ll know what I know. In the meantime, I’d love to hear your thoughts, suggestions or even a way to add that button, comment below!

Thanks to Matt Alexander for the regular expression!

Most Useful WordPress SQL Queries

WordPress is one on the most popular CMS around and for good reason. The ease at which it allows anybody to build and maintain websites can’t compare to other systems like Drupal or Joomla. Sometimes though, you’ll need to transfer a WordPress site to another URL or clean up your database to boost server performance. This can sometimes be tricky if you attempt to handle everything through the admin panel. To make life a little bit easier, I’ve put together a list of the most useful WordPress SQL queries.

WordPress is one on the most popular CMS around and for good reason. The ease at which it allows anybody to build and maintain websites can’t compare to other systems like Drupal or Joomla. Sometimes though, you’ll need to transfer a WordPress site to another URL or clean up your database to boost server performance. This can sometimes be tricky if you attempt to handle everything through the admin panel. To make life a little bit easier, I’ve put together a list of the most useful WordPress SQL queries.

Before you proceed…

It’s always good practice to backup your database before making any major changes. Should something go wrong, you’ll always be able to restore the old site. If you need help, try one of these useful WordPress plugins:

  • WP-DB-Backup
    WP-DB-Backup allows you easily to backup your core WordPress database tables. You may also backup other tables in the same database.

  • WP-DBManager
    Allows you to optimize database, repair database, backup database, restore database, delete backup database , drop/empty tables and run selected queries. Supports automatic scheduling of backing up, optimizing and repairing of database.

Alternatively, you can backup your database through phpMyAdmin manually.

The Most Useful WordPress SQL Queries

Running simple SQL queries like the ones listed below is easy. One of the easiest ways to accomplish it is through phpMyAdmin. If you don’t have phpMyAdmin installed or unsure how to access it, like with most things WordPress, there’s a plugin that can help you out. The WordPress SQL Executioner is a plugin that allows you to execute SQL queries through the admin panel.


Update the site URL & home URL

When you install WordPress for the first time, it stores the absolute path of the site URL and home URL in the database. This can make it a little tricky when you transfer your WordPress site from one URL to another. When you try, your site won’t load because the absolute URL is still set to the old URL. Fixing this is easy by updating the site URL and home URL in the database:

Update the GUID

One of the most crucial updates to make after a site transfer is the GUIDs. This is important because the GUID is used to translate post and page slugs to the correct absolute path. Updating this is just as easy as updating the site URL and home URL:

Update the URLs in your content

Like the site URL and home URL, WordPress uses absolute paths when embedding media and links into your posts or page content. When you transfer a WordPress site to a new URL, you’ll need to make sure to update those URLs so they don’t get broke. This can be a tedious and time-consuming process if you have a lot of content to update. Running the SQL query below will make it fast and easy:

Update image paths only

If you use a CDN or cloud service like Amazon CloudFront to serve images, you’ll need to update the image paths in your existing posts and pages so they get loaded by the service instead of your server. Use the query below to only update image paths:

Update your posts meta information

WordPress stores special post information in a separate table. If you’ve transferred your WordPress site, you’ll need to update that information should any of it point to your old URL. Use the query below to easily do this:

Change the default “admin” username

When you first install WordPress, it’s default account username is set to “admin”. Since this is widespread knowledge, it causes security concerns and should be changed. Changing it to a more unique name can boost your site’s security. Use the query below to change the default “admin” username:

Change your WordPress password

Need to change your WordPress password and can’t find where to do it in the admin panel? Use the query below to quickly make the change:

Assign posts from one author to another

Say you want to transfer articles from one author to another. This is another time consuming and tedious process if you’ve got a lot of posts on your site. You can easily and quickly make this change, but first need to obtain the author’s ID by going to your user page in the WordPress admin panel. Click the user’s name to view their profile and then look at the address bar taking note of the “user_id”. Then, use the query below to easily transfer ownership from articles assigned to one author to another:

Delete revisions

When you edit WordPress posts of pages, by default, it saves each revision so you can easily revert should something go wrong. This can cause use up your server resources when you have thousands of entries. Your database will grow significantly and will cause an increase in loop iterations, data retrieval and will affect page load times. To help optimize your WordPress database, delete old revisions that you don’t need anymore by using the query below:

Note: Bear in mind that all revisions from each post will be deleted, including all of its meta data.

Delete post meta

Installing or removing plugins is a very common task for WordPress. Some of the plugins make use of the post meta to store data pertaining to the plugin. After you have removed the plugin, those data are still left inside the post_meta table, which will no longer be needed. Run the following query to clean up the unused post meta value. This will help to speed up and reduce the size of your database.

Export all comment emails with no duplicates

Over a period of time, your blog will have received many comments. These comments will include the email addresses left by the commenter. You can retrieve all these emails for your mailing list without any duplicate.

Delete all pingbacks

Popular articles receive plenty of pingback. When this happens, the size of your database increases. In order to reduce size of the database, you can try removing all the pingbacks.

Delete all spam comments

If you have plenty of spam comments, going through each page to delete spam can be tedious and frustrating. With the following SQL query, even if you have to face deleting 500 over spam comments, it will be a breeze.

  • 0 = Comment Awaiting Moderation
  • 1 = Approved Comment
  • spam = Comment marked as Spam

Delete unused tags

In a WordPress database, if you run a query to delete old posts manually from MySQL, the old tags will remain and appear in your tag cloud/listing. This query allows you to delete the unused tags.

Find how many entries are spam

We look at the column comment_approved. Here WordPress stores the type of the comment. We collect the amount of the different values with COUNT(*) and put it into the variable amount.

comment_approved amount
spam 12118
1 104
post-trashed 1

The 1 represents approved, real comments. We are already seeing: only 0.85% of all comments are spam. Unfortunately, this is a normal value. The mean part is: MySQL must always go through the entire table to find the real comments for the output in the published articles. With an index, an optimized query structure, this goes faster.

Find which posts suffer from the most spam

The more popular a post is, the more spam it attracts. Some posts get almost never spam, others are downright overwhelmed. We get the 20 most spammed posts with this query:

comment_post_ID amount
1776 2299
2184 1840
143 1759
1366 1145
2377 960
2456 512
2536 497
683 486
1373 236
1402 200
1522 174
2458 161
1168 127
10473 121
647 116
2357 114
2831 111
2420 110
741 94

Now we could protect for these articles the comments with a registration or just close the comment form. Both solutions are not ideal.

Find where the most spam comes from

comment_author_IP amount
173.242.120.58 450
198.200.37.51 386
198.200.37.59 287
192.74.240.170 268
109.163.236.87 218
192.74.230.131 181
212.59.28.172 157
198.200.37.83 153
91.236.74.117 148
212.59.28.221 147
142.0.138.77 140
142.0.136.9 117
192.74.228.242 109
142.4.117.43 91
137.175.1.235 88
142.4.97.173 82
142.4.117.162 80
198.200.33.140 80
192.74.228.161 73
193.105.210.217 63
142.4.96.66 63
91.231.40.28 55
193.105.210.216 54
142.4.96.74 54
192.74.228.164 51
192.162.19.193 48
80.93.213.249 48
192.74.231.156 46
142.0.136.12 46
91.231.40.27 46

There is so much spam from some IP addresses that we can lock them out safely. This is works in a .htaccess, for example, like this:

# IP block list
order allow,deny
deny from 173.242.120.58
allow from all


Do you have any useful WordPress SQL queries you use?

I’d love to hear from you! Comment below with some useful WordPress SQL queries you use to update, optimize and manage your site.