Custom admin CSS in WordPress

August 6, 2015 2:48 pm
Published by
Leave your thoughts

There’s a whole host of reasons you might want to tweak the admin CSS of your WordPress site. I find it most useful to create a visual distinction between development, testing and live versions of the site I’m working on so I don’t go making changes on the wrong one! This can be achieved using a simple snippet in your functions.php file:
// set domain for testing etc.
$hostVar = explode(".", $_SERVER['HTTP_HOST']);

// Add style to test admin to prevent asshat mistakes
if (in_array('test', $hostVar) || in_array('dev', $hostVar)) {
   add_action('admin_head', 'custom_admin_css');

function custom_admin_css() {
   global $hostVar;

   if(in_array('test', $hostVar)) {
      echo '<style>html {background:#ffecec;} ';
   } elseif (in_array('dev', $hostVar)) {
      echo '</style><style>html {background:#e9f5ff;} </style>';

First we’re placing the HTTP_HOST server variable into an array separated by the period character which we can then use to check which version of the site we’re currently on. The $_SERVER['HTTP_HOST'] returns the URL of the host the script is running on e.g. Based on the above our array would look like this: $hostVar = (test, absolutewillynilly, com, au); Next up we check whether any of our development or staging subdomains are present in the array, if so we add an action hooked to admin_head to fire the custom_admin_css function. This function simply adds a CSS background colour to the HTML tag based on the subdomain it discovers. As you can see I’ve plumped for a tranquil baby blue for the serenity of the development environment and a more startling pale red to signal I’m on the test server. Of course if no subdomains are found then the function never runs so the live site retains the default WordPress grey. Obviously there’s a whole lot more you can do with this, but hopefully this demonstrates the principle of adding custom CSS to your WordPress admin theme.

Categorised in:

This post was written by WillyNilly

Leave a Reply

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