Customize Default Color Scheme of WordPress Admin Panel
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.phpFile: Open thefunctions.phpfile in a text editor. - Paste the Code: Copy and paste the provided code into the
functions.phpfile. Ensure it's placed within the PHP tags. - Create the CSS File: In your theme directory, create a folder named
admin-colorsif it doesn't exist. Inside this folder, create a CSS file namedwp-dudecom-custom-scheme.cssand define your desired styles. - Save Changes: Save the changes to the
functions.phpfile 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.