Niponwave

In this tutorial I will show you how you can create a cool member bar on your Thesis site that will:

1. Show a login link to visitors who are not logged in
2. Upon logging in, redirects users to the same page they were on
3. Show logout link to logged in users
4. Show links to dashboard, user profile and so on
5. Show gravatar of the logged in user

Coolness aside, it is a great way to present the more frequently used admin links right on the frontend so that the casual contributor doesn’t have to find his way out through a complicated dashboard interface! This is particularly useful for multi-author blogs.

I prefer to place the member links at the very top, in the Thesis header above the navigation menu, as seen on Bong Buzz. With the following code you can achieve that. You may also want to place it in the sidebar or footer for which you need to call the function in the appropriate hook - should be easy if you are acquainted with Thesis hooks - and modify the HTML and CSS accordingly. You can also add a welcome message to greet your users once they log in.

Although this guide is written keeping Thesis users in mind, it is applicable to any WordPress theme as well. A generalised code for any WordPress theme is given at the end of this post.

Let’s start defining a function and name it ‘memberbar’.


function memberbar() {
if ( is_user_logged_in() ) { ?>
<ul class="login">
<?php global $user_email;
echo get_avatar($user_email, 13);?>
<li><a href="/wp-admin/profile.php" title="User Profile"><?php  global $current_user;
get_currentuserinfo();
echo($current_user->user_firstname . " " . $current_user->user_lastname . "");
?></a></li>
<li><a href="/wp-admin/post-new.php" title="Write New Post">Write</a></li>
<li><a href="/wp-admin/" title="Dashboard">Dashboard</a></li>
<li class="noborder"><a href="<?php echo wp_logout_url( get_permalink() ); ?>" title="Logout">Logout</a></li>
</ul>
<?php
} else {
?>
<ul class="login"><li class="noborder"><a href="<?php echo wp_login_url( get_permalink() ); ?>" title="Login">Login</a></li></ul>
<?php }
}

Now you call the funtion ‘login’ we just created anywhere you wish the member bar to appear. Pretty neat, right?

function top_nav_menu() {?>
<div id="top_nav_menu">
<ul>
<li><a href="<?php echo get_bloginfo ('url'); ?>" title="Home">Home</a></li>
</ul>
<?php memberbar(); ?>
</div>
<?php
}
add_action('thesis_hook_before_header', 'top_nav_menu');

I am quoting the relevant portions from my CSS which will give you a member login bar similar to the one on bongbuzz.net. You should modify it as per your need, especially the measurements.


#top_nav_menu {
height:27px;
}
#top_nav_menu ul {
list-style-image:none;
list-style-type:none;
margin:0;
padding-top:7px;
padding-left:5px;
float:left;
}
#top_nav_menu li {
border-right: 1px solid #aaa;
display: inline;
text-decoration:none;
}
#top_nav_menu ul.login {
padding-left:0;
float:right;
padding-right:5px;
}
#top_nav_menu li.noborder
{
border-right: 0px;
}
#top_nav_menu li a {
padding:0 10px;
}
#top_nav_menu li a:hover {
text-decoration:underline;
}


Code for WordPress themes in general:

<div id="top_nav_menu">
<ul>
<li><a href="<?php echo get_bloginfo ('url'); ?>" title="Home">Home</a></li>
</ul>
<?php if ( is_user_logged_in() ) { ?>
<ul class="login">
<?php global $user_email;
echo get_avatar($user_email, 13);?>
<li><a href="/wp-admin/profile.php" title="User Profile"><?php  global $current_user;
get_currentuserinfo();
echo($current_user->user_firstname . " " . $current_user->user_lastname . "");
?></a></li>
<li><a href="/wp-admin/post-new.php" title="Write New Post">Write</a></li>
<li><a href="/wp-admin/" title="Dashboard">Dashboard</a></li>
<li class="noborder"><a href="<?php echo wp_logout_url( get_permalink() ); ?>" title="Logout">Logout</a></li>
</ul>
<?php
} else {
?>
<ul class="login"><li class="noborder"><a href="<?php echo wp_login_url( get_permalink() ); ?>" title="Login">Login</a></li></ul>
<?php } ?>
</div>

Warning: Direct copy-pasting of code from this page can give you invalid characters.

Hope you find this useful.