Home | Blog | Code Snippet | Code Snippets to Customize your WordPress admin area

You’ve developed a gorgeous site for your client. You’ve put a ton of time and effort into perfecting every detail. You send your client their login credentials, and all of a sudden you/they are faced with a standard, boring ol’ WordPress install. Now, your client knows their site is built on WordPress. That’s not the issue. The issue is, why does the backend have to be so boring and bland, with nothing representing the live site and all the work you’ve done? Why are there so many places where the admin user can be sent back to WordPress (which can confuse some site owners)? Wouldn’t it be nice to be able to have a reminder on every page of who built their site and how to get in touch?

Well you’re in luck! It’s actually not difficult at all to customize your admin backend to match your theme. In fact, in another post later I will show you how to set it all up as a plugin so it won’t even be theme-dependent.

For now, you’ll want to open the functions.php file for the child theme you’re using (you are using a child theme, right???).

To change your color scheme…

First, add the following code to your functions.php file.

//Custom WordPress Admin Color Scheme
function admin_css() {
	wp_enqueue_style( 'admin_css', get_stylesheet_directory_uri() . '/css/admin.css' );
}
add_action('admin_print_styles', 'admin_css' );
// END Custom WordPress Admin Color Scheme

Next, create a directory & file

Inside your child theme directory you will want to create the folder css if it doesn’t already exist. Inside this css folder you will want to create the file admin.css.

Add this code to start your admin css.

You may customize this to your hearts’ content. This is just an example to get you started.

html body {
	background: #e4e4e4;
}

#wpadminbar {
	background-color: #808080;
}

html #adminmenu,
html #adminmenuback,
html #adminmenuwrap {
    background-color: #ececec;
}

html #adminmenuback,
html #adminmenuwrap {
	box-shadow: 0 1px 5px #38383A;
}

#adminmenu .wp-has-current-submenu .wp-submenu,
#adminmenu .wp-has-current-submenu .wp-submenu.sub-open,
#adminmenu .wp-has-current-submenu.opensub .wp-submenu,
#adminmenu a.wp-has-current-submenu:focus + .wp-submenu,
.no-js li.wp-has-current-submenu:hover .wp-submenu,
#adminmenu .wp-submenu,
.folded #adminmenu .wp-has-current-submenu .wp-submenu,
.folded #adminmenu a.wp-has-current-submenu:focus + .wp-submenu {
    background-color: #ffffff;
    color: #000;
}

#adminmenu .wp-has-current-submenu .wp-submenu .wp-submenu-head,
#adminmenu .wp-menu-arrow,
#adminmenu .wp-menu-arrow div,
#adminmenu li.current a.menu-top,
#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu,
.folded #adminmenu li.current.menu-top,
.folded #adminmenu li.wp-has-current-submenu,
#adminmenu li.menu-top:hover,
#adminmenu li.opensub > a.menu-top,
#adminmenu li > a.menu-top:focus {
    background: #9de53c; /* Old browsers */
	background: -moz-linear-gradient(top,  #9de53c 0%, #52c62c 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9de53c), color-stop(100%,#52c62c)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #9de53c 0%,#52c62c 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #9de53c 0%,#52c62c 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #9de53c 0%,#52c62c 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #9de53c 0%,#52c62c 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9de53c', endColorstr='#52c62c',GradientType=0 ); /* IE6-9 */
	color: #fff;
}

#adminmenu .opensub .wp-submenu li.current a,
#adminmenu .wp-submenu li.current,
#adminmenu .wp-submenu li.current a,
#adminmenu .wp-submenu li.current a:focus,
#adminmenu .wp-submenu li.current a:hover,
#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a {
    color: #000;
    font-weight: strong;
}

#adminmenu .wp-submenu a,
#adminmenu a,
#adminmenu div.wp-menu-image::before {
    color: #000;
}

#adminmenu .wp-submenu a:focus,
#adminmenu .wp-submenu a:hover,
#adminmenu a:hover,
#adminmenu li.menu-top > a:focus,
body #adminmenu a:hover,
a,
a:hover {
    color: #52c62c;
}

.postbox .hndle, .stuffbox .hndle {
    background-color: #747474;
    color: #fff;
}

Make sure your favicon fires in your admin area as well

Simply add the following code to your functions file

// Custom Admin favicon
function add_my_favicon() {
   $favicon_path = get_stylesheet_directory_uri() . '/images/favicon.png';

   echo '';
}

add_action( 'admin_head', 'add_my_favicon' ); //admin end
// END Custom Admin favicon

Note that your favicon may have a different file extension on it (.ico, .jpg, etc.) and that’s fine.

Also, as of WordPress v4.3.1, you can set the frontend favicon easily within Appearance > Customize in the admin panel. The code above will ensure that the favicon firest for your admin area as well.

Remove the WP logo from the top admin menu bar

Add the following code to your functions file

// Custom Remove WP logo from admin
add_action('admin_bar_menu', 'remove_wp_logo', 999);

function remove_wp_logo( $wp_admin_bar ) {
$wp_admin_bar->remove_node('wp-logo');
}
// END Remove WP logo from admin

Change the “Howdy” text in the top admin bar

Some people find “Howdy” to be too informal. Here’s how to make it whatever you want:

Add the following to your functions file

//Custom change Howdy in admin
add_action( 'admin_bar_menu', 'wp_admin_bar_my_custom_account_menu', 11 );

function wp_admin_bar_my_custom_account_menu( $wp_admin_bar ) {
$user_id = get_current_user_id();
$current_user = wp_get_current_user();
$profile_url = get_edit_profile_url( $user_id );

if ( 0 != $user_id ) {
/* Add the "My Account" menu */
$avatar = get_avatar( $user_id, 28 );
$howdy = sprintf( __('Welcome, %1$s'), $current_user->display_name );
$class = empty( $avatar ) ? '' : 'with-avatar';

$wp_admin_bar->add_menu( array(
'id' => 'my-account',
'parent' => 'top-secondary',
'title' => $howdy . $avatar,
'href' => $profile_url,
'meta' => array(
'class' => $class,
),
) );

}
}
// END change Howdy in admin

Where it says Welcome in the code, you can change that to whatever strikes your fancy.

Simple replace login screen WordPress logo

Add the following to your functions file:

// custom admin login logo
function custom_login_logo() {
	echo '

‘; } add_action(‘login_head’, ‘custom_login_logo’);

Remember to upload the logo image to your child themes’ images folder, and change the above code to reflect the name of your logo file.

Conclusion

As you can see, with just a few simple modifications it’s very easy to make customizations to your WordPress admin area and login screen. It’s worth the effort and is another opportunity to brand your website, and leave a lasting impression on your users/clients.

Have you customized your admin panel and login page? Show us what you’ve done in the comments below.

Save