How to add admin bar to your existing wordpress theme

April 16th, 2006 by Kaushal Sheth

Well this is first of the many posts that I will be writing to enable all wordpress theme developers to spice up their theme.
After all we love to give many options to our users. So lets start.

Topic for today is how to add Admin Bar to your wordpress theme

What is Admin Bar?

First of all for those who don’t know what Admin bar a small screenshot is attached with post so that you can see what it is.

So go and have a look at it

How to do I create it?

Well its really simple. Say you have created a theme or have a theme with header.php and index.php. files. You would be required to edit header.php and in some cases index.php too.

Procedure

• Open header.php and look for declaration for stylesheet ( include stylesheet for theme ). In most cases the declaration would be something like
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
• So now we need to add style alongwith userlevel conditions for our Adminbar. Here is a “Example code” which you can use.

<?php global $user_identity; get_currentuserinfo(); if ($user_identity) { ?> <style type="text/css"> /* <![CDATA[ */ #abstrakt-admin-bar { margin: 0; padding: 0; background: #5F7D38; border-bottom: 1px solid #000000; text-align: left; width: 100%; } #abstrakt-admin-bar ul { margin: 0; padding: 4px; list-style-type: none; } #abstrakt-admin-bar ul li { list-style-type: none; display: inline; margin: 0 10px; padding: 0; font-size: 1.1em; color: #ffffff; } #abstrakt-admin-bar ul li.login { margin-right: 30px; } #abstrakt-admin-bar ul li.howdy { position: absolute; right: 1em; } #abstrakt-admin-bar a { color: #ffffff; text-decoration: none;} #abstrakt-admin-bar a:hover { color: #ffffff; } /* ]]> */ </style> <?php } ?>
• So now your code alongwith earlier stylesheet declaration would be something like
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" /> <?php global $user_identity; get_currentuserinfo(); if ($user_identity) { ?> <style type="text/css"> /* <![CDATA[ */ #abstrakt-admin-bar { margin: 0; padding: 0; background: #5F7D38; border-bottom: 1px solid #000000; text-align: left; width: 100%; } #abstrakt-admin-bar ul { margin: 0; padding: 4px; list-style-type: none; } #abstrakt-admin-bar ul li { list-style-type: none; display: inline; margin: 0 10px; padding: 0; font-size: 1.1em; color: #ffffff; } #abstrakt-admin-bar ul li.login { margin-right: 30px; } #abstrakt-admin-bar ul li.howdy { position: absolute; right: 1em; } #abstrakt-admin-bar a { color: #ffffff; text-decoration: none;} #abstrakt-admin-bar a:hover { color: #ffffff; } /* ]]> */ </style> <?php } ?>
• Declaration in body.php for Adminbar to appear

Search your theme to check where is the declaration for tag defined. In most cases you would find it either in header.php or index.php

Place the following code after body tag
<body> <?php global $user_identity,$user_level; get_currentuserinfo(); if ($user_identity) { echo '<div id="abstrakt-admin-bar"><ul>'; echo "\n\t<li><a href='".get_settings('siteurl')."/wp-admin/'><strong>".__('Dashboard','abstrakt')." »</strong></a></li>"; if ($user_level >= 1) { echo '<li><a href="'.get_settings('siteurl').'/wp-admin/post.php">'.__('New Post','abstrakt').'</a></li>'; echo '<li><a href="'.get_settings('siteurl').'/wp-admin/page-new.php">'.__('New Page','abstrakt').'</a></li>'; } echo "\n\t<li class=\"howdy\">".__('Logged in as ','abstrakt')." <strong>"."<a href='".get_settings('siteurl')."/wp-admin/profile.php'>".$user_identity."</a></strong>, ["; wp_loginout(); echo "]</li>"; echo "\n</ul></div>"; } ?>

and save the the theme. Upload the files and enjoy your new Adminbar.Please note to backup your theme and data before trying this out.

Please note I have used name abstrakt since its my theme name. you can use yourthemename instead of abstrakt. Just replace all abstrakt word with yourthemename

Share and Enjoy:These icons link to social bookmarking sites where readers can share and discover new web pages.