Custom code for adding a custom stylesheet to the WordPress admin area

Sarah L Dec 18, 2024 Admin Customization
How can I change the look of the admin area in WordPress with my own styles?
How can I enqueue a custom stylesheet for the WordPress admin area using the admin_enqueue_scripts hook?
Andy answered Dec 18, 2024

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

  1. Create a file named admin-style.css in your theme's /css/ directory
  2. 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:

  1. Admin Menu Editor - Customize admin menu appearance and functionality
  2. Admin Theme - Change admin color schemes and styles
  3. 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)