Add Custom CSS to WordPress Admin

By  on  

Believe it or not, I spend an awful lot of time going through my blog's comments and correcting spelling issues, code formatting, etc.; yes, even the comments from way back to 2007.  It's mostly for quality control purposes and ease of reading for my readers, especially the code comments.

One gripe I have with WordPress' admin section is that it's difficult to spot <pre> tag contents, especially code samples that are only one line.  It made me think: "wouldn't it be awesome if I could add my own styles to the WordPress admin interface?"  If it's awesome, I want to do it, so here's how you can add your own custom styles to WordPress admin!

Step 1:  Create Your CSS File

You can place the CSS file wherever you'd like; I've chosen to place the CSS file within my theme.  My admin CSS file looks like:

.wp-admin .comment pre {
  background: pink; /* they forgot the language! */
  padding: 6px 10px;
  font-size: 16px;
  border: 1px solid #ccc;
}

.wp-admin .comment pre[class] {
  background: #fff; /* language (likely) there */
}

The CSS above makes <pre> tags more visible.  It also will make any PRE element without a class more apparent, teling me I need to fix it by adding the language as a className.

Step 2:  Add Your CSS to WordPress Admin in functions.php

WordPress uses an add_action type of admin_enqueue_scripts for adding stylesheets anywhere within WordPress:

// Update CSS within in Admin
function admin_style() {
  wp_enqueue_style('admin-styles', get_template_directory_uri().'/admin.css');
}
add_action('admin_enqueue_scripts', 'admin_style');

get_template_directory_uri provides the path to your current theme, you simply need to add the filename to the end of the path.

If you get annoyed with WordPress Admin styles like myself, feel free to jump in and change them.  My update was very simple; if you want to completely overhaul the WordPress theme so your clients think they're getting a completely customized system, feel free to do so!

Recent Features

  • By
    Welcome to My New Office

    My first professional web development was at a small print shop where I sat in a windowless cubical all day. I suffered that boxed in environment for almost five years before I was able to find a remote job where I worked from home. The first...

  • By
    How to Create a RetroPie on Raspberry Pi &#8211; Graphical Guide

    Today we get to play amazing games on our super powered game consoles, PCs, VR headsets, and even mobile devices.  While I enjoy playing new games these days, I do long for the retro gaming systems I had when I was a kid: the original Nintendo...

Incredible Demos

  • By
    MooTools TwitterGitter Plugin

    Everyone loves Twitter. Everyone loves MooTools. That's why everyone should love TwitterGitter, a MooTools plugin that retrieves a user's recent tweets and allows the user to format them however the user would like. TwitterGitter allows the user to choose the number of...

  • By
    Redacted Font

    Back when I created client websites, one of the many things that frustrated me was the initial design handoff.  It would always go like this: Work hard to incorporate client's ideas, dream up awesome design. Create said design, using Lorem Ipsum text Send initial design concept to the client...

Discussion

  1. Kristy

    Thank you for this! It was extremely useful :)

  2. Paul

    It should be get_stylesheet_directory_uri() instead of get_template_directory_uri() if you’ve put the admin.css in a child theme.

  3. i’ve tried both get_template_directory_uri and get_stylesheet_directory_uri but getting some issues

  4. Matthew

    You can also use Custom CSS Injector plugin ( https://wordpress.org/plugins/css-injector/ ) to add custom CSS only to admin area.

  5. Use

    get_stylesheet_directory_uri()

    if you use a child theme.

  6. get_stylesheet_directory_uri()

    should be used instead of

    get_template_directory_uri()

    as you shouldn’t modify the theme/template files directly. Instead, you should use a child theme for modifications such as this…

    Correct code for child theme functions.php file below:

    // Update CSS within in Admin
    function admin_style() {
      wp_enqueue_style('admin-styles', get_stylesheet_directory_uri() . '/admin.css');
    }
    add_action('admin_enqueue_scripts', 'admin_style');
    

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!