Customize the wordpress admin and login page

Customizing the login section

If you want to remove the standard WordPress logo from the admin login section you’ll need to load a new CSS file and override the standard login CSS styles.

// Custom WordPress Login
function login_css() {
    wp_enqueue_style( 'login_css', get_template_directory_uri() . '/login.css' );
}
add_action('login_head', 'login_css');

 This will load the file login.css from your active theme folder. You now can override the standard css. 

To remove the WordPress logo from the login section use this css:

#login h1 a {
    background: none;
}

If you want to change the background-color for example you can use the body.login css selector. I just use Firebug or webinspector to find these selectors.

If you just want to alter your admin logo, you could also just add this to your functions.php 

function custom_login_logo() {
    echo '<style type="text/css">
        h1 a { background-image:url('.get_bloginfo('template_directory').'/images/logo.jpg) !important; }
    </style>';
}
add_action('login_head', 'custom_login_logo');

 This will add a style tag to your page’s head.

Customizing the  admin section

To change the admin section its style you proceed in the same manner as with the login section. Add these lines to your theme’s function.php file

// Customizing the WordPress Admin section
function admin_css() {
    wp_enqueue_style( 'admin_css', get_template_directory_uri() . '/css/admin.css' );
}
add_action('admin_print_styles', 'admin_css' );

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s