How to Add Custom CSS to WordPress Admin?

In this post, I will show you how to add custom CSS to WordPress admin area.

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');

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

You can also use Custom CSS Injector plugin to add custom CSS only to admin area.


I hope you like this post, Please feel free to comment below, suggestion and problems!

(Visited 7 times, 1 visits today)
Chandra Kumar

Hello World, I am Chandra Kumar from New Delhi, India. I am professionally developer, programmer and blogger. I am the founder of WebShouters.com.

0 Comment

Leave a Comment

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