WordPress AJAX login in sidebar without a plugin – Part II (AJAX logout)

In the previous part of this tutorial we covered technique to implement  AJAX login in sidebar without a plugin in WordPress. In this part two we will continue with AJAX logout.

UPDATE: I have created another article to do AJAX Login and Register in a popup box. You should give it a try.

After a successful login, login form gets disappear and AJAX loads user’s display name and a link to logout on the same page. Now we need to apply some functionality to show the same and keeping the login form hidden on page refresh or redirect.

AJAX logout

To continuously display AJAX logout on page redirect/refresh for logged in users all we need to create a function in our theme’s functions.php file that will include our JS file, create a new JS object called ajax_logout_object and enable the logged in users to call our function.

So open your theme’s functions.php file and locate the following code which we had created during AJAX login:

Now replace that block of code with this one:

We have called ajax_logout_init function for logged in users that enqueues ajax-logout-script.js and the script accepts ajax_logout_object and shows/hides login form or user information accordingly.

At last create a file ajax-logout-script.js in js folder under your theme’s directory and paste the following code in that:

That’s done. Now check your website to see AJAX logout and login are working nicely.

You Might Interested In


    1. Amit Sonkhiya says:

      Your form is still not submitting via AJAX. Please follow this article carefully: http://fellowtuts.com/wordpress/wordpress-ajax-login-in-sidebar-without-a-plugin-part-1-login/

      The major steps are:
      Placing form in widget that allow php script to run (produce a wp_nonce_field).
      Verify form by it’s inspecting source code in browser.
      Placing ajax_login_init() & ajax_lgoin() functions in functions.php file

      Downloading and attaching required JS files that are given at the end of that article (I suspect you missed it)
      Also first attempt to implement only login then come to this article later.
      Give it a try again! 🙂

      1. amritanshu kalia says:

        hello Sonkhiya,
        thanks for the reply.
        The solution you are giving is for
        WordPress AJAX Login And Register Without A Plugin


        coz i posted my first comment on wrong post i.e
        WordPress AJAX Login In Sidebar Without A Plugin – Part II (AJAX Logout

        You mean to say that i have to put the forms in sidebar widgets , and then call the widget , right?

        hoping to hear from yoiu soon

        1. Amit Sonkhiya says:


          My solution was just for this one and I assume that you don’t want to have popup login/register that was mentioned in that.article.

          Yes, you have to put the form in widget, add functions in functions.php and include both JS files.

          Please remember that the form execute php script to generate nonce field (line number 3) so you must make provision for php code in widget either using a plugin or using this link: http://fellowtuts.com/wordpress/using-php-code-into-wordpress-widget/

          [xyz-ips snippet=”ajaxLogin”] =


Leave a Reply

Enclose a code block like: <pre><code>Your Code Snippet</code></pre>.