Blog

In this article, we’ll see WordPress Ajax.

In today’s digital landscape, where users demand fast and dynamic interactions, websites need to deliver seamless experiences. WordPress, one of the most popular content management systems, offers an array of powerful tools to achieve this, and one such tool is Ajax. With Ajax, you can enhance your WordPress website by incorporating real-time updates, interactive elements, and efficient data handling—all without reloading the entire page.

We’ll explore the fascinating world of WordPress Ajax and how it can take your website to the next level.

What is AJAX

AJAX (Asynchronous Javascript and XML), enables websites to dynamically fetch and display content without the user moving away from the current page. This makes more interactive user experience, and can speed things up too since a whole new webpage needn’t be reloaded.

This means that we can update a part (or parts) of a page without a user having to refresh the entire page. The lifecycle usually goes something like this:

• A user triggers an action on the website. Perhaps they click a button, they click a link, or something similar.
• Without the page refreshing, data is sent to the server.
• The server processes the data and sends data back.
• The website then handles that returned data – the response – and updates the page accordingly.

How Ajax Works in WordPress

Since AJAX is already used in WordPress’ back end, it has been basically implemented for you. All you need to do is use the functions available. Let’s look at the process in general before diving into the code.

Every AJAX request goes through the admin-ajax.php file in the wp-admin folder. That this file is named admin-ajax might be a bit confusing. I quite agree, but this is just how the development process turned out. So, we should use admin-ajax.php for back-end and user-facing AJAX.

Each request needs to supply at least one piece of data (using the GET or POST method) called action. Based on this action, the code in admin-ajax.php creates two hooks, wp_ajax_my_action and wp_ajax_nopriv_my_action, where my_action is the value of the GET or POST variable action.

Adding a function to the first hook means that that function will fire if a logged-in user initiates the action. Using the second hook, you can cater to logged-out users separately.

WordPress Ajax Example

Following is a simple example for how to use wordpress AJAX in your theme:

So in your themes functions.php file, add your function to be called, for example:

function checkUser() {

    $userid = $_POST['user']; //validation also :)
    $oMySQL = new MySQL();
    $query = "Select * FROM videotable WHERE uid = '$userid'";
    $oMySQL->ExecuteSQL($query);
    $bb = $oMySQL->iRecords;
    $aa = $oMySQL->aResult;
    echo $bb;

    if ($bb == 0){
    $query = "INSERT INTO videotable VALUES ('','$userid','true')";
    $oMySQL->ExecuteSQL($query);
    echo 'true';
        exit();

    } else {
    $sharing = mysql_result($aa,0,"share");
    echo $sharing;
    exit();

    }
}

After that, you add your hook with connects to the inbuilt AJAX System

add_action('wp_ajax_check_user', 'checkUser');
add_action('wp_ajax_nopriv_check_user', 'checkUser');

wp_ajax_nopriv_%s allows it to be called from the front end.

And then, in your javascript file, you just fire off your ajax request.

$.post(ajaxurl, { action: 'check_user', user: userId }, function(output) {
     alert(output);
 });

If ajaxurl is undefined, you will need to create it in your template file, something like this should work, but there are other ways.

add_action('wp_head','ajaxurl');
function ajaxurl() {
?>
<script type="text/javascript">
var ajaxurl = '<?php echo admin_url('admin-ajax.php'); ?>';
</script>
<?php
}

Backend of wordpress does the rest.

It takes the action passed in the AJAX request, looks for the corresponding `wp_ajax(_nopriv)_%s hook and then calls the function that is assigned to the hook.

It will also pass in either the $_POST or $_GET depending on the type of AJAX request.

WordPress Ajax empowers you to create dynamic, interactive, and user-friendly websites that keep visitors engaged and satisfied. By understanding the basics, leveraging its capabilities, and implementing best practices, you can unlock the true potential of Ajax in your WordPress projects.

Embrace this powerful technology, and watch as your website evolves into a seamless and immersive digital experience for your users.

You can read a little more about using AJAX inside of WordPress.

I hope this article helps!