Introducing the Customizer

- [Instructor] Over the past several versions of WordPress, some important new features have been added to the customizer. So let's take a look at these before we dive into the details, and just for reference, in this particular movie, I'm showcasing our site using the new 2017 theme because some of these features are tied into that new theme. First off, when you open the customizer from the toolbar, you'll notice there are some new icons that appear in different locations on your site. You can see one up here on the top. There's one next to the title, one next to the description. When I scroll down there's one next to each of the widgets and so on and so on.

These are short links that give you visual cues about what elements can be edited in the customizer, and if I click them, you'll see I'm taken directly to that section. Here we have header media. This is the site title, site tagline, and if I click on the widgets, I'm taken directly to that widget. Now to getting through your site in the customizer, you may discover there are editable areas you were not aware of thanks to these buttons and this feature also gives you a clear visual reference for features that are only available on specific pages. Like custom side bars or menus.

WordPress 4.5 introduced new preview toggles at the bottom of the customizer toolbar. From here you can toggle the preview between desktop, which is the default, tablet, and mobile molds to test out the responsiveness of your current theme and how your content appears across different devices and screen widths. My advice to you is to always preview your site on mobile before taking any changes live, because these days, most of your visitors will come to your site using a smart phone rather than a full size computer, and this feature in the customizer makes that possible.

In that same release, we also saw the inclusion of theme logo support. Some themes now have the ability to add a custom logo, and when they do, it's controlled under the site identity tab in the customizer. Right here at the top you'll see logo as an option, and from here you can select any image. Either from the media library or by uploading an image. So I have an image on my desktop I want to use. Let's see, desktop, here it is. I'll open that image, click select.

Then I'm taken to a crop tool where I can crop my image to fit and depending on the setting and the theme, I may be able to change the dimensions of that image as well. So I'm just going to select the whole image and click crop image, and now you'll see that image appear as a logo on the site. Now it's really important to remember that how logos are incorporated in a site depends entirely on the theme. Some themes don't display logos at all, and some themes display logos as a specific dimension in specific locations. So you need to test with the current theme you're using to make sure this feature is available and that your logo fits with what is required.

For reference, the default theme's 2015, 2016, and 2017 all support custom theme logos. Header images, like what you see here, and background images that span the entire content of the page have been around for a long time in WordPress, and in WordPress 4.7, that functionality has been extended with header and background video in themes that support them. If we take this new 2017 theme as an example, you'll notice the customizer shows a header media option rather than just the header image option.

If you open header media you'll see an addition to adding header image from your image library or uploading a new image. You can also add a header video. Now here you can either upload a video to WordPress using the MP4 format, or you can use a video from YouTube. My recommendation is to use a video from YouTube. So create your own custom loop video you want to use in the header, and then upload it to YouTube to use on your site, and here's the reason why. Video hosting is an extremely labor intensive process for your server, and if you place a video from your server onto your site, and then 100 or 1,000 people come to your site at once, they're likely going to take your server down unless you have a very advanced server, simply because video hosting is so complex.

Using a third party service like YouTube bypasses that entire problem and offloads the task of serving up that video to an expert service that only does video hosting. So to show you how it works, I've created a custom video. You can see it here on YouTube. It's pretty crappy to be honest. It's just a video to showcase how this works. So here you see my editing environment with some fancy bouquet and stuff, and I want to use this as the header video on my site. All I have to do is find the video on YouTube, make sure you have the rights to use it on your site.

Probably make it yourself so you don't have any ads. Then copy the URL, and paste it in right here. Enter a YouTube URL. Click anywhere, and now that YouTube video is brought into the site and here you can see the video header playing. So now my site actually has a video header at the top of the page that will loop through again and again. It'll play without audio, and it also has very simple player controls so you can turn it on or off. Now of course, this video you see here is pretty rudimentary but you can see how you could make something really interesting out of this, and if you remember that there's also sometimes support for video backgrounds on your site, you can truly make an interactive experience out of it, but take my advice here.

If you want to use a video, make it short, and make it nice and generic. If you add too much video content, it becomes very hard to navigate your site simply because your browser will be pulling down all that video content and playing it in the background. Finally, if you want to make some small changes to the appearance of your theme without taking the step of creating a child theme. The customizer now has an additional CSS feature down here at the bottom. From here you can add your own custom CSS and that code will take precedence over the theme.

This is a great place to get started experimenting with CSS because changes only happen in the browser until you save them, and this feature is not destructive. Meaning you can't damage the theme or take your site down by adding some new elements here. If anything goes wrong, all you have to do is go in, delete the additional CSS, and everything will go back to default. To use this feature, we can simply target any element. Let's say we look at this one for a second. It's just a block quote. Here we have block quote and a paragraph.

So maybe I want to change the styling for this. Let's see, I'll say block quote, and then say background red. And as you can see, this custom CSS now applies to my theme automatically, and I can mess around with all the CSS on my theme without actually having to build a custom environment, or set up a development environment, or do anything else. This gives me detail control over all CSS on my site, and like I said, if you do something wrong here, just delete it, and everything goes back to normal.

Now if this is the first time you're seeing CSS, and you want to know what it can do, we have all the courses you need from understanding the CSS box model and onwards. Just go check it out. All right, now that you know what's new in the customizer in version 4.7, let's dig in and check out all of its features in detail.