This post is a part 7 of Creating a WordPress Admin Theme post series.
In this article I will show you how to change your wordpress admin UI color scheme using admin UI, plugin and programmatically.
Changing Color Scheme using Profile Option
Click on Users->Your Profile menu button on admin UI. There you will find a list of color schemes.
WordPress has different CSS files for each of these color schemes inside wp-admin/css/colors/{scheme-name}.
Here there only a few number of color schemes to choose from. We can extend number of schemes or create our own schemes using plugins.
Changing Color Schemes using Plugins
There are many plugins which adds new color schemes and also allow you to create customized color schemes. I mostly use Admin Color Schemer.
Changing Color Schemes Programatically
We can expand the color schemes in the profile option programatically. First create a folder with a name same as your new scheme name and then make sure it contains the same kind of CSS files as its contained in wp-admin/css/colors/{scheme-name} and also the CSS files contain the same CSS classes and ids with their properties. Make the color code changes inside the newly created CSS files. If you want to name your color scheme qnimate then make a folder with name qnimate inside your theme or plugin folder and the make sure it atleast contains the file colors.css.
Now we gave our CSS files for admin UI ready lets register the color scheme so what wordpress knows about our new scheme. New color schemes can be registered using wp_admin_css_color
<?php
function register_color_scheme()
{
$theme_directory = get_stylesheet_directory_uri();
wp_admin_css_color("vintage", "QNimate", $theme_directory . "qnimate/colors.css", array("#ffffff", "#eeeeee", "#6767c7", "#345098"));
}
add_action("admin_init", "register_color_scheme");
function register_color_scheme()
{
$theme_directory = get_stylesheet_directory_uri();
wp_admin_css_color("vintage", "QNimate", $theme_directory . "qnimate/colors.css", array("#ffffff", "#eeeeee", "#6767c7", "#345098"));
}
add_action("admin_init", "register_color_scheme");
Leave a Reply