Customizing your theme

- Once you've selected a theme for your site it's time to customize it. I always recommend customizing your theme before taking it live to take full advantage of the customization options available and to personalize your site as much as possible. As I mentioned in the previous movie I'll be using the 2015 theme throughout this course. That's because 2015 has most of the standard customizer options you can expect to find. You can follow along using either 2015 or any other theme of your choosing, just be aware that different themes will have different options available from the customizer.

The customizer works by providing a series of options here on the left hand side, that when you select them open contextual panels where you can make changes. So let's take a look at what these options are and how we can customize our theme quickly and easily. We've already looked at the Theme Manager so let's skip down to the main customizer options starting with Site Identity. When you open Site Identity you can do three things. You can change the title of the site, so that's what appears here, and if you do so, you see it appear in the preview right as you type it.

I'm going to leave that the way it is. You can change the tag line so here I'll type in the tag line for this company. And you can also choose to toggle this title and tag line on and off. Now most themes will allow you to do this and it's usually done because you can add a background graphic or a header graphic that shows a company logo and then you don't want to have both the logo and the name and the tagline at the same time. Now there's a new feature here called Site Icon.

And the Site Icon is the Favicon for your site. So the icon that appears up here in the Tab of your browser and also anytime you add your site as an app on your phone or somewhere else, and it gives you instructions on how to do this, it says, "The Site Icon is used as a browser and app icon for your site, Icons must be square and at least 512 pixels wide and tall," from here you can upload any image you want. So I've already created a bunch of images for my site, so I'm going to go and upload some files here. So I'll click Select Files, go to my Desktop and find this image which is a little bit bigger than what they're asking for but it is square, and open it.

The image is uploaded, I'll change the title here to H+ Sport Logo, and then click Select. Now I get to crop the image, so if you upload a large image and you want to crop it you can do so. You see the cropping tool here will always create a square. Crop Image. And now the Site Icon is added down here, and you can also see it up here in the Tool Bar. So when I'm looking at it I see this might not be the ideal icon but I'm not going to change it. And you can experiment with different icons, but this makes that process really easy.

Once I'm done customizing my Site Identity I'll click the back button and go to the next option which is colors. Now the Colors Option will change dramatically depending on the theme you're using. Some themes will have base color schemes like 2015 where you can quickly change the entire color scheme of your site. And some themes will just allow you to change things like the background color, and here you see you have a full Color Selector it can choose whatever you want. Or select the Header Text Color.

You'll notice that in 2015 this section on the left hand side is called the Header and change the Header and Sidebar color. So you can make something that looks truly hideous if you want to. Let's see now, let's make it yellow, now that's great. And if you make a bunch of changes and you decide that does not look very good, then simply open the colors again and click on Default for all of them, and you'll be returned back to whatever was the default color. Now you see that the default in 2015 actually ties back to the base color scheme.

So I'm going to change this back to the defaults color scheme altogether. After color we have a really interesting feature which is called Header Image. And it's interesting because depending on the theme you're using the Header Image will be very different. In most themes the Header Image will display at the top of your site across the entire top or within the content of your site and will push all the content down, but it doesn't have to be like that, and the 2015 theme is a great example of how Header Image can work in a completely different way. So you'll notice here that the Header Image just like the Site Icon is telling you that it wants an ideal size, but the ideal size for the Header Image for 2015 is odd, it's taller than it's wide.

That's because the Header is currently taking up the sidebar here on the left hand side. So I've created a series of images for this, so I'm going to click, Add a New Image, and then I'll upload a file. And first I'm going to try this one that I'm calling Header. This is the standard Big Image. It uploads, and once it's uploaded I'm going to click Select and Crop and now Word Press will help me crop this image to fit in my Header. So I just have to find where I want to crop it, let's say here. And click Crop Image.

And now the Header Image will be applied and you'll see why this theme is unusual. So the Header Image actually appears behind the main content here which may or may not work for your purposes. So now that I'm looking at it I can see that doesn't really work so I'm going to click on this X to remove it. And then I'm going to try adding some other images instead. So I'll upload a bunch of files here. So I created these header files, so I'll upload all of them. And then I can select and crop each so I'll skip cropping for this one and I'll click Add New Image and now the next one, select and crop.

I'll skip cropping because these are all perfectly sized. Now the next one, select and crop. Skip cropping. And Add a New Image and this is the final one. And skip cropping again. Now the reason why I'm adding several is because I can now scroll to the bottom here, and choose Randomize Uploaded Headers. What will happen now is, as we reload pages, WordPress will pick a random photo to be used as a Header Image, which can be really neat. Of course as you can see the Header Images I've been choosing don't really work all that well because you can't read any of the content, so if you're using 2015 you'll have to be really careful about what images you use.

So I'm going to take all these out again. Cause it just looks weird, and click Hide Image and then just jump back to the regular customizer, now there's one more feature I'm going to show you in this movie and that's Background Image. Just like with Header Image, the Background Image will appear differently depending on the theme you're using and the only way to find out how a background image appears is by adding one. So for background images you either add a regular image which usually doesn't work all that well, or you can add what's known as tiled images that are small little graphics that tile together to create some sort of textured background.

But in this theme I have a feeling that we might be able to use a regular image because I can see the background as wrapping around this white box here. So I'm going to click Select Image and then select this big bike image that I uploaded earlier and see what happens, and you can see the background image actually spans in the background of my content and as I scroll up and down you can see it appear like that. So that could work but again I have to create an image that really works with my content. When you use a background image you have many different options, you can choose whether your background image repeats or not, so if you set it to no repeat it'll only show one instance of image, if you select Tile, it'll tile the images both horizontally and vertically.

And then you can also tile them either horizontally or vertically. You can also set he background position, so right now it's set to left, I can change it to center or right, and you can change whether or not the background attachment will scroll or not. So you can see right now the background is fixed, meaning as I scroll up and down, the background will actually stick to the same place, but if I set it to scroll the background will scroll with the content and here you can see that tiling take place so here's the end of the image and then the beginning of the image again.

Using Header Images and Background Images can be really effective in your theme, but you have to design them specifically for the purpose. You'll notice if you just upload random images like I did that they're very few times when a random image will work you have to design the Header Images and Background Images specifically for your site, but once you do you can create some really great visual looks for your site.