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:
1 2 3 4 | // Execute the action only if the user isn't logged in if (!is_user_logged_in()) { add_action('init', 'ajax_login_init'); } |
Now replace that block of code with this one:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | function ajax_logout_init() { wp_register_script('ajax-logout-script', get_template_directory_uri() . '/js/ajax-logout-script.js', array('jquery') ); wp_enqueue_script('ajax-logout-script'); global $current_user; wp_localize_script( 'ajax-logout-script', 'ajax_logout_object', array( 'LoggedIn' => is_user_logged_in(), 'username' => $current_user->display_name, 'logoutURL' => wp_logout_url( home_url() ) )); die(); } // Execute the action only if the user isn't logged in if (!is_user_logged_in()) { add_action('init', 'ajax_login_init'); } // Execute the action only if the user is logged in else { add_action('init', 'ajax_logout_init'); } |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | // JavaScript Document jQuery(document).ready(function($){ if(ajax_logout_object.LoggedIn) { $logoutURL = '<a href="'+ ajax_logout_object.logoutURL +'">Logout</a>'; $('#divuser').parent().siblings('h1').text('Logged In'); $('#divlogin').hide(), $('#divuser').html(ajax_logout_object.username+ ' ' + $logoutURL).show(); } else { $('#divuser').parent().siblings('h1').text('Login'); $('#divlogin').show(), $('#divuser').hide(); } }) |
That’s done. Now check your website to see AJAX logout and login are working nicely.
The requested URL /login was not found on this server when i click on login
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! 🙂
hello Sonkhiya,
thanks for the reply.
The solution you are giving is for
WordPress AJAX Login And Register Without A Plugin
right?
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
Hi,
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”] =