A Better Spot for The WordPress Meta

One of the first things many new blog owners do is remove the Meta section from their sidebars. Great idea. The Meta information is almost completely useless. And I’m not the only one that thinks so.

The Meta section includes some admin links like “Login” or “XHTML Valid.” While those links might be useful for the owner of the blog, they offer no value at all for the reader. The next time you set a Wordpress blog up, start by removing the Meta section from the sidebar. Daily Blog Tips

But you know what? It’s only almost completely useless. It has two great functions; it gives you a link to your admin area from every page and it lets you logout from your blog. Pretty handy when you’re on a public computer. How can we fix this up so we don’t look amateurish and still retain the useful functionality? Easy! Conditional tags and Javascript.

Well, kinda easy. If you want to implement this on your blog you’ll have to do some fiddling around with your theme. No guarantees that the following technique won’t make your site explode.

Here’s what we want to do. Only show the login block to logged-in users and while we’re at it take the whole thing out of the sidebar and put it somewhere really useful: in a sliding panel that drops down from the top of the page with a click, wherever you are on the page.

First a little XHTML and some WordPress template tags. You’ll probably want to add this above your header (it really depends on your theme).

<?php if (is_user_logged_in()) { ?>
<div id="site-meta">
<div id="meta-panel">
<ul>
<?php wp_register() ?>
<li><?php wp_loginout() ?></li>
</ul>
</div>
<a href="" id="meta-anchor">Site Meta</a>
</div>
<?php } ?>

What this bit of code does is setup a little list of two links only available to logged-in visitors; a link to the site admin (<?php wp_register() ?>) and a logout link (<li><?php wp_loginout() ?></li>). All wrapped up in some horribly un-semantic divs with a link to nowhere (<a href="" id="meta-anchor">Site Meta</a>). Perfect.

Here’s what you should be looking at if you’re logged-in to your blog.

Not very exciting is it? What we need now is some CSS and Javascript, jQuery to be precise. Add the following to your themes functions.php file if it’s not already there. This will make the jQuery Javascript framework that ships with WordPress available to your theme.

// load jQuery
 wp_enqueue_script('jquery');

I’d put it somewhere near the bottom or top (but not on the first or last line). Now for some CSS.

#site-meta {
position:fixed;
width:100%;
z-index:1000;
}
#site-meta li {
display:inline;
}
#meta-panel {
background: #EEE;
}
#meta-panel ul {
width:960px;
margin:0 auto;
padding:36px 0;
text-align:center;
}
#meta-anchor {
display:block;
margin:0 auto;
background:#EEE;
width:50px;
text-indent:-999em;
outline:0;
 }

And a jQuery function (). Add this to your head section after <?php wp_head() ?>. My thanks to Web Designer Wall’s, jQuery Tutorials for Designers for giving me a leg up on the jQuery.

<script type="text/javascript">
jQuery(document).ready(function(){
// Hide the site-meta panel
 jQuery('#meta-panel').hide();

// Toggle site-meta panel visibilty and class when handle is clicked
jQuery('#meta-anchor').click(function() {
jQuery('#meta-panel').slideToggle(50);
jQuery(this).toggleClass("active");
return false;
} );
});
 </script>

And here’s a quick animation showing what we get. It’s no goat eating leaves, but it gets the job done.

The CSS isn’t very exciting either, but it should give you a good foundation to make something very cool. It fixes our little tab and hidden meta panel to the top of the screen (in proper browsers). Wherever you scroll, there it is, waiting to take you to your admin page or log you out. Got some other links you like handy access to? Throw more <li> items in there and you’ve got easy access to them.

If you find this tip useful, if you’ve got a better way of doing this, or if it makes your computer smoke, let me know in the comments.

Although if your computer is smoking, you might want to call the Fire Department first.