FREELessons: 17Length: 2.3 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

4.1 Using the WordPress Customizer

Welcome to the final chapter of this WordPress tutorial. Previously we talked about content management, but a really big part of WordPress is the ability to customize the look and feel of the front-end or the actual website that you’re seeing. There are many ways to do that, and in this lesson we’ll have a look at one of them, called the WordPress Customizer. You’ll learn what it is and how you can use it to change various aspects of the front-end. Let’s begin.

4.1 Using the WordPress Customizer

Welcome to lesson number 11, where we start the third and final chapter of this course. Now, chapter two was about content management, but a huge part of WordPress is the ability to customize the look and feel of the front end or the actual website that you're building. There are many ways to do that. In this lesson, we'll have a look at one of them called the WordPress customizer. You'll learn what it is and how you can use it to change various aspects of the front end. Let's begin. So we're back here in the WordPress back end and to access the customizer, we can go to Appearance customize. This will open up this editor where on the right side, we have an actual preview of the front end. Except without these icons which are just visible in this editing mode and this is just to edit certain parts. And then on the left side, we have a sidebar with information about our project here and also various categories for different settings. So WordPress Demo Tuts, this is the name of our WordPress installation. It tells us which theme is currently active. We'll talk more about themes in the next lesson. But then let's go through each of these categories and see what they're all about. Site identity allows us to upload a logo, change the site title, and the tag line, and also, the site icon. So the site icon is this little thing that you see right here, this is where you can change it. Back colors actually allows us to change the colors in our website. So default is this blue that you see here. Custom, we can change it to whatever we want. Maybe we want something along these lines. And you can see a real time change in the preview here. This primary color is used for the links, it's also used to add this color overlay on top of the images. It's also used here on this block quote border, as you can see when we change it and that changes as well. It's also used in the buttons and also, in the links. Again, depending on the theme, you might have different options here. For example, on this theme, I have the option to turn off this color overlay on the images and just display the image as it is. That's pretty cool. By the way, if you want to save these changes, you need to publish them, so hit Publish. Now those changes are live because if you don't hit Publish, those changes will not be saved. Let's move on. What else do we have, menus. If you remember from the previous lesson, I showed you how to create and use menus in the website. The way to do that was to go back to the back end, go to the menu section and do it from there. But you can also do it from the customizer. From here, we can actually create a new menu. So it's super simple, or you can choose an existing one. You can edit that right here and you can also choose its location. I can change it on the go, see how it looks in the preview. And if I want to publish those changes, I can hit Publish from here. How cool is that? I can also set menus in the three locations by accessing this section right here. It's very similar to what we did previously. But the advantage of using this system is that it's all in one place, so it's much easier to navigate and to use. Next, we have widgets. Similarly to what we do two lessons ago. We can see all of my widgets that are in my footer and I can actually hover on them and they will be highlighted on the screen. So I know which is which. If, for example, I want to get rid of the calendar, I can remove it from here. I can click and drag to reorder these. I can also, just like previously, open up each individual one and tweak their options. And if I want more widgets, I can click this button, add a widget. This opens up a list with all of the available widgets and I can simply click and that widget will be added. Let's add an image, add the widget and now we can see our new widgets right here. Let's call this Gallery, and now it has a title as well. Let's publish those changes and check out the rest of the options. Homepage settings, this basically lets you choose what your homepage displays. Does it display the latest posts, like it does here? Or do you want it to display a static page? So you would have, let's say the homepage as the sample here and the posts page could be an index or a dedicated page. But you need to have that created, otherwise, just leave this as a default. Finally, we have the option to add some additional CSS in here that we can use to further customize our front end, our website via CSS. This is a little bit outside of the scope of this course, so we're not gonna worry about this too much. Now, there are some options here for Publish. You can make these changes and you can either publish them right away. Or you can choose to save a draft of the changes or you can schedule them to go live at a specific date. Let's say, for example, that you're not really happy with how your website looks like now. You make some changes here in the customizer but you don't want them published right away. Maybe you want them published at the first of the month or analytics or something. You can schedule those changes to go live at any date at any time you want. Once you have these changes here, you just hit Schedule or Save Draft or Publish and the appropriate actions will be taken. Now apart from having this great preview here on the right side. The customizer also has a very useful feature for previewing your pages on three different screen sizes. What we looked at so far is a large size, you can think of it as a desktop size. But you can click these icons at the bottom to change how it looks like on different devices. Here is probably a tablet and here it is on a mobile phone. And you can see how the menus look like, how your page looks like on smaller devices. So, use these three options to view your website on different screen widths. That's the customizer. Now, if you want a complete overhaul of how your website looks like, you need to use another theme. And that brings us to the next lesson where you'll learn what WordPress themes are all about. Where you can get them, how to install them and how to modify them to suit your needs. See you there.

Back to the top