WordPress 3.1 Admin Menus — Fixed!

Bookmark and Share
   Posted by: BJ Johnson in hacks, WordPress
wp-logo-sq130
This entry is part of a series: Fixed Admin Menus — Gestation of a Plugin »

Admin Menus Fixed — THe HaCk

Not that they were necessarily broken... well, there is room for improvement, but I mean "fixed" in the sense of the word meaning not moving. I have long used a most excellent plugin designed to make WordPress Admin's lives easier by consolidating the backend Admin Menu that normally runs down a column on the left side of the screen into a thin bar across the top of the screen. It is authored by Ozh and can be found in the WordPress Plugin Directory. It is called the Ozh' Admin Drop Down Menu and it has saved me lots of hours and lots of clicking as I admin two Multisite installs.

The only thing that has been missing all this time is that the Drop Down menu scrolls with the page. It would make my day so much more efficient if I didn't have to keep scrolling back up in order to navigate to another section of the site or to another site in my network. I suggested this as an enhancement to the plugin many versions ago but none came along. So, being pretty good at innovative code, problem solving, having thought of writing a plugin one day myself, and knowing that one should get their first exposure to that by understanding an existing plugin, I decided to see what I could do.

Lots of trial and error finally distilled down to a remarkably simple set of edits (isn't that always the way?) to only the plugin CSS code. Didn't require working any PHP at all, although I got in there a few times looking for elusive solutions. I've had this running I think as far back as WPMu v2.7 up through v3.0.5. WP v3.1 is another story which we'll get into later on. It takes a bit of file editing but nothing scary. Remember to keep an original, just in case. You never know...

Locate the adminmenu.css.php file found in the plugin's /inc folder.

For WordPress v3.0.x and earlier, using Ozh' Admin Drop Down Menu version 3.4.5 and earlier, find this section:
#screen-meta {
  display:none; /*hidden in case we have no JS to move it*/
}
/* Styles for our new menu */
#ozhmenu_wrap {
  z-index:43000;
  overflow:hidden; 
  width:100%;
  clear:both;
}

and repalce it with this:

#screen-meta {
  margin-top:25px !important;
  display:none; /*hidden in case we have no JS to move it*/
}
/* Styles for our new menu */
#ozhmenu_wrap {
  z-index:43000;
/* overflow:hidden; */
  width:100%;
  clear:both;
  position:fixed;
}

For WordPress 3.1, it got a little trickier. Placing the above code in the new version puts Ozh's menu below the light grey Admin Menu; which is below the dark grey Admin Bar. The Admin Bar is fixed but the Admin Menu scrolls with the page, so you end up with the Bar at the top, a gap and Ozh's menu fixed in space when you scroll down. Ugly and not very user friendly. In order to deal with the new Admin Bar and Admin Menu that now Borged the entire top of the screen, tame them into something actually usable; integrating Ozh's with them, I had to go into core files and modify all sorts of stuff. Once that was done, of course I then had to spend nearly as much time checking three versions of IE to see what it was [not] doing.

Until the Drop Down Menu gets a rewrite to incorporate the functionality of the Admin Menu, it must remain active. Without it, Multisite Admins have no way of getting to the Network Admin screens. But it's bloated. So, I thinned the vertical size of the Admin Menu and condensed the contents, so that it doesn't consume so much vertical space. Now all three fit in nearly the same space as the original two.

Once I had something that operated efficiently and looked good in as little screen real estate as possible, I created an override set of CSS that goes into the plugin's file and returned the core files to their original state. This prevents losing these edits when a WP version upgrade comes down the pipe.

Using plugin version 3.4.99 that is for WordPress v3.1, add this section to adminmenu.css.php just before the line:

/* Style for Ozh's Admin Drop Down Menu */
/* WP3.1 Core CSS Overrides for Fixed Admin Menus */
/* by B.E.Johnson (spherical) | http://sphericalmagic.com/ */

#wpcontent {
  margin-top:80px ! important;
}
#user_info {
  line-height:24px ! important;
  height:24px ! important;
}
#user_info p {
  line-height:24px ! important;
}
#wphead {
  height:26px ! important;
  width:100% ! important;
  position:fixed ! important;
  top:28px ! important;
  z-index:10 ! important;
}
#header-logo {
  margin:-5px 0 -6px 15px ! important;
}
#wphead h1 {
  padding:0 8px 5px ! important;
}
#wphead h1.long-title {
  padding:2px 10px ! important;
}
#wpbody-content .metabox-holder {
  padding-top:0px ! important;
}
/* End WP3.1 Core CSS Overrides for Fixed Admin Menus */

Then a few lines farther down, find this section:

/* Styles for our new menu */
#ozhmenu_wrap {
  z-index:43000;
  overflow:hidden;
  width:100%;
  clear:both;
}

and change it to:

/* Styles for our new menu */
#ozhmenu_wrap {
  z-index:43000;
/* overflow:hidden; */
  width:100%;
  clear:both;
  position:fixed;
  top:28px;
}

Upload your edited file overwriting the original (you DID save a copy, yes?) and reload your Admin. Here's what it does:

Fixed Admin Menus - Left
Fixed Admin Menus - Right

I kept the darker grey Admin Bar. I like the My Sites menu and can't wait until that is in the Drop Down as well. The other menus in it are redundant with the plugin running; but that enhancement will have to wait for another day. If you turn it off, then this code needs another edit. In the code just above, set the #ozhmenu_wrap { top:28px; } to 0px and the Drop down will stick to the top.

There are undoubtedly other ways of doing this and this hack probably won't last very long anyway. The plugin will eventually pull all of the new menus into its hierarchy and all of this will be history; but we'll get our screens back. Ozh, if you'd like to incorporate some of these techniques, I'd be honored.

This hack, with enhanced features, has now been packaged into a companion plugin (my first), at the gracious suggestion of Ozh (see his comment, below) and is now available on the WordPress.org Plugin Directory.

If you find this code useful on your own blog or have developed a solution that you like, please enter a comment. And, if you'd like to help a real starving artist, please buy us some cat food for our Bengal and Maine Coon rescues. Thank You.


Related Posts...

RSS-CommentsYou can follow responses to this entry through the Comments Feed. You can skip to the end and leave a response. Pinging is currently not allowed.

4 Responses to WordPress 3.1 Admin Menus — Fixed!

Ozh
  

Neat hack!
Instead of hacking core files, I'd suggest making a companion plugin and output your modified CSS within the head. This way, no losing hack when you update :)

March 1, 2011 at 2:11 pm
Reply
    B.E. Johnson
      

    Hi Ozh! Great to meet you.

    Thanks! Coming from you, that's an honor and a boost I really needed today. Love your work.

    I only hacked the core files temporarily to see what was preventing me from doing what I wanted. I was going to leave them that way and just modify new ones when WP upgrades come along but when Leopard-Lady and headelf began asking about fixing the menu position, I decided it was time to take it a step further; see if I could get the core hacks to stick in an external CSS via the !important flag and, if successful, publish my findings. I've kept this to myself long enough. Time to give back.

    Guess my next step is to learn how to go about making a companion plugin. Thanks for your encouragement.

    BJ

    March 1, 2011 at 3:06 pm
    Reply
John Asbacher
  

WP 3.5 / latest dropdown menu
On google play this app...
WordPress Automattic, Inc
WordPress for Android
https://play.google.com/store/apps/details?id=org.wordpress.android&feature=search_result#?t=W251bGwsMSwxLDEsIm9yZy53b3JkcHJlc3MuYW5kcm9pZCJd
This app shows a very screwed up version of your dropdown menu.
I have a screen grab that you can see and I'm willing to test out / try any mods you come up with.
Your menu items "go off the right hand of the screen" and are inaccessible. (no scrolling possible)
A simple fix may be to disable your menu for this app?
I don't know where to begin to do such things.

January 11, 2013 at 4:05 pm
Reply
    BJ
      

    The DropDown Menu is not mine. I only create the Fixed capability for it, the WP Toolbar and the standard WP Admin menu.

    January 13, 2013 at 2:43 am
    Reply
Post Your Response:

Leave a Reply

Your email address will not be published. Required fields are marked *

HTML tags are not allowed.


Comment On Facebook:
 
 
Facebook Comments

Copyright © 1976-2014 The Art & Engineering of B.E.Johnson