FREELessons: 15Length: 1.2 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.5 Changing the Admin Theme Entirely

The admin UI is nothing more than a big CSS file coupled with some JavaScript to control the interactions.

So, to change it completely and create a custom theme, the easiest place to start is the CSS. Let’s check it out.

Related Links

3.5 Changing the Admin Theme Entirely

The admin theme is nothing more than a big CSS file coupled with some JavaScript to handle user interaction. So the best place to start when you wanna customize it, is the CSS. Let's find out how. Now, to create your own custom admin theme, you've got to start with loading the proper files. So you would create a function, let's called load_custom_admin_theme. And you would tie that to admin and queue scripts, just like that. Now inside, you would basically load a custom style and a custom JavaScript. Something like this. Now, I'm loading these from my custom admin theme folder here, where I have a blank CSS file, and a blank JS file. Now, in here, just to demonstrate this. Let's actually target the body and let's say, I don't like this font and I wanna change it. Well let's change the font family to let's say, Georgia. What a fallback to a serif font. So, now when I refresh I get a different font, and I can even change the color to green on some of the text here. And, as you can see, it is changed right here. Now, writing these functions is the easy part. The hard part is actually figuring out all the classes and all the IDs and all the dependencies that go into a WordPress theme like this, into an admin theme. Because it is a pretty complex theme. And a good place to start with that is actually to go to the WordPress root here wpadmin css and in here you'll find all the css files that you need so for the admin menu for example, you can see the icons, the navigation, so you can basically take all of these and modify them to your liking. You can also go into colors and create a new color scheme if you want, but that's already been covered in a different lesson. So this is like the path that you need to take in order to create your own theme, your own admin theme. You could also take the easy route, which is to find a plug in. So admin themes actually reside under plug ins, not on their WordPress themes. So if you search for admin theme here, you're actually going to find quite a few here. So let's take a look at Slate here. You can see how it looks like and let's actually install it and check it out. So we're going to activate it, and now the entire look of our WordPress back end changes basically. So let's actually comment these out, so we can see how the theme looks like without our changes. And here it is. It's a different looking theme. It still preserves the same functionality as the usual one, but it just looks different. So that's about it for WordPress admin themes. All right, now, we're not going to create an entire theme. That takes a really long time, but you can definitely do it yourself using some of the things you've learned from this course. Also there's an attached assignment to this course, so learn about that in the next lesson.

Back to the top