Using the Theme Customizer (Classic and Hybrid Themes)

The workshop will share more details on the Theme Customizer in WordPress. The customizer provides a centralized place to change options that control the look of your WordPress site. This workshop covers how to locate and use the Customizer and the options that it includes.

Please note, the Customizer referenced in this tutorial is used with classic or hybrid themes. The content of this tutorial is not applicable to modern Block Themes that are now the default type of themes used with WordPress.

Learning outcomes

1. Locate the Customizer in the WordPress Dashboard.
2. Demonstrate how to open and close the Customizer.
3. Show how to update items using the Customizer, such as site colors or widgets.
4. Use the Customizer to save changes.

Comprehension questions

• Where is the customizer located?
• What all themes can be modified using the customizer?
• What all features can be modified using the customizer?
• Can changes made using the customizer be previewed?

Transcript

Hello, everybody. Welcome to the Learn WordPress workshop on the topic using the theme customizer. My name is Hari Shanker and I will be presenting this workshop to you. So, most WordPress themes support, custom headers and background images can be changed using the WordPress theme customizer. This gives more control and flexibility over the look of the site without having to implement a child theme. And without having to manage theme files manually. Themes typically include default images for the header and background as examples to display how that thing works. images may be selected from your existing Media Library collection, or you may upload images to use which will be added to the Media Library. While you have the ability to customize the theme header and the background images with your own images, most things have recommended size for the header image, which is specified in pixel dimensions, you will need to use a header image that has the right size. And you can also prepare the image outside of WordPress how to use the customizer to crop the image to the proper size. Some themes actually have a flexible header layout that allows for varying dimensions and aspect ratios that do not need cropping. But you may need to try various image sizes to determine what is the best fit for the theme. With all that out of the way, let’s take a look at the customizer. So what is this customizer exactly?

So typically, when you create a website, if you’re a designer, or if you’ve created websites in the past, you know that designers and developers toggle between the back end coding and the front end coding in viewing their work. So the WordPress theme customizer it allows you to change many aspects of the look and feel of your WordPress site without having to toggle between the back end and the front end, not having to modify the code of the theme files. So essentially, you can use the customizer to preview and modify many of your site’s appearances with ease and safety. That’s really what the customizer is. Now, let’s dig deeper and see how the customizer works by taking a look at the dashboard of a WordPress site. Alright, folks, so let’s take a look at the customizer in the WordPress dashboard. There are two ways to access the customizer. One is when you’re on the dashboard, you can see this window where there’s the option to customize your site, you can either click here, or you can go to appearance and click on the Customize button. So I’m going to do this the easy way, I’m just gonna click this button. But that and yes, that has taken me to the customizer. So as you can see on the left hand side, you can see a variety of options. And on the right hand side, you can see the site. So let’s explore by choosing the different playing around with the different options. So we can start at the bottom. So as you can see this three options, which you can see over here. So this is the desktop view of the site. If you want to see the mobile or tablet view, you can switch the icons. So this when you click on this button, it takes you to the tablet view. So how does your site look on a mobile tablet like an iPad, or an Android tablet, this is how it will look like. And you can make changes accordingly. And this button takes you to the mobile view of your site. So most WordPress themes, including 2020, which the site is on, are responsive, this is a great way to test the responsiveness of your site. So let’s go back to the main view. And let’s now go back to the top and explore each option one by one. So the first section shows the active theme, which in this case is 2020. I can change the theme directly, I can either choose between some of the installed themes that I have in my site, or I can click on the WordPress themes option. It shows a list of themes, I can choose anything from I want on this list and installed my Seedlet site directly. That’s one thing that you can do. For now, I don’t want to change the theme. But if I want to, all I need to do is to just choose the theme from this list, click on Install and review. So let’s just quickly take a look to see how how does be like even though we’re not installing it. So I’m going to install I’m going to play around with this theme. It’s installing the theme. And it’s going to show me a preview. So this is similar to the themes section in a normal site. It could take a bit because like this is a local site and it might take a short while let’s see how it goes. All right, so as you can see, we are actually previewing the new theme. So we’ve not really activated theme we are we’re just previewing it we will not activate it. So if I click on this activate and publish button, the new theme gets activated. How do I know this? Let’s check it out. So my site is WP test or test as you can see

it is Still, it still has to infinity doesn’t have the will thing, right. So if I click on Add the activate and publish button, the new theme gets activated. But that’s not what I wanted. So what I’m going to do is I’m going to simply close this pre for the time being, I’m going to go back to the customizer appearance customize it right. So I hope that gave you an idea about how to switch a theme from the customizer. And yeah, so if you wanted to activate a theme, you could just click the Activate. But that’s not what we want to do. Let’s explore the other features of the customizer. So I’m going to start with the site identity feature that you can see here. So this is where you can set the title of your site and the subtitle. So you can see these pencil buttons. The thing is, you really don’t need to go to this section to edit that. You can even call this pencil button over here. So that takes you to the section. This is the advantage of the customizer. So you can directly make changes to your site by going to the respective section to this applies everywhere. So let’s say I want to modify, I want to modify the this is a sidebar on the footer. If I want to modify it, I just go down and I click on this pencil button takes me to that specific section. So this is customizing widgets. Yep, so we can get to the widget section later. But I want to tell you that this is how the customizer works. So let’s go back to site identity, site identity again, as here. So this is where you set the title of your site. So I want to change my title, my sites title is WP test site. I’m going to set it as WordPress test. Testing WordPress, I’m going to set the tagline to testing WordPress. Now, in this section in this section, I can say the site icon what is the site icon. So if you see here by default this it shows a WordPress logo. If I want to set a site icon, I only need to click a loose click here, choose the option and set the site icon. Now please remember, your site icon should at least be 512 by 500 pixels. And I’d recommend keeping a PNG file. So all you need to do is select this option, choose the site icon, select it, and that gets changed. Another thing that we can do is to select a logo for our site. So you can see this option called select logo, you can click here, click on the Upload Files button, select the file, choose it as the logo and make sure that you add an alt text or text I just added a placeholder or text over there, or I can choose from one of the images listed here. And then Media Library, he can sell button. So here we find the option to crop the logo the way that we want. So that’s also pretty useful. Then I can either crop the image or click on the skip cropping option. So I can I can choose the way that I want the image to display and click on the crop Image button or just skipped, just use the skip home button. So for the purpose of this workshop, I’m going to try out copying here. So I’m going to just call this image. And as you can see, the logo just now displays all the way over here. So you find this option called retina logo. So clicking on this, make sure that the logo scales to half its size. So the advantage of this is that it makes sure that the image looks pretty good on high resolution screens. So that’s also pretty helpful. Apart from that. So when you when you do these ages, there’s another important thing to keep in mind. So WordPress allows you to see drafts. So if you want to implement this change, you can directly click on this Publish button over here. But you can see this gear icon on the right hand side, if you click on some gear icon, you can see a few options. Let’s explore these options to see how they work. Right. So I’m going to click on the Save Draft option. And I’m going to click on the Save Draft. So what it does is it saves these changes as a draft, which can be previewed. So let’s say you’ve done something just your site and you want somebody else to view it. So then you can save this option. And then you can share this link with them over here, this might need the person that is using it to log into the site in order to view this. Right. So as you can see, this is the change that you made. But the change has not yet been implemented. So let’s take a look. As you can see, it is showing the text without the logo, it is not showing the text with the low like so. Which means that the change has not yet been implemented. Right. So now if I want to I can even I even have the option to schedule these changes if I want to. So let’s say I want to schedule this change on the 12th of December. And I’m going to click on the schedule button it the same thing happens the change has not yet been implemented.

But as you can see, if I share this customized you are this if I copy if I share this URL with anybody, they can preview the changes before they are actually implemented. Right. That’s the benefit of this option. And this is very helpful. And this is extremely useful. You know at a future time, if you want to look. So if you want to implement this change one hour from now, that’s something that you can do as well. So this action is very helpful. Right? So for the time being, I’m going to set the previous scene, just the previous title that I’d set earlier. So I’m going to set this to wordpresser. Test, and this to testing WordPress, I’m going to remove the logo, and I am going to directly publish this post. Right. So right now I’ve published these changes, and we can see the changes have any refresh the page. Yes, that’s because the team has been published. So I hope I’ve shared with you how to set the site identity. And I’ve also learned how to see drafts of the changes and the scheduled listings and features that is particularly helpful. So now Next, let’s take a look at each of these options. So the first The next option is colors. So this option allows you to set a color. So we are looking at options with 2020 thing. So the 2020 team allows you to change the background color, you can choose any color that you want here. And you can also choose a header and footer background color. So this is the header footer header background, and this is the footer background. I can I can really change it here if I want to. So I’m going to set this to red. And I can also see the primary color. So that would change the colors or colors of these links. So right now it’s red, I can just do something else that I want. And I’m going to publish the seniors, as you can see, the changes have been published. And you can see over here. Now, as I mentioned earlier, if I want somebody to preview these changes, I can do that as well. So all I need to do is to save this as a draft. And I need to save the draft first. Because before the link gets generated, I can just share this link with somebody if they want to preview these changes. And they can see if this is good or bad. And then we can revert back to the old version. So right now I’m going to keep this as default for the time being. Because, right, so I’m going to set this to default as well. And yes, so if you if you ever make a mistake, and if you want to go back to the default options, just click on these default buttons over here. So that we get you to the default option with the team theme. This is also particularly helpful, I am going to implement this in So one thing that you might want to keep in mind is sometimes you might forget to publish this, but changes and you might wonder why the changes have not really been published. That’s because probably, there’s options to save draft or schedule. So make sure that it’s to publish in case you don’t see these changes in the front end. Right. So those are the colors. Next we want a theme options. So as you can see, each theme has a different set of custom options, which can be changed in WordPress. So we see a few options here we see a show search in header we see show author bio. And we see this up let’s let’s take a look at how this works. When I click on the show search in header button, you it really shows up the search option over here. And it’s so this is enabled by default, I had disabled this previously. But if I do not want to show it, I can just uncheck this option, and the search option will go away. So the next thing is WordPress allows you the option to set an author bio. So let’s say you’re the author, and you want to set a bio for your site. Now, if you do not want to do that, if you don’t want to show the author bio, you can just uncheck this option. So this is not exactly applicable to my test set because I have not set an author bio. But if I have an author bio, and if I don’t want to show it, this is one way to do it. So the other thing is, so as you can see, the posts that I have in my site, they’re showing me a dark content, I don’t really want to show that because like that makes my site very long, I did not want to do that. If that is the case, I can just do the summary option. And I can publish my changes. So as you can see, that is that is only showing the supposedly showing the summary right now it’s not showing the entire content. So that is that is very helpful.

So if you’re running a blog post, which has a lot of posts in the front page, and if it looks really long with all the content, so some of your posts might have 1000 words, so find what 600 words, and you don’t really want to make your posts look that now. So if that’s the case, this is an option that you can try to going back. The next option that I want to show you is the cover page template. So this is a specific option that relates to the 2020 theme. So the 2020 theme comes with a cover page template, let’s quickly explore what that is. So I’m going to go to the backend of my site first to just to show show you that. So I’m going to pages. So I’ve created a page for this I’ve got a favorite template for this. Let’s explore the car page template. Over here, you can see the section called page attributes on the right hand side. And you can see that this page is assigned a template called the common template. That’s what it means by setting a cover template. Alright, so we’ve seen what a cover completed let’s let’s open the cover page now. Right so you can see the cover page. Now this section, this section in the customizer allows you to customize the cover template. Let’s see how it works.

So I can either choose to display a fixed background image or not. So this creates a parallel This creates a parallax option. I can I can either choose to display it or not. So I can do this by unchecking or checking this option. Now here, I have the option to set an overlay background color, so currently is red, as you can see over here, I can change it to something else that I want. So I can set it to whatever fancy color that I want. I can also change the overlay text color. So make sure that these colors match because if they don’t match, they might look odd. So but interestingly, WordPress, by default, so Gutenberg WordPress, the WordPress editor allows you to I mean, by default search in such a way that doesn’t really it all, it looks, it doesn’t look really bad. So but it’s important that these things can’t. So right now, there’s not much of a contrast. So like, if I said something like this, it looks very weird, it doesn’t look doesn’t look great. So it might help to have some sort of contrast set up here. And as always, like if you think you’ve done something wrong, you know, always go back to the defaults. So that’s really something that you can always try. So I’ve gone back to the defaults, as you can see, the other option here is the overlay capacity. So it’s good to set this to a high value, so that and make sure that the contract is high, so that the content is readable. So that is also pretty important. Right, so that is the cover template. Let’s go back to the background image. So remember, I told you about the about the so the fixed background image thing, too, this is why you can actually set a background image, I’m going to show that to you by setting a background image that I’ve set for my site. Right, so now you can see that a background image has been set, and it looks really good, it really great. Now I can change the position of this image, I can choose to keep it towards the right, I can choose to move towards the left, I can choose to keep it in the center, I can move to the top to the bottom to the left hand right corner. So this this option is really great. I can also choose how to display the image. So I can choose to set to fit to set to fit the screen or to fill the screen. This makes the image really big. So it’s always good to keep it to the original section or to fit the screen option. So this is really helpful too. In this case, the image is actually a little bigger. So that’s why you see a bit of an overlap, overlap towards this adds a background image to the page. So it might or it might not always be a good idea to have images like this, but in some cases, it might really be suitable for your site. Now you see this option called repeat background image. So if you uncheck it, the image will stop repeating, which means that they may so like only the image only display once. So if you choose the option repeatedly, so if it’s a small image it keeps, you see it in a tiled fashion, so the image keeps repeating in the background. If you want to do that there’s a neat option. And also, you can set up the options called with page. If this is unchecked, the image just means that but if you check this option, the image essentially scrolls whenever you scroll the page. So those are those options. And so for now, I don’t know I do not want to set a background image. So I’m going to remove this.

I’m going to go back. And the other option is menus. So menus are the 2020 theme has several menu options. Let’s take a look at all those menu options. So there’s this top horizontal menu, which is this, the desktop expanded menu, which is another option. There’s a mobile menu, which you can see in your mobile devices. And there’s a footer menu. So the footer menu is at the bottom. Let’s take a look at it. So this is the footer menu. So these are different options, you can you can choose an option for the menu. So we just have one menu on the site, you can choose you choose whatever menu that we want to display in each of these options, and it will display accordingly. So this is where the extended menu shows up. So in case you want to add more things to your menu, this is why the extended menu shows up. This is the desktop horizontal menu. And there’s a mobile menu which is viewable in mobile devices. If you want to see the mobile menu, we can go just here. This is this is the mobile menu. And so these are these different menu options. So for now I’ve set all of these to the same menu, I can actually add more. So we just have one menu over here. Let’s play around with a bit. I’m going to add a new menu called test. And I can set this to whatever thing I want. So let’s say I’m setting this to the desktop experiment menu. And I’m going to add a few options. How do I add options to the menu, I can click on this add items menu. I can add some links over here. So you can add posts, you can add categories, you can add tags, you can even add custom links.

So that’s the beauty of these menus. And I can even set multiple options. And so if you click on this button, automatically add top level pages to the menu. So whenever you create new pages gets added to this menu. So we have several options. I’m going to click on the publish button. And let’s take a look at this. So as you can see, this menu now differs the extended menu you know differs from the main menu or from the Home Menu. These are the contents of the home menu. These are the contents of the experiment. So each menu shows which of the locations it is assigned to. So you can also edit these menus. If you wanted to move up the ruin option, you can just go here and just click on remove button. And, as always, if you want to implement these changes, you must click the Publish button. So when you’re when you’re whenever you’re on the customizer, whenever you want to implement the changes, make sure that you click on Publish button unless you click the Publish button the changes will not be given. So that is something for you to keep in mind. Let’s move on to the widgets. So each theme has separate widget areas. So the 2020 theme has to fit widget areas in the footer widget over here. So this is where you can change the widgets. You can you can add widgets or remove which sets you want to so if we click on the Add by widget button, you can see a variety of options. So these options depends on the plugins and the themes that you have. So what do you see is a list of the core widgets. So this includes a casement, which is a plugin that comes with WordPress archives, audio categories. So if you need to add a widget, you can just choose the option, whatever option that you want. Let’s say I’m using the image option. And the widget has the respective features, you can add that and it gets displayed. Now keep in mind, this feature is going to change as we go forward with WordPress in WordPress 5.6, we will have the option to customize the widget widget a lot. So Full Site Editing is coming to WordPress. So in future versions of WordPress, you will be able to customize this directly from the front end. So this is actually going to change. But for now for what Russ has as an as a as of now when WordPress 5.5 is the latest version. This is how you add things to widgets in WordPress. So and yeah, using the customizer. So again, you can choose different options, you can add whatever widgets that you want, you can remove widgets, and do it. Moving on in go to the homepage section. So if you want the home page, which is this to display the latest posts, this is where you do it. So currently, it is set to display the latest posts. But if you want to if you’d rather have a static page, this is very good. So we’ve created a cover page, if you want that to have your if you want that as your home page, this is where you do it. But if you’d rather if you if you’d rather have a different page for displaying if you want, if you’d rather have a different page, displaying your posts, this is what you said and as long as you click on the publish button and the changes to get saved. Alright, so moving on, we have a section called additional CSS. So let’s say you want to modify some sections of your site with CSS. This is where you do it. Now how do you how do you make changes using CSS? Now keep in mind, this is not exactly a CSS workshop. But still, I’m going to explain to you real quick on how you can make something just with CSS. So let’s say I want to change the contents of this, this section. So I’m going to use the Inspect Element option of my browser. Now, that is showing that this entry that this this CSS class is called entry title and treat it. So I am going to add that over here. Right now I want to change the font size. I’m setting the font size to 20 pixels. Yes, it is changing. As you can see, I’m going to set it to 60 pixels, or Howard make it bigger. Yeah, it’s it’s it’s a little bigger. Now. I can change the colors also if I want. So I’m going to set it to red. Right. So you can add all the custom sizes that you want. And if you click on the publish button, it gets implemented. So remember what I told you about saving drafts. Now, this option, the option to save draft. So schedule posts. This is extremely helpful when it comes to CSS. So if you if you’re if you’re playing around with custom CSS, and if you want to see how it looks like this feature is extremely ever for one you can see the status live, you can you can see the CSS changes live on the right hand side. But if you want to share these changes with somebody else to see if it looks good, this is extremely helpful. So this is one of the most important features of the customizer, and this is what a lot of people use it for. So please keep this in mind. And whatever changes you make make sure you click on the publish button. And so if you’re on the draft section so this is a common mistake this has happened to me personally a lot.

And you click on this you can come you try to publish anything you don’t see the thing is happening that is probably because this is set to save drafts. So in case your changes are not saving, just go back Yes, make sure that this is said to publish. Click on the publish button so that the changes get saved. So I hope I’ve explained to you how things work in the WordPress customizer. Alright folks with that we’ve come to the end of this Learn WordPress workshop on customizers. I hope I’ve clearly explained to you the features of the customizer. One thing to keep in mind is that the examples that I’ve showed you those may may not be seen with all themes. That is because each theme has its own set of customizer features. So the features that you see in the customizer might differ from theme to theme. So some of the options would remain common like site identity and additional CSS that is common with all WordPress sites, but different themes we have different options, some themes, we have the Theme Options section, which we saw with 3d printing, which could have custom options. Other things, we have custom sections as such. So some things like menus, site identity, additional CSS homepage settings, those are common. But for other themes, this might differ. But in general, the option to make changes to the site remains the same. And if you’ve seen this workshop, you should have a fair idea about how the customizer works and how we can implement these changes. And with that, we come to the end of this workshop. Thank you so much for attending, and I will see you online on a Learn WordPress workshop very soon. Bye for now.