Customising WordPress For Your Clients

Today I’ll be showing you a quick tip on how to customise your WordPress control panel for your clients. For web designers we use WordPress on a daily basis so it would be nice to customise the login area just so we can differentiate between what site we are working on, and it’s also a nice little touch for the customer to see.

Main Login Screen

Changing the default WordPress logo on the login screen is simple. If you go to your WordPress folder then navigate to wp-admin – css – login.css (you may have to source format this, alternatively use login.dev.css). All you need to do is change the following code to show your background image and change the height and width appropriately. You can also change the fonts and background colours to suit you.

h1 a {
	background: url(../images/logo-login.gif) no-repeat top center;
	width: 326px;
	height: 67px;
	text-indent: -9999px;
	overflow: hidden;
	padding-bottom: 15px;
	display: block;
}

Small Icon – Admin Bar

Once your logged into WordPress there is normally an admin bar at the top with a little WordPress icon. We can simply change this to your logo by adding the following code to the functions.php located in your theme folder, and change the (‘.get_bloginfo(‘template_directory’).’/images/wordpress.png) to point to your image .

[/html]
//hook the administrative header output
add_action('admin_head', 'my_custom_logo');

function my_custom_logo() {
echo '

#header-logo { background-image: url('.get_bloginfo('template_directory').'/images/wordpress.png) !important; }

';
}
[html]

It’s as simple as that!

Last updated by at .

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Please wrap all source code with [code][/code] tags.

Follow Tristar on Twitter