Please write below code in functions.php
-----------------------------------------------------------------------------------------------------------
<?php
function ajax_login_init(){
wp_register_script('ajax-login-script', get_template_directory_uri() . '/js/ajax-login-script.js', array('jquery') );
wp_enqueue_script('ajax-login-script');
wp_localize_script( 'ajax-login-script', 'ajax_login_object', array(
'ajaxurl' => admin_url( 'admin-ajax.php' ),
'redirecturl' => home_url(),
'loadingmessage' => __('Sending user info, please wait...')
));
// Enable the user with no privileges to run ajax_login() in AJAX
add_action( 'wp_ajax_nopriv_ajaxlogin', 'ajax_login' );
}
// Execute the action only if the user isn't logged in
if (!is_user_logged_in()) {
add_action('init', 'ajax_login_init');
}
function ajax_login(){
// First check the nonce, if it fails the function will break
check_ajax_referer( 'ajax-login-nonce', 'security' );
// Nonce is checked, get the POST data and sign user on
$info = array();
$info['user_login'] = $_POST['username'];
$info['user_password'] = $_POST['password'];
$info['remember'] = true;
$user_signon = wp_signon( $info, false );
if ( is_wp_error($user_signon) ){
echo json_encode(array('loggedin'=>false, 'message'=>__('Wrong username or password.')));
} else {
echo json_encode(array('loggedin'=>true, 'message'=>__('Login successful, redirecting...')));
}
die();
}
function ajax_registration_init(){
wp_localize_script( 'ajax-login-script', 'ajax_registration_object', array(
'ajaxurl' => admin_url( 'admin-ajax.php' ),
'redirecturl' => home_url(),
'loadingmessage' => __('Sending user info, please wait...')
));
// Enable the user with no privileges to run ajax_login() in AJAX
add_action( 'wp_ajax_nopriv_ajaxregistration', 'ajax_registration' );
}
// Execute the action only if the user isn't logged in
if (!is_user_logged_in()) {
add_action('init', 'ajax_registration_init');
}
function ajax_registration(){
// First check the nonce, if it fails the function will break
check_ajax_referer( 'ajax-registration-nonce', 'regsecurity' );
// Nonce is checked, get the POST data and sign user on
$info = array();
$regname = $_POST['regname'];
$regemail = $_POST['regemail'];
$regusername = explode("@",$regemail);
$regusername = $regusername[0];
$regpassword = $_POST['regpassword'];
$myerror = '';
if($regemail == ''){
$myerror .= 'Please enter email address';
}
else if($regpassword == ''){
$myerror .= ($myerror != '')?'<br>':'';
$myerror .= 'Please enter password';
}
if($myerror != ''){
echo json_encode(array('signupresponse'=>false, 'message'=>__("$myerror")));
}
else {
if ( email_exists($regemail) == false ) {
$user_id = wp_create_user( $regusername, $regpassword, $regemail );
update_user_option( $user_id, 'firstname', $regname);
echo json_encode(array('signupresponse'=>true, 'message'=>__('Register successful!\n You can login now')));
} else {
echo json_encode(array('signupresponse'=>false, 'message'=>__('Email already exists.')));
}
}
die();
}
?>
-----------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------
Now create "ajax-login-script.js" file
-----------------------------------------------------------------------------------------------------------
jQuery(document).ready(function($) {
// Show the login dialog box on click
$('a#show_login').on('click', function(e){
$('body').prepend('<div class="login_overlay"></div>');
$('form#login').fadeIn(500);
$('div.login_overlay, form#login a.close').on('click', function(){
$('div.login_overlay').remove();
$('form#login').hide();
});
e.preventDefault();
});
// Perform AJAX login on form submit
$('form#login').on('submit', function(e){
$('form#login p.status').show().text(ajax_login_object.loadingmessage);
$.ajax({
type: 'POST',
dataType: 'json',
url: ajax_login_object.ajaxurl,
data: {
'action': 'ajaxlogin', //calls wp_ajax_nopriv_ajaxlogin
'username': $('form#login #username').val(),
'password': $('form#login #password').val(),
'security': $('form#login #security').val() },
success: function(data){
$('form#login p.status').text(data.message);
if (data.loggedin == true){
document.location.href = ajax_login_object.redirecturl;
}
}
});
e.preventDefault();
});
// Show the login dialog box on click
$('a#show_registration').on('click', function(e){
$('body').prepend('<div class="login_overlay"></div>');
$('form#registration').fadeIn(500);
$('div.login_overlay, form#registration a.close').on('click', function(){
$('div.login_overlay').remove();
$('form#registration').hide();
});
e.preventDefault();
});
// Perform AJAX registration on form submit
$('form#registration').on('submit', function(e){
$('form#registration p.status').show().text(ajax_registration_object.loadingmessage);
$.ajax({
type: 'POST',
dataType: 'json',
url: ajax_registration_object.ajaxurl,
data: {
'action': 'ajaxregistration', //calls wp_ajax_nopriv_ajaxregistration
'regname': $('form#registration #regname').val(),
'regemail': $('form#registration #regemail').val(),
'regpassword': $('form#registration #regpassword').val(),
'regsecurity': $('form#registration #regsecurity').val() },
success: function(data){
$('form#registration p.status').text(data.message);
if (data.signupresponse == true){
document.location.href = ajax_registration_object.redirecturl;
}
}
});
e.preventDefault();
});
});
-----------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------
Please add below code after body tag in header.php
-----------------------------------------------------------------------------------------------------------
<form id="login" action="login" method="post">
<h1>Site Login</h1>
<p class="status"></p>
<label for="username">Username</label>
<input id="username" type="text" name="username">
<label for="password">Password</label>
<input id="password" type="password" name="password">
<a class="lost" href="<?php echo wp_lostpassword_url(); ?>">Lost your password?</a>
<input class="submit_button" type="submit" value="Login" name="submit">
<a class="close" href="">(close)</a>
<?php wp_nonce_field( 'ajax-login-nonce', 'security' ); ?>
<?php do_action( 'wordpress_social_login' ); ?>
</form>
<form id="registration" action="registration" method="post">
<h1>Site Registration</h1>
<p class="status"></p>
<label for="regname">Name</label>
<input id="regname" type="text" name="regname">
<label for="regemail">Email</label>
<input id="regemail" type="text" name="regemail">
<label for="regpassword">Password</label>
<input id="regpassword" type="password" name="regpassword">
<input class="submit_button" type="submit" value="Registration" name="submit">
<a class="close" href="">(close)</a>
<?php wp_nonce_field( 'ajax-registration-nonce', 'regsecurity' ); ?>
</form>
after this add below code for "login/logout" link
<?php if (is_user_logged_in()) { ?>
<a class="login_button" href="<?php echo wp_logout_url( home_url() ); ?>">Logout</a>
<?php } else { ?>
<a class="login_button" id="show_login" href="">Login</a> <a class="registration_button" id="show_registration" href="">SignUp</a>
<?php } ?>
-----------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------
Please add below CSS code into your
style.css
-----------------------------------------------------------------------------------------------------------
form#login, form#registration{
display: none;
background-color: #FFFFFF;
border-radius: 8px;
font-family: Arial, Helvetica, sans-serif;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
position: fixed;
top: 200px;
padding: 40px 25px 25px 25px;
width: 350px;
z-index: 999;
left: 50%;
margin-left: -200px;
color: #878787;
font-size: 11px;
}
form#login h1, form#registration h1{
color: #333333;
font-family: 'Georgia', 'Times New Roman', Times, serif;
font-size: 27px;
font-weight: 100;
text-align: center;
line-height: 1;
margin: 0 0 30px 0;
}
form#login input#username,
form#login input#password,
form#registration input#regname,
form#registration input#regemail,
form#registration input#regpassword{
border: 1px solid #EDEDED;
border-radius: 3px 3px 3px 3px;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.1) inset;
color: #333333;
font-size: 15px;
padding: 10px 10px 10px 13px;
width: 325px;
margin: 7px 0 30px 0;
background-color: #F9F9F9;
font-family: 'Georgia', 'Times New Roman', Times, serif;
}
form#login input#username:focus,
form#login input#username:focus,
form#registration input#regname:focus,
form#registration input#regemail:focus,
form#registration input#regpassword:focus{
background-color: #FFF;
}
form#login input.submit_button, form#registration input.submit_button{
font-size: 13px;
color: #FFF;
border: 1px solid #b34336;
background-color: #e25c4c;
border-radius: 3px;
text-shadow: 0 1px 0 #ba3f31;
padding: 9px 31px 9px 31px;
background: -moz-linear-gradient(top, #ea6656, #df5949);
border-top: 1px solid #bb483a;
border-bottom: 1px solid #a63b2e;
float: right;
box-shadow: 0 1px 0 #E87A6E inset;
}
form#login a, form#registration a{
text-decoration: none;
}
form#login a.close, form#registration a.close{
color: #DCDCDC;
position: absolute;
right: 15px;
top: 15px;
}
form#login a.lost, form#registration a.lost{
color: #B4B2B2;
float: left;
margin: 10px 0 0 0;
}
form#login p.status, form#registration p.status{
text-align: center;
margin: -25px 0 20px 0;
display: none;
}
a.login_button, a.registration_button{
font-family: Arial, Helvetica, sans-serif;
padding: 5px 7px 5px 7px;
background-color: #FFF;
border-radius: 3px;
border: 1px solid #DCDCDC;
color: #333;
text-decoration: none;
font-size: 11px;
}
.login_overlay{
height: 100%;
width: 100%;
top: 0px;
background-color: #F6F6F6;
opacity: 0.9;
position: fixed;
z-index: 998;
}
-----------------------------------------------------------------------------------------------------------
