WordPress User Experience: Dynamic Log in, Log Out
Posted by Brock Nunn | Tutorial, WordPress | One CommentWe build websites with the user in mind. That statement may seem far too obvious but so often designers and developers can overlook the little things when it comes to good user experience design. Good user interface design is a simple concept if you take the time to think it through, take a step back and ask yourself “If this were my first time viewing this site… would I know what to do?” If the answer is no, then it is time to get to work on your user interface.
This topic stems from real world inspiration while working on a new Untame project that we will be unveiling very soon. Our goal is for users to experience this new site in a very personal way, and we are going to lengths to tailor the experience to be accessible and enjoyable throughout. This means acknowledging the presence of the signed-in user on each page. This is actually pretty easy to reflect in markup for any theme. Therefore, we have used some neat PHP techniques to create a dyncamic log in or log out area for our theme. (You can place this code almost anywhere within a theme. I have chosen to place it in the header.php)
Logged In View
Logged Out View
At its core, our request is really no more difficult than an if/then statement. Once a user loads up our site we simply ask that if the user has already logged in, then display one set of data. However, if a user is not logged in, we want to provide a way for them to do so or register for the site. Pretty simple huh? Let’s take a look at some code!
<div class="user-status">
<?php
if (is_user_logged_in()) {
$user = wp_get_current_user();
echo 'Welcome back '.$user->display_name.'! ', wp_loginout();
} else { ?>
Please <strong><?php wp_loginout(); ?></strong>
or <a href="<?php echo get_option('home'); ?>/wp-login.php?action=register"> <strong>Register</strong></a>
<?php } ?>
</div> <!-- end user status -->
Again, our code is based in simplicity and like a lot of PHP, it is fairly easy to read. At the top of our snippet, I have opened a div with a class of “user-status” this is just a simple class that I provided for styling purposes. It is entirely optional.
Next, we open up our PHP by asking “if” the user is logged in display a welcome message of “Welcome back User”. Then we provide an “else” statement for all of the cases that the user is not logged in. Within our else statement we ask that our site provide the “Please Login or Register” content. Moreover we dynamically link to that content via a few WordPress specific tags.
Below I have included the styling that I have used for the example. Please feel free to use or modify both the code and the styles in your projects as you see fit.
.user-status {
padding: 5px 15px;
border-radius: 10px;
background: #eee;
float: right;
position: relative;
right: 40px;
bottom: 15px;
border: 2px solid #ccc;
}
Sometimes it is the small things that make all of the difference. Make use of this basic technique and provide a simple but effective experience that will keep your users coming back again and again.
