Back to Top

How to use Ajax in WordPress

To use ajax in wordpress

Recently I was working on to create ajax request in WordPress and I have created using callback of WordPress actions.

For calling a ajax request using WordPress default file, you need to include wp-admin/admin-ajax.php which is into wp-admin panel so you need to all that file into your theme to support ajax.

Here I Will explain you a tutorial to use an ajax call. In this tutorial, We will Show how ajax works in WordPress.

First of all, let’s see how to enqueue admin-ajax.php into your theme

// to speed things up, you don't load these scripts in the WP back-end 
if( ! is_admin() ) {
    add_action( 'wp_enqueue_scripts', 'load_custom_scripts' );
}

function load_custom_scripts() {
       /* Script variables */
	$params = array(
		'ajax_url' => admin_url('admin-ajax.php')		
	);
	//declare a URL to the file that handles the AJAX request
	wp_localize_script( 'general', 'ajax_params', $params );
}

Here ajax_url is a JavaScript variable used in WordPress to pass ajax requests to that uri.Using above code, you won’t have to use PHP to print out JavaScript code, which is non-cacheable and not feasible.It will generate HTML Code into tags like in below:


This is just for your information, don’t include above code into any file.

Now,in your JavaScript file, paste the following code of jQuery:

$('.btn').click(function(){
		var data = {
			action: 'ajaxDataSubmit',
			id: $(".cls")attr("id");
		};
		$.ajax({		 
			type:"POST",
		 	url: ajax_params.ajax_url, // our PHP handler file
			data: data,
			beforeSend: function() {
					//loadin image or text beforeload ajax code			},
			success:function(results){ 
				// do something with returned data
				return results;
			}
		});
   });

In the above jQuery code, we added the code at click event of a button but you can write on any event, you want.

Including the following line of codes, you can process the ajax request and display your data. you can add below code to your theme’s functions.php or a plugin file.

function ajaxDataSubmit(){
 global $wpdb; 
 $id = $_POST['id'];
 // your php code
  die;
}
add_action('wp_ajax_ajaxDataSubmit', 'ajaxDataSubmit');//Logged in users
add_action('wp_ajax_nopriv_ajaxDataSubmit', 'ajaxDataSubmit'); // Not logged in uNOTE: mer

Mostly wp_ajax_nopriv prefix is used where as wp_ajax used for logged in users too.

That’s it.Now you can see yours ajax request in a browser. you are done it without any plugin. 🙂

You may also like:

To use multiple headers in WordPress
Voice Search in WordPress
To Reset the WordPress Loop

Thank you for reading.Feel free to share your thoughts! Don’t Forget to Follow us on Twitter or Subscribe us to Get the Latest Updates.

Leave a Reply

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

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

Most Popular Posts

How to Parse WordPress RSS Feed?

Posted on 5 years ago

Bhumi

New Features in MySQL 5.6

Posted on 7 years ago

Bhumi

How automatically start session in PHP

Posted on 7 years ago

Bhumi

To access windows shared files in ubuntu

Posted on 6 years ago

Bhumi

Hello world

Updated 1 month ago

Nick Carter

In depth Understanding of Laravel Core

Updated 3 months ago

Bhumi

ECMAScript 6 New Features – 2

Updated 1 year ago

Bhumi

The Reader’s Poll – June 2015

Posted on 4 years ago

Bhumi

The Reader’s Poll – August 2014

Posted on 5 years ago

Bhumi

The Reader’s Poll – June 2014

Posted on 5 years ago

Bhumi

The Readers’ Poll – May 2014

Posted on 5 years ago

Bhumi

The Readers’ Poll – August 2013

Posted on 6 years ago

Bhumi