QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Bitcoin BankingBuy, Sell, Store and Earn Interest
  • Home
  • QIdea
  • QTrack
Home Carbon Ads WordPress Frontend Registration And Login Forms

WordPress Frontend Registration And Login Forms

In this article I will show you how to create a AJAX based login form for wordpress frontend. Before continuing with this article please read my article on integrating AJAX in wordpress.


First let’s see some core wordpress functions which are necessary to build a login and registration system on frontend of wordpress.

wp_signon

wp_signon is used to sign in a user into wordpress. This function needs the username and password for signing in. More on wp_signon.

wp_logout

wp_logout is used to logout a logged in user. More on wp_logout.

wp_create_user

wp_create_user is used to register a new user. More on wp_create_user.

wp_update_user

wp_update_user is used to update the profile information of a registered and logged in user. More on wp_update_user.

get_the_author_meta

get_the_author_meta is used to retrieve profile information of a user. More on get_the_author_meta.

wp_set_password

wp_set_password is used to change password of a registered wordpress user. More on wp_set_password.

Building a AJAX Based Login Form

Let’s build a login form which will be displayed to the users and for logged in users we will display a logout button.

Put this code in theme functions.php file or in a plugin.

<?php
function login()
{
    $creds = array();
   
    $username = null;
    $password = null;
   
    if($_SERVER['REQUEST_METHOD'] == "POST")
    {
        $username = $_POST["username"];
        $password = $_POST["password"];
    }
    else
    {
        $username = $_GET["username"];
        $password = $_GET["password"];
    }
   
    $creds['user_login'] = $username;
    $creds['user_password'] = $password;
    $creds['remember'] = true;
    $user = wp_signon( $creds, false );
    if (is_wp_error($user))
    {
        echo "FALSE";  
    }
    else
    {
        echo "TRUE";
    }
   
    if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest')
    {
        die();
    }
    else
    {
        header("Location: " . $_SERVER['HTTP_REFERER']);
    }
}

add_action("wp_ajax_login", "login");
add_action("wp_ajax_nopriv_login", "login");

function logout()
{
    wp_logout();
   
    if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest')
    {
        die();
    }
    else
    {
        header("Location: " . $_SERVER['HTTP_REFERER']);
    }
}

add_action("wp_ajax_logout", "logout");
add_action("wp_ajax_nopriv_logout", "logout");
?>

Put this code wherever you want to display the login form.

Make sure you change the domain name to your own domain name.

        <?php
            if(is_user_logged_in())
            {
                ?>
                    <style>#login_form{display: none;}</style>
                <?php
            }
            else
            {
                ?>
                    <style>#logout_form{display: none;}</style>
                <?php
            }
        ?>


        <form id="logout_form" method="post" action="http://themes.qnimate.com/qplog/wp-admin/admin-ajax.php" onsubmit="event.preventDefault();">
            <input type="text" name="action" value="logout" />
            <input type="submit" id="logout_submit" />
        </form>
                   
        <form id="login_form" method="post" action="http://themes.qnimate.com/qplog/wp-admin/admin-ajax.php" onsubmit="event.preventDefault();">
            <input type="text" name="username" id="username" />
            <input type="password" name="password" id="password" />
            <input type="text" name="action" value="login" />
            <input type="submit" id="login_submit" />
        </form>
       
        <script>
            window.document.getElementById("logout_submit").addEventListener("click", function(e){
                var xhr = new XMLHttpRequest();
                xhr.open("GET", "http://themes.qnimate.com/qplog/wp-admin/admin-ajax.php?action=logout", true);
                xhr.onload = function(){
                    location.reload();
                };
                xhr.send();
                xhr.setRequestHeader("X_REQUESTED_WITH","xmlhttprequest");
            }, false);
           
            window.document.getElementById("login_submit").addEventListener("click", function(e){
                var xhr = new XMLHttpRequest();
                var username = document.getElementById("username").value;
                var password = document.getElementById("password").value;
                xhr.open("GET", "http://themes.qnimate.com/qplog/wp-admin/admin-ajax.php?action=login&username="+username+"&password="+password, true);
                xhr.onload = function(){
                    if(xhr.responseText == "TRUE")
                    {
                        location.reload();
                    }
                    else
                    {
                        alert("Please check username and password");
                    }
                };
                xhr.setRequestHeader("X_REQUESTED_WITH","xmlhttprequest");
                xhr.send();
            }, false);
        </script>

This login functionality will also work if user has disabled JavaScript. Similarly you can add more actions to wordpress AJAX and create registration, profile, change password etc forms.

Aug 10, 2014Narayan Prusty
AJAX In WordPressPreventing CSRF Attacks In WordPress Using Nonces
Comments: 1
  1. Bintang kehidupan versi maia
    3 years ago

    http://babun.gq
    http://hersup.ga
    http://babun.gq
    http://hersup.cf

    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`.

Narayan Prusty

I am a full-stack web developer. I specialize in Blockchain and JavaScript. This is my personal blog where I write about programming and technologies that I learn and feel interesting to share.

6 years ago 1 Comment WordPress
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
  • wp_signon
  • wp_logout
  • wp_create_user
  • wp_update_user
  • get_the_author_meta
  • wp_set_password
  • Building a AJAX Based Login Form
Related Articles
  • Store Your WordPress Users Raw Password
  • Login User into WordPress without Password
  • AJAX In WordPress
  • WordPress Enable or Disable Auto Update
  • Advanced Guidelines To WordPress Theme Development
Our Sponsor
Freelance: I am available
@narayanprusty
Hi, I am a full-stack developer - focusing on JavaScript, WordPress, Blockchain, DevOps, Serverless and Cordova. You can outsource your app development to me.





Will get back to you soon!!!
WordPress
ReactJS
Meteor
Blockchain
Serverless
Kubernetes
DevOps
DB & Storage
Ejabberd
Let's get started
My Books

2014 - 2015 © QNimate
All tutorials MIT license