Make WordPress Admin Bar a Sidebar

At least since WordPress released version 3 of its open source website CMS it has included a new feature called the “Admin Bar”. This Admin Bar is a menu bar displayed at the top of your WordPress site’s public-facing pages when you are logged in to your site. It is a handy way to move back-and-forth between your public pages and your site administration pages. (see fig. 1)

Sometimes this isn’t a good solution. Especially if the navigation on the public site is at the top of the page with fixed positioning. In that case the admin bar lays over the site’s actual navigation, making impossible to use while logged in.

I haven’t seen a lot of discussion online about how to customize this without installing another plugin. After attempting some tweaks by manipulating the CSS with Firebug it became apparent that this Admin Bar could easily be styled by simply adding CSS rules that apply to the end of your theme’s stylesheet.

On a recent project I developed some CSS style rules to add to your site theme’s style.css file. These styles will transform the long, horizontal admin bar into tall sidebar. This probably won’t work for a 1024px-wide screen, but for many widescreen laptops and displays this should work well.

It still has the default WordPress admin look so I figured this little bit of CSS might be helpful to others. Below is the CSS that I used to make the Admin Bar appear as it does in fig. 2.

/* WordPress Admin Bar Styles */
div#wpadminbar {
    width:120px;
    min-width:120px;
    height:100%;
    background:url('/wp-admin/images/menu-shadow.png') repeat-y top right #737373;
    border-right:solid 1px #999;
}
div#wpadminbar ul li {
    width:100%;
}
div#wpadminbar .quicklinks > ul > li > a {
    border-width:0 0 1px 0;
}
div#wpadminbar .quicklinks li#wp-admin-bar-my-account-with-avatar ul,
div#wpadminbar ul li.menupop ul {
    z-index:1000;
    margin-top:-28px;
    left:114px;
}
#wpadminbar .quicklinks .menupop ul {
    border-top:1px solid #DFDFDF;
}
div#wpadminbar div#adminbarsearch-wrap {
    display:none;
}

I make no guarantees, but do let me know if this worked for you or if you see any problem areas.