There have been some mutterings from people around the WordPress-o-sphere complaining about the new UI that’s appearing with WordPress 3.2. I don’t have particularly strong feelings about the design – which is perhaps what bothers me. I think I’d prefer to either love it or hate it.

Anyway, it is possible to play around with your WordPress Admin area. In fact, there is a whole page in the codex dedicated to creating admin themes. There are two main ways to do this:

• Direct editing of the wp-admin.css file from the wp-admin folder. I wouldn’t recommend doing this as you don’t really want to be messing around with core files.
• Create a plugin that tweaks your admin area.

Today I’m going to show you how to create a plugin that you can use to tweak your admin UI. Feel free to add, remove, build-upon, however you want. If you have any nice CSS you want to add let me know in the comments and I can add them to the plugin.

Here are the tweaks I’m going to make:

• Improve color contrast
• Add focus on links (for tabbing through dashboard)
• Increase size of site title and remove icons (courtesy of Otto)
• Decrease size of current page title
• Remove icon beside “Publish” on add posts page (yes, this is pre 3.2 but now I’ve noticed it I find it annoying).

1. Open Text Editor

I use NotePad++ but you can use any one you want. You need to start by adding the header information to your plugin:

<?php
Plugin Name: Admin UI Tweaks
Plugin URI: http://yourdomain.comDescription: Tweak Your WordPress 3.2 Admin UI
Author: Your name – <3 @ Otto for site title increase & icon removal
Version: 1.0
Author URI: http://yourdomain.com */

Cool! That’s the start of your new plugin!

2. Add hook, define function

Next thing we are going to do is to add an action hook and define your function. The action hook tells WordPress to do something, and we will create the function ourselves.

Note: Your function must have a unique name – I’m going to call mine siowp_admin_tweak. I don’t know any other Siobhans currently making WordPress plugins and I want to use this to tweak my admin area so I’m pretty confident that it is both unique and descriptive.

Here’s what to add:

add_action('admin_head', 'siowp_admin_tweak');
function siowp_admin_tweak() {
?>


What we’re doing is hooking our siowp_admin_tweak function to the admin_head action. This makes it kick into life when we want it, after the rest of the admin CSS is loaded so that it takes precedence.

3. Live Edit CSS

Now we can add some styles. My favourite way to edit CSS is to do it in browser with a tool like Firebug first. You can also use Chrome which has built in developer tools – when it comes to editing CSS they both work in a similar way.

With Firebug installed right click on the element you want to change and click “Inspect Element.”

A window will pop up at the bottom of your browser with all of your HTML and CSS information. If you hover over a color value, for example, a little box will appear showing the color.

You can change the color value:

And the color will appear changed, live in your browser:

Hit F5 or refresh the page to go back to the original version.

You can edit as much as you want and really transform your page without actually doing anything to it!

4. Add CSS

I’m going to make a few minor tweaks to the dashboard to make what I think are improvements.

a) Improve color contrast

The color contrast in the WordPress 3.2 UI is pretty bad and could be difficult for people with sight problems. The contrast ratio on the menu items, for example, is 4.35:1 which only meets AA standards for accessibility if it is at least 18pt or 14pt bold. However, the text is only 12px (around 9pts). I want to darken the text color on the links to improve contrast. I used this tool to make sure that it meets accessibility standards.

Here’s the CSS:

a, #adminmenu a, #poststuff #edButtonPreview, #poststuff #edButtonHTML, #the-comment-list p.comment-author strong a, #media-upload a.del-link, #media-items a.delete, .plugins a.delete, .ui-tabs-nav a {
color: #01466D;
}

Here is the difference:

b) Add focus on links

Adding focus to page elements helps people who are keyboard users tab through a webpage. At the minute the admin menu doesn’t have focus on its links so if you start tabbing through the links you quickly get lost. My fix is fairly rudimentary and could definitely be improved upon but I think it’s a start:

/*Add focus on links*/
#wphead #viewsite a:focus, #adminmenu a:focus, #adminmenu ul.wp-submenu a:focus, #the-comment-list .comment a:focus, #rightnow a:focus, #media-upload a.del-link:focus, div.dashboard-widget-submit input:focus, .subsubsub a:focus, .subsubsub a.current:focus, .ui-tabs-nav a:focus, .plugins .inactive a:focus, #all-plugins-table .plugins .inactive a:focus, #search-plugins-table .plugins .inactive a:focus {
color: #D54E21;
}
#adminmenu .wp-submenu a:focus {
background-color: #EAF2FA !important;
color: #333333 !important;
}


c) Increase the Site Title – Reduce Page Title

The site title in the UI gets totally lost. This is particularly problematic if you are working in Multisite and you want to quickly know where you are. I think (and others do too, that the site title should be larger than the page name. Otto provided a quick fix to this, which I’ve edited as I still want the page title to be large (though not so large as the site title). So:

/*Increase Site Title Size (by Otto)*/
.wp-admin #wphead {
height: 42px;
}
.wp-admin #wphead h1 {
font-size: 28px;
#font-family: "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,sans-serif; #uncomment this if you want to go to the sans-serif font
}
.wp-admin #header-logo {
background-image: url("images/logo.gif");
background-size:32px 32px;
width:32px;
height:32px;
}
.wp-admin .icon32 {
display:none;
}
/*Reduce Page Heading Size*/
.wrap h2 {
font-size: 22px;
line-height: 28px;
padding: 9px 15px 2px 0;
}


d) Remove Icon Beside Publish

This has been around for a while but I think it’s a little superfluous so I’m going to remove it.

/*Remove pointless publish icon*/

.curtime #timestamp {
background-image: none;
}
.curtime #timestamp {
background-position: left top;
background-repeat: no-repeat;
padding-left: 0;
}

5. Put it all together

Here it is:

<?php
/* Plugin Name: Admin Tweaks
Plugin URI:
Description: Tweak the WordPress 3.2 Admin Theme: Thanks to Otto for Increase Site Title
Author: Siobhan
Version: 1.0
Author URI: http://wordmonkey.me
*/

add_action(‘admin_head’, ‘siowp_admin_tweak’);
function siowp_admin_tweak() {

?>

<style>
/*Improve Color Contrast*/

a, #adminmenu a, #poststuff #edButtonPreview, #poststuff #edButtonHTML, #the-comment-list p.comment-author strong a, #media-upload a.del-link, #media-items a.delete, .plugins a.delete, .ui-tabs-nav a {
color: #01466D;
}
/*Add focus on links*/

#wphead #viewsite a:focus, #adminmenu a:focus, #adminmenu ul.wp-submenu a:focus, #the-comment-list .comment a:focus, #rightnow a:focus, #media-upload a.del-link:focus, div.dashboard-widget-submit input:focus, .subsubsub a:focus, .subsubsub a.current:focus, .ui-tabs-nav a:focus, .plugins .inactive a:focus, #all-plugins-table .plugins .inactive a:focus, #search-plugins-table .plugins .inactive a:focus {
color: #D54E21;
}
#adminmenu .wp-submenu a:focus {
background-color: #EAF2FA !important;
color: #333333 !important;
}
/*Increase Site Title Size (by Otto)*/
.wp-admin #wphead {
height: 42px;}
.wp-admin #wphead h1 {
font-size: 28px;
#font-family: "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,sans-serif; #uncomment this if you want to go to the sans-serif font
}
.wp-admin #header-logo {
background-image: url("images/logo.gif");
background-size:32px 32px;
width:32px; height:32px;
}
.wp-admin .icon32 {
display:none;}

/*Reduce Page Heading Size*/

.wrap h2 {
font-size: 22px;
line-height: 28px;
padding: 9px 15px 2px 0;
}

/*Remove pointless publish icon*/

.curtime #timestamp {
background-image: none;
}
.curtime #timestamp {
background-position: left top;
background-repeat: no-repeat;
padding-left: 0;
}
</style>

<?php

}

Upload the plugin to your plugins folder, activate and you’ll see the changes.

The differences are definitely subtle but I think that they are improvements. This is really a demonstration to show what you can achieve with this simple plugin.

Got anything you’d like to add? Let me know in the comments and I can put in extra tweaks that we can all enjoy!

Feature pic CC Will Reign