Customize admin menu colors in WordPress 3.2 (the easy way)
The updates to the admin UI in WordPress 3.2 are pretty great. I love the new interface. The only thing I didn’t love was the loss of the blocky header and footer of the admin section—that was the easiest and fastest way to customize the look of the admin area for client’s sites (or for fun). With the admin menu being separated from the rest of the page in version 3.2, though, I can customize the colors of that instead, and it still looks pretty darn slick.
It looks simple enough, but when you take a closer look at the CSS (or just at the menu itself) you realize there are lots of different elements colors need to be applied to:
- Menu background
- Menu header borders
- Menu header link text
- Separators
- Selected background
- Selected header borders
- Selected header link text
- Selected header text shadow
And to account for minimized menus with pop-out submenus:
- Pop-out menu headers
- Pop-out menu borders
- Pop-out menu header link text
- Selected pop-out menu header
- Selected pop-out menu link text
I went through and customized all of these things with simplistic colors (#069, etc.) and ended up with a pretty sweet menu. Then I wanted to change the color scheme, and I realized there were a zillion (24 actually) places I needed to change colors to make that happen.
This is by no means impossible, but it’s kind of a pain in the ass. So I did some Googling and found a great PHP script to generate CSS color variations from one base color. I had to modify the script a little (I don’t have PEAR installed on my dev server) but I ultimately got it to work.
Here’s the beginning of the stylesheet, so you can see how it works:
<?php
header( 'Content-type: text/css' );
require_once( '_inc/csscolor.php' );
$base = new CSS_Color( '3B4C7A' );
$selected = new CSS_Color( 'BB7101' );
?>
/* @group Admin Menu Coloring
----------------------------------------------- */
/* Background color of entire menu */
#adminmenuback, #adminmenuwrap, #adminmenu .wp-submenu .wp-submenu-head {
background: #<?php echo $base->bg['0']; ?>;
}
First I’m tricking the browser into thinking this PHP file is really a CSS file. I’m sneaky like that. Then I’m including the modified color script.
Next I define two colors: “base” for the overall menu look and “selected” for the current menu header.
From here on out, I can use those two variables to print variations of the original color. The script returns a “bg” component (the background color) and a “fg” component (the foreground color – white or black, depending on the shade of the background). You can go from -5 to +5 in range (see the original script’s website for a great visual example). This worked GREAT.
If you want to download the whole package (CSS/PHP file + CSS_Color class file), here you go:
WordPress 3.2 Admin Menu Custom Colors
To use it in your theme, put both of the files (admin-menu.css.php and csscolor.php) in your theme folder, and add this code to your functions.php file:
add_action( 'admin_print_styles', 'atg_slick_menu_style' );
function atg_slick_menu_style() {
wp_register_style( 'slick-admin-menu', get_bloginfo( 'stylesheet_directory' ) . '/admin-menu.css.php' );
wp_enqueue_style( 'slick-admin-menu' );
}