Apply CSS to WordPress admin

Do you want to hide something in the WordPress admin? Or change the color by CSS?

Here’s how to do it.

Add the following code to functions.php of your theme.

function my_custom_admin() {
  echo '<style>
    tbody#the-list tr.status-draft th.check-column {
	background-color:lightpink; 
	border-top:1px solid #f1f1f1; 
	}
    } 
  </style>';
}

add_action('admin_head', 'my_custom_admin');

Replace the content between <style></style> with your code.

I wanted to change the background color of a column on the Posts list page, so that I can easily see which post is still in the draft state.

The snippet I wrote above makes the th column background color light pink, if the post is in the draft state, like this.

If I publish the post, then the light pink background color will go away.

How About the Theme’s Stylesheet?

Nope, editing the theme’s stylesheet won’t change the looks inside the admin area.

In the above snippet, you tell WordPress to hook your changes to the admin area with add_action( admin_head, your_thing_here );

Recommended Plugins

You can also use Admin Menu Editor plugin for cosmetic changes like reordering the menu items.

User Role Editor lets you control and assign privileges for each user role.

This is a nifty way to change the looks inside the WordPress admin area.

This is especially useful if you’re developing a website for a client and want to make things a little easier on the eye for the client.