Add Custom CSS Style In WordPress Admin Dashboard Area

By Faruque Ahamed Mollick

What happened if you could change or replace CSS style with your own custom CSS code for WordPress admin dashboard panel? Many WordPress users may be tired of using black and white WordPress dashboard area. So will it be not so amazing if you could make it colorful by adding some custom CSS?

Yes, you can and here in this tutorial, I am going to tell you how to do it. In this article, I am going to show you how you can add your own CSS code to the admin dashboard panel of WordPress.

Coding part for adding custom CSS in WordPress admin area

The coding structure to do this job is given below:

add_action('admin_head', 'my_custom_style');

function my_custom_style() {
  echo '<style>
    /* Your CSS code goes here */
    } 
  </style>';
}

You need to provide your CSS code where you can see ” /* Your CSS code goes here */ ” text in the above code. You need to put this code inside your theme’s functions.php file. But if you wish, then you can also create a separate plugin for this.

The above code will add your custom CSS within the <head> tag of your WordPress admin dashboard area and it will replace existing CSS code or add new CSS.

For example, I have already added some custom CSS using the add_action function. The code is given below:

//Custom CSS for admin area
add_action('admin_head', 'my_custom_style');
function my_custom_style() {
  echo '<style>
    body, td, textarea, input, select {
      font-family: "Lucida Grande";
      font-size: 15px;
      color: #245424;
      background: #a8d6a8;
    } 
#adminmenu, #adminmenu .wp-submenu, #adminmenuback, #adminmenuwrap {
  background-color: #0c520c;
}
#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 {
  background-color: #3f793f;
}
#wpadminbar {background: #0b420b;}
a {color: #135979; font-weight: 600; }
.welcome-panel {background: #7fb97f;}
.welcome-panel a{color: #fff;}
  </style>';
}

You can add this code in your theme’s functions.php file. After doing that below is how the WordPress admin dashboard panel looks:



You can see that I have made the theme color green for WordPress admin dashboard which really looks so nice.

It was just an example. You can check CSS element class name and add new CSS code for that CSS class with the same process that I did. You can match your admin panel’s theme color just like your front end size.

So did you like this tutorial? And was that not a really nice tutorial? If you liked this tutorial then please share it on social media and comment below if you have to say something about this tutorial. Ask me anything related to this tutorial.

Leave a Reply

Your email address will not be published. Required fields are marked *