Custom CSS for the WordPress Admin

Sometimes when working on a WordPress site, We need to add custom CSS to the WordPress admin area and also wants to store all our custom style in a separate file to keep our customization safe from overwriting code due to the theme update etc.

So here are 2 steps, how we can add our own custom styles to WordPress admin!.

We should always use the built-in WordPress classes and styles whenever possible. That’s the best way to ensure that our code keeps up with the look of the WordPress admin as it continues to evolve.

Step 1: Using WordPress ‘Action Hook’ in Your function.php

Include this in your theme functions.php file:

function my_custom_admin_styles() { ?>
    <style type="text/css">
      body, td, textarea, input, select {
        font-family: "Lucida Grande";
        font-size: 12px;
      }
     </style>
<?php }
add_action('admin_head', 'my_custom_admin_styles');

On line 9, we’re using the action hook for the admin_head to fire our function at the top of the WordPress admin page. You can add as many CSS rules between starting and closing tags <style> </style>

That’s all there is to it!

Step 2: Link a Custom CSS file to WordPress Admin in function.php

According to WordPress Codex admin_enqueue_scripts is the first action hooked into the admin scripts actions.

<?php
//in your theme functions.php

//First solution : one file
add_action( 'admin_enqueue_scripts', 'load_admin_style' );
function load_admin_style() {
  wp_enqueue_style( 'admin_css', get_template_directory_uri() . '/admin-style.css', false, '1.0.0' );
}

//Second solution : two or more files.
add_action( 'admin_enqueue_scripts', 'my_admin_theme_style' );// admin area
add_action('login_enqueue_scripts', 'my_admin_theme_style'); //login page
function my_admin_theme_style() {
  wp_enqueue_style( 'admin_css_foo', get_template_directory_uri() . '/admin-style-foo.css', false, '1.0.0' );
  wp_enqueue_style( 'admin_css_bar', get_template_directory_uri() . '/admin-style-bar.css', false, '1.0.0' );
}  

?>

get_template_directory_uri provides the path to your current theme, you simply need to add the file-name to the end of the path.
Change the paths according to where you put your admin-style-foo.css file.