How to Apply Custom CSS to the Wordpress Admin Area

Posted on - Last Modified on

Here is a simple and easy tutorial on how to apply custom CSS to the Wordpress admin area. Let me explain this to you in two ways -- the code way, by writing some specific hooks into your theme’s function.php and the plugin way, by suggesting some cool plugins to alter the look and feel of the Wordpress admin.


In no way is one supposed to touch or alter the Wordpress core files, as this will highly compromise Wordpress installations. Updates also become risky when you alter the Wordpress core installs. 
 

Why do we need to brand the admin? 
No one wants to reveal the original codes installed for developing a website when it’s a business. Better admin branding provides uniqueness to the website as well.


The Code Way
Let me list some possible hooks that can be developed for managing the admin panel effectively

  •     Login Screen
  •     Removing menus and submenus
  •     Footer Text alteration
  •     Custom CSS for the visual editor as well as entire admin

Login Screen: 
This lets you alter the login screen with a custom logo and different color for background and buttons.
Let's write a simple function to hook the admin in your themes function.php:

// add a new logo to the login page
function my_login_logo_css() { ?>
    <style type="text/css">
        .login #login h1 a {
            background-image: url(‘URL TO YOUR LOGO’); ?> );
            width: 200px; // remember to change the height and width as per your logo size
        height:80px;
    
        }
        .login #nav a, .login #backtoblog a {
            color: #fefefe !important;
        }
        .login #nav a:hover, .login #backtoblog a:hover {
            color: #d1d3d3 !important;
        }
        .login .button-primary {
            //login button styles here
        }
        .login .button-primary:hover {
//hover styles written here            
        }
    </style>
<?php }
add_action( 'login_enqueue_scripts', my_login_logo_css' );
?>
 

Menus :
Now we will see hooks to remove menus and submenus. There are default Wordpress tags for it.

remove_menu_page($menu_slug);
remove_submenu_page($menu_slug)
function removemenus_admin()
{
remove_menu_page(edit.php?post_type=Books); // to remove access to the custom post type books
// say we want to remove only the add new option for books then write the following
remove_submenu_page('edit.php?post_type=Books, 'post-new.php?post_type=Books
}
//hook to admin
add_action( 'admin_menu', 'removemenu_admin’ );

If it's pages or posts you want removed, just add post_type=post  / post_type=page in the functions.
We can also rename or reorder menus and submenus -- relevant hooks can be found online.

Footer Text :
Now we can see how to write custom hooks to alter your footer copy on your admin screen:
 

add_filter('admin_footer_text', 'change_text_footer_admin'); //change admin footer text
function change_text_footer_admin () {
echo "Write your footer copy right info here";
}

Custom CSS Styles for Admin
The function to use is:

function myadmin_stylesheet() {
    wp_enqueue_style( 'admin_css', get_template_directory_uri() . '/css/admin.css' );
}
add_action('admin_head', 'myadmin_stylesheet' );


Add the above code to functions.php and add the admin.css to your CSS folder of your theme. Write any styles you wanted for your admin in the admin.css

Visual editor styles

add_editor_style('/css/editor.css');


adding this to your function.php does the wonder to alter styles within your editor area in admin

Apart from the above mentioned functions there are also functions that can be written to add/edit /remove widgets. Hide menus . Change appearance of menus and dashboard.

Plugins  Way
Even a experienced coder would not want to write codes and plugins on wordpress when there is a bountiful resource available in the wordpress repository as free plugins.
Some wonderful plugins to customize admin
 

Erident Custom Dashbord

Admin Menu Editor

Admin menu Reorder    

 

Posted 9 December, 2014

Rajhees

DN INFOWAY - WEB DESIGN AND DEVELOPMENT EXPERTS

************ TOP 5 WOMEN FREELANCERS *********************** https://www.freelancer.com/community/articles/women-s-day-special-5-freelancers-who-found-success About ME ************* DN Infoway is an offshore outsourcing company providing round-the-clock services to customers. We are a small team of 10 people, 7 coders and 3 designers. We offer round the clock services in web design and developmen...

Next Article

The Basics of Email Newsletter Design