Tweaking Admin Styles in WordPress 3.8

The most significant change you’ll notice when you spin up WordPress 3.8, is the re-styled admin dashboard, previously previewed via the MP6 plugin. Such changes always come with a degree of controversy, though most of the changes at this point are rather cosmetic. For new users the WordPress back-end can be a little overwhelming at first and while some of the changes in 3.8 have the effect of bringing clarity to the interface, there is a lot more that needs doing and some things that shouldn’t have been changed!

colors

For developers, the most significant thing to note is that the admin styles are built with SASS, something we have been using and loving for a while on various projects. What this means is that re-styling the admin with your own color scheme and branding is now easier than it has ever been. In fact before 3.8 it was almost impossible, or at least not worth the effort. This kind of flexibility is absolutely essential to the future of WordPress as it is increasingly used as the foundation for niche communities and web applications.

We’ve been playing with these feature recently ahead of the 3.8 release in order to roll out a new branded style for the churchuna platform. So I thought I’d throw together some of the tricks and tips for getting the most out of the new admin styles.

Creating Your Own Admin Color Scheme

In WordPress 3.8 users can select from one of 6 admin color schemes. They are probably not all to your taste, but the good news is that creating a new one is relatively easy. Well SASS-easy anyway!

unadash

All the files you need are found in the \wp-admin\css\colors\ folder of WordPress. You need to use SASS to make your own. Alternatively, you may want to download the Admin Color Schemes plugin which will load another 8 ready-made color schemes into your dashboard. This plugin also comes with a great little Grunt set-up, for those that know about such things, that will get you going making your own and automate the build process. Using Grunt is a tutorial all of its own though!

But seriously with SASS, creating an entire new color scheme involves editing just 4 lines of code:

$base-color: #1e2a29;
$highlight-color: darken(  #B1D9B0, 5% );
$notification-color: #FF0000;
$action-color:  darken(  #ff6661, 5% );

@import "../admin";

I’m pretty sure there will be a plugin along soon, if not from us, that lets you build your color scheme on the fly inside the dashboard. It isn’t rocket science.

Put Separators Back In

sepsOne of the things I really didn’t like about the new styles is the lack of menu separators in the dashboard menu. I believe these bring better clarity to the interface by grouping menu items. So, we decided to put them back in our custom admin color scheme by adding the following to our color scheme SASS. Turns out that the menu separators hadn’t gone away, they are just transparent in the core styles, so all you need to do to add some definition is:

#adminmenu li.wp-menu-separator {
  background: darken(  $base-color , 10% );
}

I’d like to see these back in the default theme, because I think the new scheme has chosen style over usability. And this is the back-end, so it matters a lot.

Adding A Dashicon to a Custom Post Type

WordPress 3.8 comes with all its admin icons bundled in an icon font call Dashicons. If you are using custom post types there are a couple of new options for adding icons to the menu for the post type.

Dashicons
You can pass any of the following in the menu_icon argument of the register_post_type function function:

  • the url of an image to be used for the icon
  • a “dashicons” helper class (e.g. “dashicons-calendar”)
  • a base64-encoded SVG using a data URI string
  • ‘none’

Thanks to Mannie Schumpert for first drawing our attention to this.

Force the Default Color Scheme

Lets say you have a new branded color scheme and you want all users to use it. The following code achieves this, but you will notice that users can no longer change their color scheme.

add_filter( 'get_user_option_admin_color', 'default_colors', 5);

function default_colors() {

        global $_wp_admin_css_colors;

        if ( ! isset( $_wp_admin_css_colors[ $color_scheme ] ) ) {
            $color_scheme = 'una';
        }

        return $color_scheme;

    }

Remove Color Scheme Selector

If you force a color scheme on your users with the code above, you will undoubtedly want to remove the color scheme selector from the user profile page.

remove_action( 'admin_color_scheme_picker', 'admin_color_scheme_picker' );

Summary

I’m sure there are lots more things you’ll want to do with the new admin styles with WordPress. I’m pretty sure there will more to come with future WordPress releases, but hopefully these few little tweaks will have got you started and maybe even prompted you to learn SASS, which for a developer is heaven compared to plain old CSS.

2 thoughts on “Tweaking Admin Styles in WordPress 3.8

    • Everything you need to know is on the main SASS site: http://sass-lang.com/guide. If you know CSS already and have some small amount of programming experience then it is pretty simple.

      The scary thing for most people is that installing the tools can involve using Ruby and the command line. There are some tools like CodeKit and Compass.app that make it a little easier to get going.