FREELessons: 15Length: 1.2 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.1 Adding New Colour Schemes

By default, WordPress has a few built-in color schemes. To access them, you would go to Users > Your profile and then choose the scheme you want from this list. Now you can also add your own color schemes. Let's find out how. Now most of the time, you'll want to change color schemes from plugins because it is the simplest way. But what if those plugins don't have the color scheme that you want? Well, to create one yourself is actually very, very simple. So first, we need to write a function. Lets call this add_color_schemes and were gonna tie this to admin_init. Now to add a color scheme, were gonna use the wp_admin_css_color function. Let's actually have a look at that in the Codex. So we see it takes five parameters. First one is the $key, which is like an ID. Then it's the $name, the $url of the CSS file containing the actual color scheme. The $colors, that's gona be used as a preview. So that's gonna be representing these four colors here. And then if you want, you can also add an icon. But we're gonna stick with just colors. So lets go ahead and call wp_admin_css_color. And we're gonna pass in let's say, tutsplus for the id. For the name, we're gonna say Tuts+ Color Scheme. Then for the path, we're just gonna leave it blank for now. And then for the colors, we're gonna do an array of four colors. Now I just grabbed some colors from Tuts+ here. Here they are and now if we refresh, we're gonna see a new Color Scheme. That says Tuts+ Color Scheme. Now if we click this, nothing will happen because we haven't specified a CSS file for it. Now in order to keep things simple, let's go back to the directory of WordPress. And we're gonna go to wp-admin > css > colors. And here you can see the CSS files that corresponds to each and one of these Color Schemes. So for example, Ocean, you can find it here. So, what I'm gonna do is actually copy the minified CSS from this. And I go to my themes folder. Create a New Folder called admin-color-schemes. I'm gonna paste this in. And then in my editor here, I'm gonna get the current stylesheet directory. So get_stylesheet_directory_uri. Basically this gives me the path to my style.css file. And in here, I'm gonna put dir and to that I'm gonna say admin-color-schemes. And let's actually do here, tutsplus/colors.min.css. And in here, let's actually move this to a new folder. So now I'm gonna save this and let me just quickly show you how this looks like. Now of course, this is minified. But you can see that it represents the colors for all the elements in the page. So if I wanna do something personalized, I would basically just change these colors. I would search for one color and change all of its occurrences and so on. So right now if we go back here, Tuts+ Color Scheme, you'll see that it's exactly the same as our Ocean theme. And if we change these, you can see a preview live of them. So let's actually go with our Tuts+ Color Scheme and update it. All right, and that's how you create your own Color Scheme. And that's how you add your own admin color schemes. Now another big part of the admin UI is the login screen and that can be customized as well. So coming up next, we'll find out how.

Back to the top