In this article we are covering how we can add our own custom CSS to the WordPress login screen, the entire WordPress admin area and the WordPress dashboard.

Of course, you could gather together code snippets from all over the internet and add them to your child-theme’s functions.php – or even create your own custom WordPress plugin – but what if I told you there is an easier way to do this?

Install Ultimate Dashboard

Ultimate Dashboard allows us to add our own custom CSS to all those areas in one place, right from within our WordPress installation.

To install the plugin we head over to Plugins -> Add new in the WordPress backend of our website. Now, let’s search for “Ultimate Dashboard” using the search field in the right hand corner

After the plugin was installed successfully, all there left for us to do is activate the plugin. Now we can add our own custom CSS to the WordPress dashboard, the entire WordPress admin area & the WordPress login screen.

Add Custom CSS to the WordPress Dashboard

Okay, now that we have installed the plugin, let’s add our own CSS to the WordPress dashboard. The WordPress Dashboard is what you will see when you log into your WordPress dashboard. By default, it will look something like this:

Now what if we wanted to – let’s say – change the background color of the WordPress dashboard without affecting all other areas of our WordPress backend? To do that, let’s navigate to Ultimate Dash… -> Settings and scroll down to the “Advanced” section.

Down here we have the option to add our custom CSS to the WordPress dashboard ony, without affecting all other pages in the WordPress backend. The CSS code entered here will only execute on the actual dashboard of your WordPress website.

Let’s give our WordPress dashboard a different background color, just so that we see what happens.

Now when we head back over to the WordPress dashboard, here is what it looks like.

While that CSS tweak specifically doesn’t look great, it shows you how easy it is to apply your own custom CSS to the WordPress dashboard only.

Add Custom CSS to the entire WordPress Admin Area

Now what if you wanted to tweak the layout of the entire WordPress admin area and not just only the WordPress dashboard? You guessed it. Let’s head back over to Ultimate Dash… -> Settings and scroll to the advanced section again.

Down here, you get another code field that will be applied to the entire WordPress admin. Following our example above, let’s quickly change the background color of our entire WordPress admin area and apply our custom CSS.

This time, our custom CSS will be applied to the entire WordPress admin area and affect all pages in the wp-admin.

Add Custom CSS to the WordPress Login Page

Last but not least, let’s add our own custom CSS to the WordPress login page. This time, we will apply our custom CSS right within the WordPress customizer which will give us a live representation of the changes we’re making.

To do that, let’s navigate to Ultimate Dash… -> Login Customizer from our WordPress backend. The Login Customizer feature actually does a lot more than allow you to add your custom CSS to the login screen but for the sake of this tutorial, we’re not going into more details here.

Once the WordPress customizer has loaded, we should be sitting in the “Login Customizer” tab. All we need to do next is click on “Custom CSS” to add our own CSS to the WordPress login screen.

The great thing here is that this gives us a live representation of the changes we’re making. When adding our custom CSS to the login page, the changes will be shown in real time.

Wrapping Up

This is how easy it is to add your own custom CSS to the WordPress dashboard, the entire WordPress admin area and the WordPress login screen using one simple, free plugin.

Of course, Ultimate Dashboard does much more than that and I have a article on how to fully customize your WordPress dashboard with it over here.

For those of you that prever the video version of this article, I’ve got you covered. Download Ultimate Dashboard and customize your WordPress dashboard, today!

By loading the video, you agree to YouTube’s privacy policy.
Learn more

Load video

Always unblock YouTube

Tired of the WordPress Dashboard?

Customize the WordPress dashboard & give it a more meaningful use for your clients.

Learn more