Dynamic Dependent Select Box using Ajax in WordPress

By -

Today  i will explain how to create a dynamic dependent select box which fetches records from database without reload the page,  this can be achieved using jQuery and Ajax, using Ajax in WordPress is little different than the conventional way but it is easier to implement than you think. We can submit and receive data using jQuery, and Ajax will handle server side request.

Download Zip File

Enqueue jQuery in WordPress:

Before start working on Ajax, make sure that you have enqueue jQuery properly in your theme function file. Add the following code in your theme function.php file.

Dependent Select Box Example

We will use country and city dependent select box example, we will follow the steps below:

    1. Create a plugin to use Ajax in WordPress
    2. Create main plugin file
    3. Create Ajax file to handle request
    4. Create two tables of country and city
    5. Publish a template page with HTML form of country and city select drop down list.
    6. Conclusion

1. Create two tables of country and city

After creating tables insert some data or you can also create these tables with data by simply importing sql files which are attached with the tutorial download file.

2. Create a plugin to use Ajax in WordPress:

Create a plugin is very easy in WordPress, just remember that plugin folder and file name will be same, i used ajax-cities/ folder name and ajax-cities.php file name in this folder. After creating plugin will be placed in plugin folder here in the wp-content/plugins/. Now go to your dashboard and activate plugin.

Plugin

In the above picture you can see that I have activated my plugin.

3. Create main plugin file name ajax-cities.php:

4. Create Ajax file to handle request with name cities.js

Create file with name cities.js and paste the below code, although code is self-explanatory but I still use comments to explain it.

These are the two files which are placed in our ajax-cities plugin.

5. Publish a template page with HTML form of country and city select drop down list

Create a page in your theme folder with name page-select-country.php and paste the below code.

Now publish a page with name select-country.

6. Conclusion:

Conclusion of this tutorial is that using AJAX in WordPress is very simple and we also learnt how we can fetch data from database without refresh the page using Ajax. We can add other more functionality, but the main purpose of this tutorial is to show you how to properly use AJAX in WordPress. Quick recap of this tutorial, the following steps involved which as listed below:

  1. Enqueue jQuery in WordPress theme function file
  2. Created two tables of country and city and insert data
  3. Created a plugin to use Ajax in WordPress and activated it.
  4. Published a template page with HTML form of country and city select drop down list.

Download Zip File

Your Turn

Have you ever made plugin for dynamic dependent select box? share with us your experience.

Javed Ur Rehman

Javed Ur Rehman is a User Interface, PHP developer and blogger, he loves to write web development tutorial and blogging tips.

Latest posts by Javed Ur Rehman (see all)

Javed Ur Rehman is a User Interface, PHP developer and blogger, he loves to write web development tutorial and blogging tips.

Leave a Reply

Your email address will not be published. Required fields are marked *