Делаем штатными средствами 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: 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;}

.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; background: #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');  
});

Поделиться в соц. сетях: