Customize Default Color Scheme of WordPress Admin Panel

How to change wordpress admin color schemeCustomize wordpress admin panel colorsWordpress admin color scheme pluginChange default admin color scheme wordpressWordpress custom admin color scheme tutorialModify wordpress dashboard color schemePersonalize wordpress admin color paletteWordpress admin panel color customizationSet custom colors for wordpress adminWordpress admin theme color change

Explanation

Want to give your WordPress admin panel a fresh look? Here's how you can create a custom color scheme for it.

Step 1: Register Your Custom Color Scheme

First, we need to tell WordPress about our new color scheme. This is done by registering it with a unique ID and a display name. You'll also need a CSS file that defines the colors you want to use. In this example, the CSS file is located in the admin-colors folder of your theme directory.

Step 2: Enqueue the Custom CSS

Next, we ensure that the custom CSS file is loaded only when a user selects this color scheme. This keeps things tidy and efficient.

Step 3: Add Inline Styles for Extra Customization

Finally, you can add some inline styles to tweak specific elements of the admin panel. This is where you can get creative with colors for the admin bar, menu, and links.

By following these steps, you can personalize your WordPress admin panel to match your style or brand. Just remember to replace the color codes and file paths with your own choices!

Code
<?php
// Hook into 'admin_init' to register a custom admin color scheme
add_action('admin_init', 'wp_dudecom_register_custom_admin_color_scheme');

function wp_dudecom_register_custom_admin_color_scheme() {
    // Define the URL to the custom color scheme CSS file
    $theme_dir = get_template_directory_uri();
    wp_admin_css_color(
        'wp-dudecom_custom_scheme', // Unique ID for the color scheme
        __('WP-DudeCom Custom Scheme'), // Display name for the color scheme
        $theme_dir . '/admin-colors/wp-dudecom-custom-scheme.css', // Path to the CSS file
        array('#1d1d1d', '#ffffff', '#0073aa', '#d54e21') // Define the colors used in the scheme
    );
}

// Hook into 'admin_enqueue_scripts' to enqueue the custom CSS file
add_action('admin_enqueue_scripts', 'wp_dudecom_enqueue_custom_admin_styles');

function wp_dudecom_enqueue_custom_admin_styles() {
    // Check if the current user has selected the custom color scheme
    $user_id = get_current_user_id();
    $user_color_scheme = get_user_option('admin_color', $user_id);

    if ($user_color_scheme === 'wp-dudecom_custom_scheme') {
        // Enqueue the custom CSS file for the admin area
        wp_enqueue_style('wp-dudecom-custom-admin-style', get_template_directory_uri() . '/admin-colors/wp-dudecom-custom-scheme.css');
    }
}

// Hook into 'admin_head' to add inline styles for further customization
add_action('admin_head', 'wp_dudecom_custom_admin_inline_styles');

function wp_dudecom_custom_admin_inline_styles() {
    // Check if the current user has selected the custom color scheme
    $user_id = get_current_user_id();
    $user_color_scheme = get_user_option('admin_color', $user_id);

    if ($user_color_scheme === 'wp-dudecom_custom_scheme') {
        echo '<style>
            /* Custom styles for the admin panel */
            #wpadminbar, #adminmenu, #adminmenu .wp-submenu, #adminmenuback, #adminmenuwrap {
                background-color: #1d1d1d;
            }
            #wpadminbar .ab-item, #adminmenu a {
                color: #ffffff;
            }
            #adminmenu .wp-has-current-submenu .wp-submenu .wp-submenu-head, #adminmenu .wp-menu-arrow, #adminmenu .wp-menu-arrow div, #adminmenu li.current a.menu-top, #adminmenu li.wp-has-current-submenu a.wp-has-current-submenu, #adminmenu li:hover a.menu-top, #adminmenu li.menu-top:hover, #adminmenu .opensub .wp-submenu, #adminmenu .wp-submenu, #adminmenu .wp-submenu-wrap {
                background-color: #0073aa;
            }
            #adminmenu .wp-submenu a:focus, #adminmenu .wp-submenu a:hover, #adminmenu a:hover, #adminmenu li.menu-top:hover, #adminmenu li.menu-top:focus, #adminmenu li.menu-top:active {
                color: #d54e21;
            }
        </style>';
    }
}
?>

Instructions

File Location: Add the code to your theme's functions.php file or create a custom plugin file.

Prerequisites:

Access to your WordPress theme files.
A CSS file for your custom color scheme located in the admin-colors folder of your theme directory.

Implementation Steps:

Access Your Theme Files: Use an FTP client or your hosting provider's file manager to navigate to your WordPress theme directory.
Edit the functions.php File: Open the functions.php file in a text editor.
Paste the Code: Copy and paste the provided code into the functions.php file. Ensure it's placed within the PHP tags.
Create the CSS File: In your theme directory, create a folder named admin-colors if it doesn't exist. Inside this folder, create a CSS file named wp-dudecom-custom-scheme.css and define your desired styles.
Save Changes: Save the changes to the functions.php file and the CSS file.
Select the Custom Scheme: Log in to your WordPress admin panel, go to Users > Your Profile, and select the "WP-DudeCom Custom Scheme" from the Admin Color Scheme options.

By following these steps, you can customize your WordPress admin panel's color scheme to better suit your preferences or branding. If you need assistance with implementation or more advanced functionality, consider reaching out to wp-dude.com for expert help.