Закрытый раздел сайта

Делаем штатными средствами wordpress закрытый раздел сайта.

Проверка авторизации

Делаем проверку авторизован ли посетитель

<?php if (is_user_logged_in()) : ?>

выводим закрытый раздел

<?php else: // если посетитель не авторизован ?>

выводим предупреждение
<?php get_template_part( 'logout-section' ); ?>

<?php endif; ?>

Форма авторизации

<form name="loginform" id="loginform" action="<?php echo esc_url( home_url( '/' ) ); ?>/wp-login.php" method="post">

<input type="text" name="log" id="user_login" class="input" value="" size="20" tabindex="10" placeholder="Логин" />
<input type="password" name="pwd" id="user_pass" class="input" value="" size="20" tabindex="20" placeholder="Пароль" />

<p class="login-remember"><label><input name="rememberme" type="checkbox" id="rememberme" value="forever" tabindex="90" /> Запомнить меня</label></p>

<button type="submit" name="wp-submit" id="wp-submit" class="button-primary" value="Войти"><i class="fa fa-sign-in" aria-hidden="true"></i> Войти</button>
<input type="hidden" name="redirect_to" value="<?php echo esc_url( get_permalink() ); ?>" />

</form>

CSS стили формы авторизации

#loginform {
    background-color: whitesmoke;
    padding: 35px;
    box-shadow: 0px 0px 4px #000;
    border-radius: 4px;
}

#loginform #user_login, #loginform #user_pass {
    width: 100%;
    margin: 5px 0;
    padding: 10px;
    box-sizing: border-box;
}

.login-remember {
    line-height: 12px;
    margin: 10px;
}

#rememberme {
    float: left;
    margin-right: 5px;
    margin-left: 35px;
}

#loginform #wp-submit {
    width: 100%;
    margin: 10px 0;
    padding: 10px;
    box-sizing: border-box;
    background-color: #FFEB3B;
    cursor: pointer;
}

#post-content #loginform {
background: none;
width: 40%;
margin: 0 auto;
box-shadow: none;
}

Ссылка на страницу автора

Сделаем (в шапке) блок для авторизации или для захода в личный кабинет для авторизованных пользователей

<div  id="login-area">

<?php if ( is_user_logged_in() ) { ?>

<?php
global $current_user;
get_currentuserinfo();
?>

<a href="<?php echo wp_logout_url( get_permalink() ); ?>"><p><i class="fa fa-sign-out" aria-hidden="true"></i> Выйти</p></a>

<a href="<?php echo get_option('siteurl'); ?>/author/<?php echo $current_user->user_login; ?>" title="Личный кабинет">

<p><strong><?php echo $current_user->user_login; ?></strong> (<?php echo count_user_posts( $current_user->ID ); ?>)</p>
<?php echo get_avatar($current_user->ID, 50); ?>

</a>

<?php } else {?>


<a id="login-form-btn"><p><i class="fa fa-sign-in" aria-hidden="true"></i> Войти</p></a>
<a href="<?php echo get_option('siteurl'); ?>/wp-login.php?action=register"><p><i class="fa fa-check-square-o" aria-hidden="true"></i> Авторизация</p></a>
<?php }?>

</div>

При нажатии на пункт Аторизация (если посетитель не авторизован) появляется всплывающее окно с формой авторизации:

<div class="popup login-form">
<p class="popup-title">Авторизация</p>
<form name="loginform" id="loginform" action="<?php echo esc_url( home_url( '/' ) ); ?>/wp-login.php" method="post">

<input type="text" name="log" id="user_login" class="input" value="" size="20" tabindex="10" placeholder="Логин" />
<input type="password" name="pwd" id="user_pass" class="input" value="" size="20" tabindex="20" placeholder="Пароль" />

<p class="login-remember"><label><input name="rememberme" type="checkbox" id="rememberme" value="forever" tabindex="90" /> Запомнить меня</label></p>

<button type="submit" name="wp-submit" id="wp-submit" class="button-primary" value="Войти"><i class="fa fa-sign-in" aria-hidden="true"></i> Войти</button>
<input type="hidden" name="redirect_to" value="<?php echo esc_url( get_permalink() ); ?>" />

</form>
</div>

CSS для данного всплывающего окна

.login-form {
    width: 300px;
    height: 300px;
    margin-top: -150px;
    margin-left: -150px;
}

Скрипт всплывающего окна с формой авторизации

//Всплывающая форма авторизации  
  
$('#login-form-btn').click(function() {
	
$('.login-form').show();

$('.popup').removeClass('animated fadeOutDown');  
$('.popup').addClass('animated fadeInDown');
$('#backfon').show(); 
$('#backfon').removeClass('fadeOut');  
$('#backfon').addClass('animated fadeIn');  
 
});