#theme

Customizing WordPress 2.5’s Admin Panel

While I was poking around in a pre-release version of WordPress 2.5 (which has been slightly delayed for actual release), I found out that the Admin panel (everything under /wp-admin/) is now pretty easily customizable through CSS.

Basically what they’ve done is extracted all the color-based information from the admin CSS files, and put them into pluggable files called “Admin Color Schemes”. The cool bit is that it looks really easy to add your own! It looks like the Admin Color Scheme is one of the last (core) stylesheets loaded into a page as well, which means you’re really not limited to only changing the colors.

So how do you do it? Here we go:

  1. Download this plugin: WP Admin Color Schemer 1.0
  2. Install and enable the plugin, which will look for CSS files inside its own “/schemes/” directory (/wp-content/plugins/wp-admin-color-schemer/schemes/*.css).
  3. Create your own CSS file and drop it in that directory. The filename of the CSS file should be a lower-case, letters/numbers only, dash-separated version of the name of the scheme. For example, a scheme called “Billy’s Amazing Scheme” would be in a file named “billy-s-amazing-scheme.css” (replace everything that isn’t a letter or a number with a dash, but only ever have a single dash at a time). Make sure the first line looks like this (with “My Admin Scheme” being the name you want to give your scheme, and each hex value representing one of the main colors used in your CSS palette. This must be the first line of the CSS file, be commented out as below, and must contain commas, but the spaces are optional):
/* My Admin Scheme, #000000, #111111, #222222, #333333 */

Once you’ve done that, go to your profile page within the Admin Panel, and you’ll see your new scheme and should be able to easily select it. When you hit the Update button, your Admin Panel should take on the new colors immediately.

If you’d like to use one of the built-in Admin Color Schemes as a starting point, then they live at /wp-admin/css/colors-classic.css and colors-fresh.css.

Now you can easily style your Admin Panel to match the rest of your site (and hopefully Theme authors out there will start packaging Admin Color Schemes to match their Themes).