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.

Site Meta HTML

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">
/* <![CDATA[ */
jQuery(document).ready(function(){
	// Hide the site-meta panel
	jQuery('#meta-panel').hide();
	
	// Toggle site-meta panel visibility 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.

Site Meta animation

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.

22 thoughts on “A Better Spot for The WordPress Meta

  1. Maybe more useful than the goat eating leaves.

    Hey, maybe you should get that animation pasted onto a coffee mug, you know, for your burial, and for posterity. Who knows what will be remembered from today, in 5,000 years?

    Thanks for the plug!

  2. Jeremy says:

    Maybe I just need it as basic as possible, but I think that should be

    function nfoppr_add_js_libs() {
    wp_enqueue_script(‘jquery’);
    }

    Anyway, thanks for the great post! This helped a lot.

  3. Thanks for the code. Not being familiar with web coding, is there an easy way to align the handle to the left side of the screen instead of centered?

  4. Peter says:

    Hi,
    I added this to the theme I’m using like it’s added to thematic. The background image nor the panel image don’t show up. I just get the text “Site Meta.” Any idea as to why? I changed the images in sitemeta.css to the proper folder for the theme I’m working with, etc.
    thanks,
    Peter

  5. Peter says:

    Figured it out. It wasn’t loading the css file when I used @import in my primary css file. Another question though, can the image be closer to the top of the page (like margintop: 0px) somehow?
    thanks again,
    Peter

  6. Hey, Thanks for this…I am having a little malfunction and I am sure it is no biggie…the menu is there ((www.highrankingseo.net) but I can only see it drop down when I refresh, then it just jumps back up into hiding…what am I doing wrong? I did exactly what you said and it just won’t drop down when I click anywhere (or on the tab)

  7. Pingback: 11 Trik WordPress Conditional Tags

      • craig says:

        @Ian_Stewart thanks.

        i’m getting lots of people registering but then they don’t place a comment. i assume they see ‘register’ and think this will get them email updates or similar.

        can you give me examples of what else i could setup for them?

  8. Lute says:

    Hi dude! I really appreciate the tip, just one thing; I have no clue what your talking about. I know what your thinking: What kind of idiot can’t understand this? Well, Im a 5th grader trying to use WordPress!!! LOL!

  9. take a look at my “fork” of WordPress Meta :D – the background it’s totally transparent, it’s placed in the upper-right corner and it’s not fixed. what do you think? I love it :D

  10. Ant Gray says:

    1. scripts inside page are bad, external js file is better (because it caches);
    2. What? One more click for logout button? Creating dropdown for menu with just 2 or 3 elements is bad idea.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s