How to add Custom CSS to WordPress admin dashboard

Previously, I have covered a complete guide with the help of which you can custom your WordPress admin panel style and branding without messing with the custom codes. But that requires usage of 3rd party plugins. This time, I tell you how to customize admin panel design without any 3rd party plugin, adding some code to your theme function.php or to a new plugin (that is really easy).

Actually, WordPress makes it damn easy to style admin dashboard, providing custom functions to get added either in a plugin or in your theme function.php. I suggest you to add it in an independent plugin. Storing all your custom functions in a separate plugin keeps your customizations safe from overwriting code due to the theme update etc. Additionally you can enable or disable your custom styling just by deactivating and activating your custom plugin.

 

By adding code to your theme function.php

Simple put the following code in your function.php

 

add_action('admin_head', 'my_custom_fonts');

function my_custom_fonts() {
  echo '<style>
    body, td, textarea, input, select {
      font-family: "Lucida Grande";
      font-size: 12px;
    } 
  </style>';
}

 

In this code, you can replace red text with any selector in admin panel CSS. And you can add as many CSS rules between starting and closing tags <style>      </style>

By creating own custom CSS plugin

• Create a new php file and put the following code

<?php

/*
Plugin Name: My Admin CSS

Plugin URI: http://yourdomain…/
Description: Custom Admin styles.
Author: Any nameVersion: 1.0
Author URI: http://example.com
*/

function my_admin_theme_style() {
    wp_enqueue_style('my-admin-theme', plugins_url('wp-admin.css', __FILE__));
}
add_action('admin_enqueue_scripts', 'my_admin_theme_style');
add_action('login_enqueue_scripts', 'my_admin_theme_style');

?>

• Now create a folder in wp-content/plugins folder and give this folder a name (it is the folder where you will put the created plugin php file).
• In this created folder place your created php file
• Also create a file wp-admin.css in this folder (in this CSS file, you can add custom CSS for your admin panel)
• Now, go to your WordPress dashboard and activate the created plugin

You can add custom CSS into your plugin CSS file in two ways;

1. editing wp-admin.css via FTP or hosting file manager or
2. editing wp-admin.css via WordPress dashboard > Plugins > Editor > created plugin > wp-admin.css

Way 1 is more comprehensive, and it doesn’t let you stuck anywhere while editing CSS (but requires access to FTP or hosting panel). On the other hand, way 2 is easy, but you may get stuck due to applying wrong CSS. For instance, if you accidentally hide admin wrapper, all content will be disappeared in admin panel. You can’t then edit admin css via admin panel. In that condition, you need to access css file via FTP or hosting file manager. (specially, editing php files via FTP (or file manager) is recommended)