How to Add Custom CSS in WordPress Admin Panel?
Tags: webdev, wordpress, tutorial, beginners
Published: 2023-09-18 04:31:48

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**](https://wpadminify.com/pricing/?utm_medium=dev_to&utm_source=dev_posts), 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;
}
```

![Custom CSS File](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oyyocb04frl2hg0wa7g8.png)

## 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. 

```php
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/](https://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. 


![Added Custom CSS in WordPress Dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kzko3pfpsldrm9fz5uh5.png)

## 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/](https://wpadminify.com/custom-css-in-wordpress-admin-panel/)

![Custom CSS in WordPress Admin Panel](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i4tnjqi1d1o2ojflh3zh.png)

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