How to Add Custom CSS in WordPress Admin Panel?

Whether you are a seasoned developer or just starting out with WordPress, this step-by-step tutorial will guide you through the process of injecting your own styles into the WordPress admin interface. 🖌️🔧

So, let's embark on this journey to transform your WordPress admin dashboard into a personalized workspace that reflects your unique style and preferences. 🚀🎨

To add custom CSS to the WordPress admin area using code, you can use the admin_enqueue_scripts hook to enqueue your custom CSS file.

Here's a step-by-step guide on how to do it:

1. Create your custom CSS file:

First, create a CSS file with your custom styles. You can use a code editor like Visual Studio Code, or Sublime Text. Save this file with a .css extension, and remember the file path.

Note: You can try WP Adminify Plugin, it offers multiple Dashboard UI Template with 100% color customization. Also, you can implement Custom CSS and JS in WordPress Dashboard using this plugin too.

2. Upload the CSS file to your theme directory:

You can upload your custom CSS file to your theme directory if you want to keep it within your theme. It's a good practice if your custom CSS is specific to your theme. For example, my CSS file name is custom-admnin-style. You need to write all of your CSS code in this file.

Here are some demo CSS to start your journey:

h2, p {
    color: #fff;
}
body {
    background-image: url('https://images.unsplash.com/photo-1692374227159-2d3592f274c9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2940&q=80');
    background-position: center;
}
.postbox {
/* From https://css.glass */
background: rgba(255, 255, 255, 0.09);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(2.9px);
-webkit-backdrop-filter: blur(2.9px);
border: 1px solid rgba(255, 255, 255, 0.3);
}
a{
    color:#f4ef8c;
}
#dashboard_right_now li a:before{
    color: #ffffff;
}

3. Add code to your theme's functions.php file:

Add the following code to your theme's functions.php file to enqueue your custom CSS in the WordPress admin area.

function custom_admin_css() {
    // Replace 'custom-admnin-style.css' with the actual file path to your custom CSS.
    $custom_css_file = get_template_directory_uri() . '/custom-admnin-style.css';

    // Enqueue the custom CSS file in the WordPress admin area.
    wp_enqueue_style('custom-admin-css', $custom_css_file);
}

// Hook the custom_admin_css function to the admin_enqueue_scripts action.
add_action('admin_enqueue_scripts', 'custom_admin_css');

Referance: developer.wordpress.org/reference/functions/wp_enqueue_style/

In the code above:

• custom_admin_css is a custom function that enqueues your custom CSS file.
• get_template_directory_uri() gets the path to your theme's directory. If you uploaded the CSS file to your theme directory, this function will point to the correct location.
• wp_enqueue_style is used to enqueue the custom CSS file.
• 'custom-admin-css' is a unique handle for your custom CSS. You can change it to something else if needed.
• 'custom-admnin-style.css' should be replaced with the actual path to your custom CSS file.

Save the functions.php file or the custom plugin file.

Now, when you visit the WordPress admin area, your custom CSS file will be loaded and applied to the admin interface.
Here is a screenshot after applying the steps as mentioned.

Custom CSS in WordPress Admin using WP Adminify

After installing WP Adminify Plugin you need to navigate to WP Adminify option panel. Then click on Custom CSS/JS option. Just input your code properly and save your data.

Reference: wpadminify.com/custom-css-in-wordpress-admin-panel/

Remember to clear your browser cache and refresh the admin page to see the changes if they don't appear immediately.