Customizing WordPress Admin with CSS &  JavaScript

Don’t get me wrong, out of the box the WordPress admin rocks. When you begin to add advanced content management to the mix with plugins additional CSS is often needed to provide the best experience. I spend a few hours on every WordPress CMS setup customizing the backend to make things easier for my clients. I firmly believe that the easier a management system is to use directly affects the amount of training time needed. It also effects the amount of time customers will spend scratching their heads in frustration.

There are many things you can do to clean-up your customized admin. Below are a few frequent methods I use on my projects.

Adding Custom CSS to the Admin

When the following function and hook are added to functions.php a stylesheet from your template folder will be loaded into the WordPress admin. Be sure to change the “THEMENAME” to the name of your theme folder.

// Admin CSS layer
if ( !function_exists('base_admin_css') ) {
	function base_admin_css()
	{
		wp_enqueue_style('base-admin-css', get_stylesheet_directory_uri() .'/css/admin.css', false, '1.0', 'all');
	}
	add_action('admin_print_styles', 'base_admin_css');
}

Adding Additional Body Classes

The following function will add the current post ID information to the BODY class. This will allow you to customize the look of individual editing pages. For example, if your editing the page with an ID of 70, “post-70” will be added as a class on the BODY tag. If you have a special meta box you want to display on that post, you can use CSS to make it visible.
It will also add a post-type-XXXX body class onto any post type page in the admin. I’ve found that this handy for situation when you want to add custom management onto a specific post type.

// Body class for admin
function base_admin_body_class( $classes )
{
	// Current action
	if ( is_admin() && isset($_GET['action']) ) {
		$classes .= 'action-'.$_GET['action'];
	}
	// Current post ID
	if ( is_admin() && isset($_GET['post']) ) {
		$classes .= ' ';
		$classes .= 'post-'.$_GET['post'];
	}
	// New post type & listing page
	if ( isset($_GET['post_type']) ) $post_type = $_GET['post_type'];
	if ( isset($post_type) ) {
		$classes .= ' ';
		$classes .= 'post-type-'.$post_type;
	}
	// Editting a post type
	$post_query = $_GET['post'];
	if ( isset($post_query) ) {
		$current_post_edit = get_post($post_query);
		$current_post_type = $current_post_edit->post_type;
		if ( !empty($current_post_type) ) {
			$classes .= ' ';
			$classes .= 'post-type-'.$current_post_type;
		}
	}
	// Return the $classes array
	return $classes;
}
add_filter('admin_body_class', 'base_admin_body_class');

Menu Customizations

With the new 3.0 Post Types I find that the left menu is often too small, and post type names commonly span onto two lines. Adding the following bit of CSS to your admin will change the width to 200px. You can easily adjust this size to whatever you want.

/* Menu Enhancements */
#adminmenu {
	width:200px;
	margin-left:-215px;
}
#wpbody {
	margin-left:230px;
}

Better Meta Boxes

Consistency is key when it comes to UI design, and WordPress is no exception. If you clean-up the meta boxes created by various plugins, you’ll find that the admin becomes far more professional and also easier to use. I frequently use the CSS below in my admin.css to enhance the display of Verve Meta Boxes & Custom Field Template meta boxes. You can easily customize whatever you want, this is just a jumping off point!

/* Meta Boxes */
#postcustom {
	display:none;
}

/** Plugin - Verve Meta Boxes */
.verve_meta_checkbox li {
	font-size: 11px;
}
.verve_meta_radio p * {
	display:inline;
	line-height:1.5em;
}
.verve_meta_radio p label {
	display:inline-block;
	width:33%;
}
.verve_meta_radio p span.radio {
	text-transform:capitalize;
}

/** Plugin - Custom Field Template */
#cftdiv .dl_textarea dt * {
	display:none;
}
#cftdiv #cft_selectbox {
	display:none;
}
#cftdiv .dl_textarea dt span,
#cftdiv .dl_textarea dt span * {
	display:block;
}
body #cft dt {
	text-align:left;
}
body #cft dt label {
	line-height:2em;
}
body #cft dd {
	margin-bottom:8px;
}
body #cft dd input[type="text"] {
	width:100%;
}
#poststuff #cftdiv .inside {
	margin:12px 12px 4px;
}
#cftdiv .mceEditor {
	display:block;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	border:1px solid #DFDFDF;
}
body #cft .mceStatusbar {
	padding-bottom:1px;
}
#post-body #cft .wp_themeSkin .mceStatusbar a.mceResize {
	top:0;
}
#post-body #cft .wp_themeSkin .mceStatusbar div {
	text-transform:uppercase;
	font-size:11px;
	color:#999;
	padding:4px 6px 2px;
}

These techniques should get you started on customizing the admin. If there’s anything else you do that I should know about, or something wrong with a practice that I’ve outlined please yell at me in the comments below! I welcome your opinion’s.