WordPress 3.8 added a fresh new admin interface and I wanted to see what was necessary to customize it to my own needs.
Preparation
To make the WordPress admin UI feel more natively to my current client’s project, I am already using White Label CMS and Admin Menu Editor. I recommend both plugins to tidy up some of the more “blogish” elements of WordPress. The sites I’m building have a lot of custom post types which is why I group some of them together to form menu items similar to the front ends sectional navigation. Having the same menu structure for the sites front end as well as its admin interface makes teaching a client how to use the site more easy.
Adding Color to it
Admin color schemes have been promoted in WordPress 3.8 to change the visuals of the admin more drastically. Sarah Gooding already wrote about the newly introduced schemes, so I’m only going to cover it here briefly.
Admin Color Schemes is a plugin that extends the eight built-in color schemes with eight more.
I took a closer look at the plugin and identified the wp_admin_css_color() function, that is responsible for adding a new color scheme. It’s been around since 2.5 but has never crossed my way until now.
wp_admin_css_color(
'uni', 'UNI',
UNI_PLUGIN_URL . "/assets/css/admin-themes/uni/colors.css",
array( '#004d66', '#CC006D', '#00BFFF', '#0099CC' )
);All the built-in admin color schemes are located in /wp-admin/css/colors/ and come with a colors.scss file. The SASS preprocessing makes it super easy to create a custom theme.
I duplicated one of the existing schemes, changed the variables in it to the color branding of my own project and ran it through CodeKit to get my own compiled colors.css.
$base-color: #004d66;
$highlight-color: #09c;
$notification-color: #cc006d;
@import "../../colors.css";
@import "../_admin.scss";This is my result:
Use a Google Web Font
The second thing new to WordPress 3.8 is the extensive use of the Open Sans font specimen. From the fonts description:
Open Sans is a humanist sans serif typeface designed by Steve Matteson, Type Director of Ascender Corp. This version contains the complete 897 character set, which includes the standard ISO Latin 1, Latin CE, Greek and Cyrillic character sets. Open Sans was designed with an upright stress, open forms and a neutral, yet friendly appearance. It was optimized for print, web, and mobile interfaces, and has excellent legibility characteristics in its letterforms.
In short: Open Sans is a sturdy font, built to perform in many environments and supports a wide range of international character sets. An excellent choice for a huge Open Source CMS project like WordPress.
Still you might want to replace it with an alternative and that has become easier than ever.
Head over to Googles font directory, choose your favorite, and copy its URL like the one I used in the following code snippet:
add_action( 'admin_enqueue_scripts', 'add_google_font' );
function add_google_font() {
wp_enqueue_style( 'my-google-font', '//fonts.googleapis.com/css?family=Source+Sans+Pro' );
}Now we need to overwrite the existing CSS selectors with our own font family name:
body,
input,
textarea,
submit,
.press-this a.wp-switch-editor,
#wpadminbar * {
font-family: 'Source Sans Pro' !important;
}There are multiple ways to add this line of code to the admin that I am not going to cover here. For now add it to your colors.css/scss file (renaming it to something like theme.css or scheme.css might be appropriate later) or paste it into the “Custom CSS for Admin” textarea in the White Label CMS plugins settings page.
How to use font from Typekit for your WordPress admin
In my case I wanted to use Museo Sans from Typekit, that I already used for the front end of the site. I took the typekit embed code and added it to my admin:
<?php
add_action( 'admin_head' , 'add_museo_sans' );
function add_museo_sans() { ?>
<script type="text/javascript" src="//use.typekit.net/xxxxxx.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<?php } ?>Typekit includes its own stylesheet with selectors that the font should be applied to. I’m using the Kit Editor to tell it to use the necessary selectors.
Result
That’s it! The WordPress admin area can now be used with a custom color scheme and font family.
