QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Home
  • QIdea
  • QTrack
Home Carbon Ads AJAX In WordPress

AJAX In WordPress

wordpres-ajax

Now a days a lot of wordpress themes are build with AJAX functionality. All these themes can retrieve and add posts, pages, comments, users etc using AJAX. Integrating AJAX into WordPress is very handy if you want to create a single page wordpress theme. In this article I will explain the core about integrating AJAX into WordPress.


wp-admin/admin-ajax.php

This file is the core of AJAX in WordPress. All the AJAX requests are made to this file and this file returns the appropriate result. You can either make a GET or POST request to this URL but its compulsory to provide the API name. API name identifies which function you want this URL to execute.

This file doesn’t provide any output by default therefore you need to explicitly produce output(HTTP response content) using explicitly defined actions.

Defining AJAX Functions

Suppose you want to check if user is logged in or not using AJAX then you can use a function named logged_in_check(you can name it anything) and register it via wp_ajax_ and wp_ajax_nopriv_ wordpress actions.

function logged_in_check()
{

    //check if it is a AJAX request
    if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest')
     {
        //check if user is logged in or nor
        if(is_user_logged_in())
        {
            echo "TRUE";
        }
        else
        {
            echo "FALSE";
        }

        die();
    }
    //seems like a anchor link or form request
    else
    {
        //handle non AJAX request
        //do the same operation.

        //redirect back to the referer page.
        header("Location: ".$_SERVER["HTTP_REFERER"]);
        die();
    }
}

//here api name is logged_in_check
//this action is executed if user is logged in
add_action("wp_ajax_logged_in_check", "logged_in_check");

//this action is executed if user is not logged in
add_action("wp_ajax_nopriv_logged_in_check", "logged_in_check");

Put this code via theme or plugin.

Now you can make request to the URL this way: http://myDomain.com/wp-admin/admin-ajax.php?action=logged_in_check

If you want to make a POST request then make sure you have input element name as “action” and value as “logged_in_check”.

<form method="post" action="http://myDomain.com/wp-admin/admin-ajax.php">
    <input type="text" name="action" value="logged_in_check" />
</form>

Users might have AJAX disabled in that case you can make a non-AJAX request to the same URL and in the else condition of the example shown you can handle the logic and then redirect user back to the referer URL.

Example AJAX code looks like this

    var xhr = new XMLHttpRequest();
    xhr.open("GET", "http://themes.qnimate.com/qplog/wp-admin/admin-ajax.php?action=logged_in_check");
    xhr.setRequestHeader("X_REQUESTED_WITH","xmlhttprequest");
    xhr.onload = function(){
        console.log(xhr.responseText);
    }
    xhr.send();

Aug 10, 2014Narayan Prusty
How To Integrate Forms On WordPressWordPress Frontend Registration And Login Forms
Comments: 2
  1. cheap web designers Tampa Bay Florida
    5 years ago

    Hi there,of course this piece of writing is actually good and
    I have learned lot of things from it concerning blogging. thanks.

    ReplyCancel
  2. Anam Ahamed
    7 years ago

    Great post

    ReplyCancel

Leave a Reply Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Narayan Prusty

I am a software engineer specialising in Blockchain, DevOps and Go/JavaScript. This is my personal blog where I write about things that I learn and feel interesting to share.

Image8 years ago 13 Comments WordPress
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
  • wp-admin/admin-ajax.php
  • Defining AJAX Functions
Related Articles
  • Underscores.me Tutorial
  • WordPress Frontend Registration And Login Forms
  • Designing WordPress Posts UI For Post Formats
  • How To Integrate Forms On WordPress
  • Multi-language WordPress Theme and Site
Our Sponsor
My Books

2014 - 2015 © QNimate
All tutorials MIT license