Customizing WordPress From the Inside Out

This past weekend I had the wonderful privilege to speak at the first WordCamp held in Minneapolis. My session was the first one and its always good to be one of the first sessions in the day because you normally get the liveliest crowds and everyone is pretty excited about being there. There was a great crowd in the Best Buy theater and it was a lot of fun presenting my talk to all of them.

There were five different tracks at WordCamp MSP that ranged from developer to blogger. Since my session was slotted in the developer track the main goal I had was to get developers to take a look at the little details they add that could improve the usability and wow factor of WordPress. Basically I wanted to show the audience how to give their users the richest experience possible when using WordPress.

I started with a quick story on how focusing on the details made Lord of the Rings such a success. I highlighted examples such as spending over 2 years in the pre-production of Hobbiton. Alan Lee, one of the conceptual designers of the movies said this:

I quite like the fact that we spent quite a bit of time designing things that you barely see. You just catch a glimpse of it, rather than have it being in center frame, to milk it for all it’s worth. Having those details in the background helps to create the idea that we are in this very rich world and it makes it more believable.

I’m splitting this post up into three parts. The first will cover the login screen, admin header and footer. The second will cover customizing the WordPress dashboard, and the third will cover custom post types, custom taxonomies, and custom meta boxes. Once the last post is up I’ll also include a single file with all the code and templates that you can download.

The slides from the presentation are available on Slide Share here.

So with that intro I delved into five areas that you can customize and use to give your users a great experience using WordPress.

The Login Screen

The first area I covered was the login screen. I have written a plugin called Custom Admin Branding that will let you modify and customize the login screen (and the header and footer of the admin) but a lot of developers (myself included) would like to eliminate the use of plugins as much as possible.

In your functions.php between your opening and closing php tags include this code:

/*********************************************
 Customized Admin
*********************************************/

//We do our login customization here and we'll wrap the rest in "is_admin"
add_action( 'login_head', 'custom_login_css' );

function custom_login_css() {
	echo '<link rel="stylesheet" href="' . get_bloginfo('stylesheet_directory') . '/custom-admin/admin-styles.css" type="text/css" media="all" />';
}

This action hooks into the header on the login page and the function adds in our custom style sheet called “admin-styles.css” which I’ve placed in a new directory called “custom-admin.”

In the admin-styles.css file add in this code:

.login h1 a {
	background-image: url(images/login-logo.png);
	}

This is replacing the background image for the heading one anchor element in div container with the class of “login.” I’ve also created another directory inside of custom-admin called “images” which I’ll use to place all of my customized images in. This code assumes you have an image called “login-logo.png” in that images directory.

If you want, you can download the .psd I used to create the admin login logo.

Here is the result.

The WordPress login screen using a custom image.

The WordPress Admin Header

The main goal here is to again put in a little detail that will give your client a better experience in using WordPress. People love to hear their name spoken and companies and employees love to see their logo splashed all over the place. By placing your clients logo in the header of the admin of their site you create automatic ownership and pride.

I like to do a lot of customizing in my theme’s functions.php file so to keep things organized and for my own sanity I’ll often split up different customization into separate files and then include them in my theme’s functions.php file. That is what I’ve done in this tutorial. If you would like to do that paste the code below in your theme’s functions.php file.

//This is just to keep stuff a little better organized for my sanity
if ( is_admin() ) require_once('custom-admin/custom-functions.php');

Again what this code is doing is including a separate php file that I’m writing all of my customization code in. You can change the names or the file structure if you want.

The other thing this is doing is ensuring that these customizations only run on admin screens.

So now back to modifying the header logo… In your custom-functions.php file paste this code between opening and closing php tags.

/*********************************************
 Calling in the custom admin stylesheet
*********************************************/

add_action( 'admin_print_styles', 'load_custom_admin_css' );

function load_custom_admin_css() {
	wp_enqueue_style( 'custom_admin_css', get_bloginfo('stylesheet_directory') . '/custom-admin/admin-styles.css' );
}

This is very similar to what we did for the logo. I’m actually using the same style sheet. The reason we need to call it twice (once in the theme’s functions.php and once in my custom-functions.php) is because of the WordPress action hooks used. The hook we used for the custom login logo will only fire when the login screen is presented. The hook we are using here called “admin_print_styles” will fire on any page in the admin.

So once we have the code in place to include our custom style sheet I can write the css to override the WordPress logo in the header. Copy and paste this code in your “admin-styles.css file.

#header-logo {
	background-image: url(images/header-logo.png);
}

I’ve formatted my header logo to be the exact size as the previous WordPress logo (32px by 32px). If your logo or image is a different size you’ll need to declare that in your custom css class like this:

#header-logo {
	background-image: url(images/header-logo.png);
        height: 100px; //or whatever your image height is
        width: 150px; //or whatever your img width is
}

You can download the .psd I used to create the logo.

And the result is this:

The WordPress Admin Footer

The last item for this post is to modify the footer in the admin with some custom text.

In your custom-fuctions.php file paste this code:

/*********************************************
 Custom Footer Text
*********************************************/

add_filter( 'admin_footer_text', 'custom_footer_text' );

function custom_footer_text($default_text)  {
	return '<span>Site managed by <a href="http://redlettersstudio.com">Red Letters Studio</a><span> | Powered by <a href="http://www.wordpress.org">WordPress</a>';
}

This code is using a WordPress filter which allows us to override certain things in WordPress. This particular filter allows us to put in our own custom text. Use your own custom text and html where the function is being returned.

Look for parts 2 and 3 of my presentation to come soon. Hit me up below with any questions or comments.