Site identity - WordPress Tutorial

- [Instructor] The customizer gives you the tools to change the appearance or behavior of the front end of your site. You can get to the customizer from the admin panel by selecting Appearance and Customize. Or from the front end by going to any view you want to change and then selecting Customize from the WordPress toolbar. If you go to the customizer from the admin panel, you always land on the homepage and the preview. If you go to the customizer from the front end, it opens on whatever view you're currently on. So if you're on a single post, it will open the preview on that single post. If you're on an archive page, it'll open on the archive page and so on. Once the customizer is open, the preview here works exactly like your regular site. And from here you can navigate to new views, so individual posts or pages, or archives, or anything else. But it also has these new features including these bold blue tic marks here that show you can edit parts of the view. The options available in the customizer sidebar will depend on the current activated theme. In this example, I'm using the new Twenty Nineteen theme which has relatively few options. Later on, I'll show you a theme with more options so you can see how that changes this layout. The first option in the customizer menu, is site identity. Here we find two features we've seen previously. Site title and site tag line, And these are also the features that are tied to these two blue tic marks here. Site title and site tagline. If you click on one of these tic marks, say this site tagline tic mark, you are taken directly to that feature in the customizer sidebar. So you can edit it immediately. Once you edit something in the customizer, let's say for example, this should say the riskiest design agency with worst results, you'll see those edits take place immediately in the live preview, and that's the point of the customizer. It allows you to experiment with the presentation of your content on the front end before taking it live. You see, anything you do here only happens on your computer. Changes only take effect once you click on save and publish at the top here. In addition to the site title and tagline, there's also options to configure a logo and a site icon. The logo option appears if, and only if, the current active theme supports this feature and how exactly a logo is displayed on the site depends on the design of the theme. The best way to find out is to simple try it, and to do so just simply click select logo. This opens your media library where you can see all the files that have already been uploaded to the site. You can then select any one of the images from your media library, or you can go and upload a new file. In this case I've already uploaded a square image of this icon here. So I'm just going to select that. Once you select it, the theme will tell WordPress what kind of crop ratio it needs for this logo, in this particular theme, that is a square, so that means you can upload any image you want and then WordPress will then help you crop it to fit the necessary size for the theme. So here you can grab the cropper and change it around, and it will conform to whatever requirements the theme has. In my case, I'm just going to use the entire image. So I'll click crop image. The logo is now applied in the customizer, and you can see a preview of where that logo appears in my site design. So in this case the logo appears up here towards the top left hand side, and when I hover over it, I get this circle around it highlighting that this is actually a button. Now that the logo is present in the layout, I also get an edit button that will take me directly to that logo feature so I can change the logo if I uploaded the wrong file, or I just want to swap it out for a different one. The site icon feature defines the favicon for the site. That is the icon that appears up here in the browser tab or bookmark. This feature allows you to add a visual identity to the site for a quick reference, and it also kicks in if a user decided to dock your site to their launch screen on their mobile devices. It's always a good idea to upload a logo to the site icon feature, just remember that it needs to be a square image. Adding a site icon is done exactly the same way as the site logo. Simply click select image, select an image you already added to your media library, or upload a new one, click select, and it gets added after you crop it. Now it's important to keep in mind the site icon feature allows for transparent images and in this case I uploaded a transparent PNG image, and you can see here that the preview for an app icon looks a little bit odd because it has a black background and then this icon on top. Now that might not be the way it gets displayed in a mobile device because the mobile device may have a different color background and you don't know that. So when you upload your site icon, make sure you consider transparency background colors and everything else so it always looks good. In my case, the transparency works, at least in the browser context, and you can see up here we now have this little alien up here as a favicon for the site, and that will also happen throughout the rest of the site on the front end. Once you made changes, you may want to publish right away in that case you click publish, or you may wants to have someone else look at it, in which case you click the cog here and open the panel to save draft. You may also want to schedule the release of this new layout at a specific date and time. You can do that by selecting schedule and change the setup here. Or if you don't like your changes, you can simply click discard changes and they all go away.