How to Create an Admin Stylesheet in WordPress

There are at least two scenarios in which you will want to add styles to the WordPress admin area:

  1. If you add a custom metabox to a post type in WordPress you will want to use CSS to style the fields in the metabox.
  2. If you want to create an admin theme you will need to create one — or possibly multiple — admin stylesheets.

In both cases, the process for adding a stylesheet that applies to the WordPress admin area is fairly straightforward.

Enqueue Admin Area Resources

Just like the wp_enqueue_scripts function used to add scripts to the front end of a WordPress website, the proper way to add scripts to the backend isn’t to add them directly the page headers. Instead, the proper thing to do is to use a function that will enqueue the resources for WordPress to add to the site HTML at the proper time.

In the case of admin stylesheet, admin_enqueue_scripts is the function we need to use.

Here’s an example of this function in action:

function custom_admin_styles() {
  wp_register_style( 'custom_admin_css', plugins_url( 'css/style.css', __FILE__ ) );
  wp_enqueue_style( 'custom_admin_css' );
}
add_action( 'admin_enqueue_scripts', 'custom_admin_styles' );

Let’s break down that code so we can see what it’s doing.

custom_admin_styles

The first thing in that bit of code is the line function custom_admin_styles().

What that line does is create a brand new function. This function is going to identify the stylesheet that we want to use for admin styling and add it to the queue of stylesheets to be used to render admin styling.

wp_register_style

This function registers our stylesheet with WordPress so that we can use it later on.

  • First, we give the stylesheet a name. In this case, I’ve selected custom_admin_css as the stylesheet name.
  • Next, we’ve told WordPress where to find the stylesheet. In this case, the stylesheet can be found in the current plugin folder, inside a child css directory, with the file name style.css.

The use of plugins_url clues us in to the fact that this particular bit of code would appear in a plugin file. However, you could just as easily add this same bit of code to a child theme’s functions.php file by replacing the plugins_url function with the get_stylesheet_directory_uri function.

wp_enqueue_style

This function enqueues the CSS stylesheet.

The stylesheet in question is identified by its name or $handle -- in this case,custom_admin_css` — the name we just assigned the stylesheet in the previous function.

add_action

Up until this point, nothing has actually happened. The two previous functions were nested inside of a custom function, but we haven’t told the custom function to actually fire away. That’s what add_action is all about.

The add_action function ties our custom function to the admin_enqueue_scripts hook. When the admin_enqueue_scripts hook is encountered, our custom function will run, and the CSS stylesheet will be added to the admin area of WordPress.

Learn More About Admin Styling

If you want to learn more about adding styles to the WordPress admin area, consult these pages in the WordPress Codex:

Leave a Reply

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