When you visit the site, you can see our nifty login/out and register box at the top of the page. Go ahead, take a peak! See it there? Cool! I wanted to add that into my theme, make it easy to move from site to site, and between themes. Let’s take a peak and see how that’s done!

Just as a note up front, these techniques are pretty simple. But once you get a handle on a few things here, you can recycle bits and pieces of this info to do a whole bunch of other stuff. I’m going to start off by saying that the code I am putting here can go into functions.php… but I am putting it into my functionality plugin. Here’s the gig, all of my websites use the same colour scheme, and when 2012 gets released and I use it on VoodooPress, it will use the same colour scheme. So I want to use this exact same login box all the time for consistency.

While this code would work in functions.php… it doesn’t make much sense. You would need to edit header.php to insert the template tag we are creating… might as well just code the whole login box directly into header.php rather than making a function and then calling it.

What I’m showing here is pretty specific to my needs. You may need something similar, or you may be able to just pull some knowledge out of what I’m doing here to help you accomplish something!

Let’s take a look at the code I used to make this box:

function voodoo_register_bar() { ?>
<?php if( ! is_user_logged_in() ) { ?>
<div id="reg-wrap">
<?php } else { ?>
<div id="reg-wrap-in">
<?php } ?>
	<div id="voodoo-reg">
		<?php
		$voodooredir = htmlspecialchars($_SERVER['REQUEST_URI']);
		$loginoutlink = wp_loginout($voodooredir, false);
		$items .= '<span>'. $loginoutlink .'</span>';
		if( ! is_user_logged_in() ) {
			echo $items . ' or <span><a href="' . home_url( '/' ) . 'join-voodoopress">Join VoodooPress.</a></span>';
		} else {
			echo $items;
		} ?>
	</div>
</div>
<?php }

The best way I could think of to put this bar up at the top, and have it work nearly universally on any well coded theme, was to absolutely position it through css at the top of the screen. That explains lines 2-5 here. I always use the admin toolbar, I love it! But, it’s absolutely positioned up there too. So if we don’t do things right here, our admin toolbar and login box will fight each other (I think my login box could totally take the toolbar).

So we have a conditional to swap out divs based on logged in status, to bump down our login box as needed. I guess I should also mention that on line 1, we just name our function! This is the template tag we call later to show the box.

Line 7 sets up our redirect URL, this is going to be used to redirect the user to whatever page/post they were on before they decided to log in/out. Line 8 we just assign wp_loginout with our redirect to the variable $loginoutlink, which we will use next!

Line 8 puts the $loginout variable inside of the necessary markup, and assigns that to $items. What’s with all the variables? Well for me, I like to break things up and keep my code clean, rather than put a function inside a function, etc. I tend to break things up so I can remember what all is going on later.

Line 13 is going to be a bit different for you than what I have here. I have a custom registration page using Gravity Forms, and I have the normal registration form turned off. So here, I set it up so that if a user is not logged in, we display $items (our login link) and then a link to my registration page. You should use a URL to your registration page, probably using wp_register in a similar manner as we used wp_loginout.

That portion you’ll notice, is wrapped in a conditional checking again if the user is logged in or out. If they are logged in, we don’t give our registration page, we just provide $items, which again is wp_loginout, The great thing about wp_loginout is that you get a login link or a logout link appropriately, depending on if you are logged in or not.

So, nothing too complicated here. We’ve got us some links! Of course, they don’t do a thing yet. We haven’t styled them, and of course, they only live in our plugin right now. We need to place them in our theme! On to styling!

OK, maybe not quite to the styling yet…. we need to load our styles. We could put all of our css into style.css of course, if we were hardcoding the login box into our theme. But if you remember earlier, I need to keep this thing as portable as possible. So I have a plugin stylesheet I use! Here’s how to do that!

First, I made a blank file named voodoo-func.css and put it into my directory. At the top of my plugin (under the plugin header) I have this:

// SET OUR PLUGIN CONSTANTS
define( 'VP_URL', plugin_dir_url(__FILE__) );
define( 'VP_PATH', plugin_dir_path(__FILE__) );

// LOAD IN OUR WIDGET STYLES
function vp_func_style() {
	$vpStyleUrl = VP_URL . 'voodoo-func.css';
	$vpStyleFile = VP_PATH . 'voodoo-func.css';
	if ( file_exists($vpStyleFile) ) {
		wp_register_style('vpStyleSheets', $vpStyleUrl);
		wp_enqueue_style( 'vpStyleSheets');
	}
}
add_action('wp_print_styles', 'vp_func_style');

You may recognize those constants at the top from the functionality plugin tutorial I linked earlier. I define the URL and the path to my plugin directory as VP_URL and VP_PATH for ease of use. So the next thing I do is set up a couple of variables $vpStyleUrl and $vpStyleFile which take those original constants, and add on the name of my stylesheet. So now I have variables which are set to the full URL and path to my plugin stylesheet for usage when I need em!

The next thing we do is make sure the stylesheet exists, and then we register and enqueue the stylesheet so it gets loaded up in the front end. Then we just tack on our function to wp_print_styles and we are off to the races. Our vpStyleSheets loads up in the header when we visit our site.

All that work…. and still nothing! Well, the thing here is, you gotta edit your theme to display this. The whole reason I put this in my plugin was so that I could call it in any theme reliably. So, to call it is simple. I just drop in the template tag we made right after the opening body tag, like this:

<body <?php body_class(); ?>>

<?php if ( function_exists( 'voodoo_register_bar' ) ) {
	voodoo_register_bar();
} ?>

<div id="page" class="hfeed">

We need to check to make sure our function exists. That way if we turn off our plugin for any reason, the whole site doesn’t crash. Then we just call it. On the majority of themes I’ve used this always works. If your theme does something goofy with absolute positioning or somethig, it may not work reliably.

OK, now just for fun, we’ll include my styling. Just in case you like that box and want to base something on it!

#reg-wrap {
	position: absolute;
	top: 0;
	width: 100%;
	min-height: 1px;
}
#reg-wrap-in {
	position: absolute;
	top: 28px;
	width: 100%;
	min-height: 1px;
}
#voodoo-reg {
	float: right;
	width: 300px;
	margin: 0.5em 4em 0 0;
	background-color: #9e9786;
	background-color: rgba(158, 151, 134, 0.8);
	background-image: url("http://voodoopress.com/wp-content/themes/voodoochild2011/images/voodoosprite.png");
	background-position: -10px -66.5px;
	background-repeat: no-repeat;
	padding: 5px 0 5px 3em;
	font-size: 1.275em;
	text-indent: 30px;
	border: 4px double #fff;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	-o-border-radius: 7px;
	border-radius: 7px;
	-webkit-box-shadow: 5px 5px 12px rgba(64, 31, 31, 0.5);
	-moz-box-shadow: 5px 5px 12px rgba(64, 31, 31, 0.5);
	box-shadow: 5px 5px 12px rgba(64, 31, 31, 0.5);
	color: #666;
	color: rgba(0, 0, 0, 0.6);
	text-shadow: 0 1px 1px #fff;
}
#voodoo-reg span {
	font-weight: bold;
	color: #666;
	color: rgba(0, 0, 0, 0.6);
	text-shadow: 0 1px 1px #fff;
}

The first 2 entries there are the different divs we set up to bumb down the box depending if the user is logged in or not. We then style the box, add a bg image, and bump the text in a bit to allow for my icon to sit pretty. We also give a little bit of shadow and a double border. Finally, just a little fun with the text.

That’s how we set up the login box. I hope we at least gave you some fun concepts here to play with!