Makers Byte
Published in

Makers Byte

How to use AJAX in WordPress themes?

I’m fairly experienced with using AJAX and it’s various jQuery shorthand implementations, but have never implemented AJAX into a WordPress theme.

I had to do quite a bit of Googling before i learned how to use AJAX along with the WordPress theme. Now I’m writing this post to show how I’ve implemented AJAX into WordPress step by step.

Step 1: In your function file, add the following code

// this code is used to add AJAX URL
add_action('wp_head','ajaxurl');
function ajaxurl() {
?>
<script type="text/javascript">
var ajaxurl = '<?php echo admin_url('admin-ajax.php'); ?>';
</script>
<?php
}

Step 2: Now let say you want to send data from front page to back-end for creating a user, you can use a code similar to this:

<script>
function createUser(){
jQuery(".register-form").hide();
jQuery(".register-confirmation").show();jQuery.ajax({
type:"POST",
url: ajaxurl,
data: {
action: "review_vote_ajax_request",
post_id: "1"
},
success:function(data){
console.log(data);
},
error: function(errorThrown){
console.log(errorThrown);
}
});
}
</script>

You can use the above code in a custom.js file or even inside the page. Depending upon how you want to implement it.

Step 3: Now in your function.php file, you will need a code to receive data.

Few things to note:

  • WordPress requires you to explicitly make the AJAX function accessible to non-authenticated users. To enable the AJAX call to non-auth users, you must include action to explicitly enable this: wp_ajax_nopriv_review_vote_ajax_request
  • You also need to include the action to explicitly enable this for authenticated users: wp_ajax_review_vote_ajax_request
add_action( 'wp_ajax_nopriv_review_vote_ajax_request', 'createUser' );
add_action( 'wp_ajax_review_vote_ajax_request', 'createUser' );
function createUser() { // Can add further code here and do your magic
echo "Received!";
// Include the following at the end of your AJAX function
wp_die();
}

Securing your AJAX requests

Because AJAX makes it so easy to pass data between script and backend, you should definitely take necessary steps to make your code secure. That includes sanitizing any data before saving it, but also utilizing WordPress’ “nonce” functionality to check if the requests are coming from corrent and accepted locations.

Let’s add some security to the example code we did above.

Step 1: Adding nounce variable

// this code is used to add AJAX URL
add_action('wp_head','ajaxurl');
function ajaxurl() {
?>
<script type="text/javascript">
var ajaxurl = '<?php echo admin_url('admin-ajax.php'); ?>';
var nounce = '<?php wp_create_nonce('reg-nonce'); ?>
</script>
<?php
}

Step 2: In our Javascript, we pick up the nonce value and pass it right back in our AJAX request:

<script>
function createUser(){
jQuery(".register-form").hide();
jQuery(".register-confirmation").show();jQuery.ajax({
type:"POST",
url: ajaxurl,
data: {
action: "review_vote_ajax_request",
post_id: "1",
nonce: nounce
},
success:function(data){
console.log(data);
},
error: function(errorThrown){
console.log(errorThrown);
}
});
}
</script>

Step 3: And finally in our wp_ajax hooked function we should start by checking if the nonce was valid with wp_verify_nonce().

add_action( 'wp_ajax_nopriv_review_vote_ajax_request', 'createUser' );
add_action( 'wp_ajax_review_vote_ajax_request', 'createUser' );
function createUser() {if (!isset($_POST['nonce']) || !wp_verify_nonce($_POST['nonce'], 'reg-nonce')) {
wp_die(-1);
}
// Can add further code here and do your magic
echo "Received!";
// Include the following at the end of your AJAX function
wp_die();
}

Was this helpful? Did I miss something? Do you have a question? Get in touch by placing your comment.

If this post was helpful…it would mean a lot to me if you could click on the “claps” icon…up to 50 claps allowed — Thank You!

--

--

--

Resource hub for Designers/Developers

Recommended from Medium

NodeJS: How to Listen to MySQL Events in NodeJS Server

Salesforce Apex: Getting and putting files from Salesforce to amazon S3 bucket or vice versa

Devlog — Week 9

🔖 Banggood sale

Migrate a JavaScript Nodejs project to TypeScript

Our experience in development of SPA using VueJS + Nuxt

Build Instagram login page with Next.js and TailwindCSS (all articles)

Coding Interview Problems: Find the Longest Word in a Sentence: -Part 1:

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Shahzaib Khan

Shahzaib Khan

Data Scientist, Developer, Tech Writer, Entrepreneur and Computer Science Enthusiast. Connect with me @ https://linkedin.com/in/shahzaibkhan/

More from Medium

How to easily export and import WordPress Sites?

Add a favicon to your Wordpress website using PHP

Favicon in Wordpress

Setup an editable table or how to edit tables in WordPress

How to send a DELETE request with cURL