Adding a Custom Stylesheet to WordPress Admin Area
Custom Code Solution
This solution lets you add your own CSS styles to the WordPress admin area. Place this code in your theme's functions.php
file or in a site-specific plugin.
Basic implementation to enqueue a custom admin stylesheet:
function add_custom_admin_styles() {
wp_enqueue_style(
'custom-admin-styles',
get_template_directory_uri() . '/css/admin-style.css',
[],
'1.0'
);
}
add_action('admin_enqueue_scripts', 'add_custom_admin_styles');
Alternative version with specific page targeting and file verification:
function add_custom_admin_styles($hook) {
// Only load on specific admin pages (optional)
if ('post.php' != $hook && 'post-new.php' != $hook) {
return;
}
$css_file = get_template_directory() . '/css/admin-style.css';
// Only enqueue if file exists
if (file_exists($css_file)) {
wp_enqueue_style(
'custom-admin-styles',
get_template_directory_uri() . '/css/admin-style.css',
[],
filemtime($css_file)
);
}
}
add_action('admin_enqueue_scripts', 'add_custom_admin_styles');
File Structure
- Create a file named
admin-style.css
in your theme's /css/
directory
- Add your custom CSS rules to this file
Example admin-style.css
content:
/* Example styles */
#wpadminbar {
background: #2c3338;
}
.wp-core-ui .button-primary {
background: #0073aa;
border-color: #0073aa;
}
Plugin Solutions
If you prefer using a plugin, here are reliable options:
-
Admin Menu Editor - Customize admin menu appearance and functionality
-
Admin Theme - Change admin color schemes and styles
-
AG Custom Admin - Customize various admin panel elements
Additional Notes
- The stylesheet path (
get_template_directory_uri()
) assumes the file is in your theme directory
- For child themes, use
get_stylesheet_directory_uri()
instead
- Use specific hooks like
login_enqueue_scripts
for login page styles
- Version number helps with cache busting (using
filemtime()
in the second example automatically updates version when file changes)