Topic Progress:

Course Progress

Get Access To Over 50 Free Videos  To Learn WordPress

3: Working With The Customizer

Running Time:  11:47

There’s no doubt that any WP Theme can be tailored to meet your design requirements.

The question is…how?

The simplest way is to start with The Customizer (Appearance > Customize) as I do here. Many themes have the same options but they will differ from one theme to the next. Premium themes will have more options compared to free ones.

But custom styling goes well beyond what you can do with The Customizer. These options include:

  • Using a plugin to make changes such as font or color.
  • Using a page builder plugin.
  • Creating a Child Theme to gain total control of your theme’s style. (Requires knowledge of CSS – Cascading Style Sheets – which I love.)

Transcript Of This Video

OK, spoiler alert. I’m not going to be showing you everything about custom styling your theme in this video. I couldn’t even if I tried. What I’m going to do is focus on what’s called the “Customizer” in the WordPress admin. There are two ways to get there. One is to go over here to “Dashboard” and go to “Appearance” and go to “Customize.” We’re going to be spending time here, but the other way to get there is– Let’s click this X. Let’s go back to the front side of the site, and you have a link right next to the main link. It says “Customize,” so we can go right to that page in our admin, and here we are. Let’s explore what this is all about.

So you have a left side here, a menu of choices, and a right side here that is a preview of your site. You should know that any choices that you make here will be available as a preview and they won’t be live on your site until you click the “Save” button up her, which is currently not lit up. This particular theme, 2017, has these little– I don’t know what they’re called, little edit buttons. If you click on this, it will take you to the menu section. Let me show you another one, by an example. There is one right over here, and if you wanted to change the header image, you could do it that way. I don’t particularly like these little buttons over here, and you won’t see these in every theme, but it’s certainly here in 2017.

OK, let’s look at the left-hand side. It says we’re using 2017 theme if we want to change the theme we could do it this way. But there is another way to change the theme besides doing this way, and that’s just going to “Appearance” “Themes” and making your change. In fact, that’s one of the things about the Customizer itself is that a lot of the things that you’ll find here you can find elsewhere in the WP admin. So, I’m going to change this and go back to here, click on that and go back to there. Let’s look through some of, if not all, of these. For site identity–

In a previous video, I did this, I de-selected this, so you can see I didn’t want the site title and the tag line to show up on my pages. So, I just did that. Now site icon, this is sort of interesting. These are also called favicons, or you’ll see all kinds of names for them. Here’s what we’re talking about. I just switched over to the site that is the prototype site, and you can see it right over here, this is the site icon. You might say, “Why bother with this?” It helps to brand your site compared to other pages. Look, these are pages over here, I like the fact that it’s pretty easy to do and it brands your site. Not only that but if somebody bookmarks your site, it’ll show up in the bookmark. There’s lots of places that this is going to show up.

Let’s add a site icon, and what I’m going to do is just– It’s just an image. Now my theme says that you should use a 512×512 image, I’m going to get my images out here. Here is my site icon and I’m just going to drag it over here. Let’s get rid of this. I’m going to– OK, and you can see that big image 512×512 has just gotten shrunk down to right over here, very small. But with that done what I’m going to do is, I could remove it or I could change it, but I’m not going to do anything. I’m just going to go over here and save. So, that’s done. Now I want to go back to the start of the Customizer, and you should always look for this little arrow over here, that’ll take you back to where you want to go.

It could be a little tricky navigating the Customizer when you’re first starting out– Actually, it’s still tricky for me, and I’m not first starting out. My theme gives you the option of choosing colors, so let’s take a look. Normally this theme has it set over here, and it’s “Light.” Here’s the “Dark” option. Like I said, this is a preview of all my pages, which will have that “Dark” option. It’s nice, but it doesn’t suit my needs. I tried figuring out how the custom color bar worked, and I couldn’t do it for some reason. We’ll have to let that go. I’m just going to keep it on the “Light” option. I can save and update, and for the header media, I had a whole video on this. Changing the header media, where for this theme, you could use a static image, or you could use video. So, I chose that.

Now these options over here, menu widgets, static front page, these all can be done elsewhere in the WP admin. For me, I’d rather not use the Customizer to work with my menu widgets and static front page, but I’ll show this to you anyway. If you click on “Menu,” you’ll see that I have a menu right over here, “Menu location,” this tells me the location of where the menus are. I only have one menu, and it’s a top bar, the top menu. If you go to the video that I did on setting up your menu, you’ll see a little more in detail how I did that. Also here are all the different pages in my site, and I can drag and drop. The order– Like I say, I don’t like to use it this way. I find this area to be a little cramped for what I want to– Or, how I want to work. Widgets are something that I take up in the module on blogging, but this theme supports three different widget areas, and I’m not going to get any further along into that static front page. This is also something that could be set elsewhere in the WP admin, and I prefer to do it that way.

I took that up in the first module, and I took it up in the second module on links. Anyway, I have the home page as my front page and a blog page as where my blog posts will be located. Then theme options, let’s take a look at that. These are unique for this particular theme, and I don’t use this, but you can explore this if you want. One of the things that I did though is I set this as one column. Let’s take a look at that. Here we go. Now, what’s the difference? It doesn’t look like much, but here’s two column and here’s one column. I prefer that to match what I did with the prototype site. You can see right over here, and this has got one column.

I know it doesn’t look like much from one and two columns, but it is one column. So let me save that, any time you make a change, save the change, and then go back. The other one over here is if you know any CSS, this is a place– It’s not the only place and not the only way to custom code the styling of your site, the other thing that’s interesting about the Customizer and that you won’t find anywhere else is that you can get these preview modes of what this would look like in a tablet.

What this would look like in a cell phone. OK, that’s interesting. Also, if you find that you need more space to look at everything, you can collapse your menu, and the options you have in the Customizer are determined by your theme. Every theme is going to give you a different set of options, but typically they’re going to always give you– They certainly give you the name of the theme, the ability to change it here, and they usually give you site identity, menu, widgets, static front page. Those are additional CSS, and those are ones that you’re going to see in every theme. Before I take you to look at another theme, by way of an example, let me show you this.

You click on X, and it takes you back to your site. OK, so we’re good. All I did was make this into a one column layout, and I put this in over here. All right, I wanted to show you another site. This one uses a theme called Amadeus, which I’ve used for one or two clients now, and it’s really good. It’s a free theme and the only reason why I’m going to show you this is if I go to “Customize” here you will see a lot more options. If I go over to the header area, it has four sub-areas over here. So here’s where you would change, for example, the header image.

You have other options over here, so if I go into– Let’s go down to fonts. So, here’s where I can change fonts. You’ll notice in the 2017 theme the Customizer didn’t allow me to change fonts. Here I have the option of using Google fonts to change the files for my site. Here’s another one, colors are a little more robust in that we have a lot more options in how we want to set the coloration for our fonts. I also have the ability with this theme to choose a background image that I would see on every page. I’m not crazy about background images, but at least I would have the option with this theme. Menus, widgets, static front page– Remember I said that’s standard and all the themes, so we’ve got those here. I have documentation, and this is good in case I need to have documentation. This theme is a little more complicated than 2017, so it’s always good to have the documentation and additional CSS if I know coding I could use that. Of course, these options over here are about changing the screen.

To sum it all up, the Customizer is a place that a lot of people go in their WordPress admin to perform various tasks including doing some customization that deals with style, but also to manage things like widgets, menus, and so forth. The options that you’ll see that is what you’ll see over here will vary from theme to theme. Personally, I’m not crazy about the Customizer, but if that’s something that you want to work with, go ahead. Remember this is not all the things that you can do to change the look of your website.

All 6 Modules In This Course

  • All Free Access

    To see all the videos in this course just fill this out to create your free account.

  • Please Read This

    You're about to subscribe to my WordPress Big 3 newsletter and that's a good thing!

    I'll keep you up-to-date with WordPress news, resources and advice delivered to you almost every Sunday.

    My newsletter is commercial free except for an occasional announcement of a discount for one of my services.

    No worries. Your email address will be kept safe and sound with MailChimp. I will never use it for any reason other than sending the WordPress Big 3 Newsletter to you. I value you and your privacy.

    If you don't want my newsletter you will still be able to see many videos in this course.

Illustration of 2 people talking

Get A Free 60 Minute Screen Sharing Consultation From Bud Kraus, Experienced WordPress Site Developer and Instructor