Customizing your theme

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

The customizer works by providing a series of optionshere on the left hand side,that when you select them open contextual panelswhere you can make changes.So let's take a look at what these options areand how we can customize our theme quickly and easily.We've already looked at the Theme Managerso let's skip down to the main customizer optionsstarting 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 appearshere, 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 inthe tag line for this company.And you can also choose to toggle this title and tag lineon and off.Now most themes will allow you to do thisand it's usually done because you can add abackground graphic or a header graphic that shows acompany logo and then you don't want to have boththe 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 browserand also anytime you add your site as an app on your phoneor somewhere else, and it gives you instructionson how to do this, it says,"The Site Icon is used as a browser and app iconfor your site, Icons must be square and at least 512 pixelswide 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 imagewhich is a little bit bigger than what they're asking forbut 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 imageand 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 idealicon 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 IdentityI'll click the back button and go to the next optionwhich is colors.Now the Colors Option will change dramatically dependingon the theme you're using.Some themes will have base color schemeslike 2015 where you can quickly change the entire colorscheme of your site.And some themes will just allow you to change thingslike the background color, and here you see you havea full Color Selector it can choose whatever you want.Or select the Header Text Color.

You'll notice that in 2015 this section on theleft hand side is called the Headerand change the Header and Sidebar color.So you can make something that looks truly hideousif 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 decidethat does not look very good, then simply open the colorsagain and click on Default for all of them,and you'll be returned back to whatever wasthe default color.Now you see that the default in 2015 actually ties backto the base color scheme.

So I'm going to change this back to thedefaults color scheme altogether.After color we have a really interesting featurewhich is called Header Image.And it's interesting because depending on the themeyou're using the Header Image will be very different.In most themes the Header Image will display at thetop of your site across the entire top or within the contentof 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 Imagecan work in a completely different way.So you'll notice here that the Header Imagejust like the Site Icon is telling you that it wants anideal size, but the ideal size for the Header Imagefor 2015 is odd, it's taller than it's wide.

That's because the Header is currently taking upthe 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 clickSelect and Crop and now Word Press will help mecrop 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 seewhy this theme is unusual.So the Header Image actually appears behindthe main content here which may or may not workfor your purposes.So now that I'm looking at it I can see thatdoesn't really work so I'm going to click on this Xto 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 eachso I'll skip cropping for this one and I'll clickAdd 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 Imageand this is the final one.And skip cropping again.Now the reason why I'm adding severalis 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 usedas a Header Image, which can be really neat.Of course as you can see the Header Images I've beenchoosing don't really work all that well becauseyou can't read any of the content, so if you're using 2015you'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 regularcustomizer, now there's one more featureI'm going to show you in this movieand that's Background Image.Just like with Header Image, the Background Imagewill appear differently depending on the theme you're usingand the only way to find out how a background image appearsis by adding one.So for background images you either add a regular imagewhich usually doesn't work all that well,or you can add what's known as tiled images that aresmall little graphics that tile together to create some sortof textured background.

But in this theme I have a feeling that we might be ableto use a regular image because I can see the backgroundas wrapping around this white box here.So I'm going to click Select Imageand then select this big bike image that I uploaded earlierand see what happens, and you can see the background imageactually spans in the background of my contentand as I scroll up and down you can see it appear like that.So that could work but again I have to create an imagethat really works with my content.When you use a background image you have many differentoptions, you can choose whether your background imagerepeats or not, so if you set it to no repeatit'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 themeither 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 backgroundattachment will scroll or not.So you can see right now the background is fixed,meaning as I scroll up and down, the backgroundwill actually stick to the same place,but if I set it to scroll the background will scrollwith the content and here you can see that tiling take placeso here's the end of the image and then the beginningof the image again.

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

Resume Transcript Auto-Scroll

Author

Updated

12/15/2016

Released

8/17/2015

WordPress powers millions of blogs and websites. Learn how to create your own with this powerful publishing platform. Staff author Morten Rand-Hendriksen will help you get the most out of the self-hosted version of WordPress and create feature-rich blogs and websites. Morten explains how to create and publish posts and pages; customize your site with themes, widgets, and custom menus; and extend WordPress even further with plugins. Plus, learn how to get more readers with social media sharing and comments, and how to adjust the settings that keep your site safe and secure.

Note: This course covers WordPress 4.3. We will update the training as WordPress evolves.