How to style the WordPress admin area via the theme

Did you know that you can customise the appearance of your WordPress admin area?

It’s true! You can add a stylesheet into your theme files that contain CSS specifically for styling the WordPress admin area. And it’s as simple as styling the front-end of your website.

In this post, I’m going to show you how to style the WordPress admin via the theme.

1 | Create a new stylesheet for your admin area

First things first you need to create a new stylesheet file for your admin CSS. This file should be placed within your theme directory and you can call it whatever you like as long as it ends in .css. I’m going to call mine admin.css.

You can create this new CSS file via FTP or the control panel that comes with your hosting account (e.g. cPanel).

2 | Enqueue your stylesheet

Now that you have created your admin stylesheet it’s time to enqueue it.

Enqueue means to add data that is awaiting processing into a queue. So with our admin stylesheet, we want to add it to a queue and then wait for the correct moment to use it. For more information about enqueuing in WordPress, check out this blog post I wrote.

Enquing your admin area stylesheet is very similar to enqueuing a normal stylesheet in WordPress. The only difference is the function we use.

To call in a stylesheet that is required on the front-end of a WordPress website we use the wp_enqueue_scripts action. However, to call in a stylesheet that is required for the WordPress admin area we used the admin_enqueue_scripts action.

You are going to create a new function and place this inside the functions.php file within your theme. So open up this file and create a new function. You can call this function whatever you like but try to make it relevant. I’m going to call mine theme_admin_styles.

function theme_admin_styles() {

}

Then you need call a WordPress function called wp_enqueue_style. This is what we use to enqueue a CSS stylesheet, regardless of whether it’s for the front-end or back-end of WordPress.

function theme_admin_styles() {
    wp_enqueue_style();
}

Within this function you need to enter two parameters. The first parameter is the name of the stylesheet. I’m going to call mine theme_main_admin_style. You should place this in between the brackets and place this within single quotation marks.

function theme_admin_styles() { 
    wp_enqueue_style('theme_main_admin_style'); 
}

For the second parameter, you need to use the WordPress function get_theme_file_uri. This function gets the URL of a file within the theme you are currently working on.

function theme_admin_styles() { 
    wp_enqueue_style('theme_main_admin_style', get_theme_file_uri()); 
}

But this isn’t enough to call in the admin stylesheet! You need to put the file name of this stylesheet in between the brackets like so:

function theme_admin_styles() { 
    wp_enqueue_style('theme_main_admin_style', get_theme_file_uri('admin.css')); 
}

If the stylesheet is in a folder within the theme files then you will need to include this folder name too. For example, your stylesheet might be in a folder called css, so this is how you would enqueue that file:

function theme_admin_styles() { 
    wp_enqueue_style('theme_main_admin_style', get_theme_file_uri('css/admin.css')); 
}

So you’ve created your function, but it won’t run until it’s called. To call our function we will use the WordPress function add_action(). This is placed outside of the function you have just created:

function theme_admin_styles() { 
    wp_enqueue_style('theme_main_admin_style', get_theme_file_uri('css/admin.css')); 
}
add_action();

You need to use two parameters within this function. The first parameter is the admin_enqueue_scripts action that I mentioned before. Again, you need to place this within the brackets and within single quotation marks.

function theme_admin_styles() { 
    wp_enqueue_style('theme_main_admin_style', get_theme_file_uri('css/admin.css')); 
}
add_action('admin_enqueue_scripts');

The second parameter tells WordPress which function to call. So, add a comma after the previous parameter and in single quotation marks, type in the name of the function you have created to enqueue the stylesheet. For example, I called mine theme_admin_styles so it would look like this:

function theme_admin_styles() { 
    wp_enqueue_style('theme_main_admin_style', get_theme_file_uri('css/admin.css')); 
}
add_action('admin_enqueue_scripts', 'theme_admin_styles');

Now save and upload your functions.php file and you’re done!

3 | Check that it works!

Ok, so let’s check that you have enqueued your admin stylesheet correctly and that it actually works.

To test your admin stylesheet, I recommend adding in some CSS that will make a really obvious change to your WordPress admin area. For example, making the main content background red.

To do this, open up your admin stylesheet again and add in the following CSS:

#wpcontent {
    background: red;
}

Save and upload your admin stylesheet, and then check to see if the changes have pulled through on the admin area. You may need to clear your browser cache to see these changes.

If it has worked, you should have an admin area that looks like this:

Yes, it looks awful, but it’s just a temporary change to test that everything is working! You can now go in and customise the appearance of your WordPress admin area.

Pin for later?