1.2 How to Install and Customize a WordPress Theme
In this lesson, you’ll learn how to install a theme via your site’s admin screens. Then I’ll show you how you can control the way your site looks by customizing your new theme using the WordPress Customizer.
I’ll also show you where to find themes. My advice is, if you’re looking for a free theme, to always use the WordPress Theme Directory. I’ll use a free theme for this lesson, but of course another great place to look for professional-quality, Customizer-ready WordPress themes is ThemeForest.
1.How to Install and Customize a WordPress Theme2 lessons, 10:24
1.2 How to Install and Customize a WordPress Theme
[SOUND] Hello and welcome to this Tutsplus coffee break course on Installing and Customizing Themes in WordPress. In this course, I'm going to show you how to install a theme. And how to customize it using the customizer. And I'll use this demo site that I've set up. Now this site is running the 2016 theme and it's got some dummy data in it, which I've added using the theme unit test data. And there's a link to that in the notes for this course. Now, before we start installing a theme, let's just take a quick look at what a theme is. When you first install WordPress, the 2016 theme will be loaded on your site and will be activated for you by default. So it's not something you might give a lot of thought to, but the theme is important for determining how your site looks and how it displays the information that you add to it. So there are different themes out there that do different jobs. There are hundreds of free themes that you can install in your site. And they all do quite different things. And as you'll see there's a feature filter that helps you choose the type of theme you want. So for example, if you want a photo blogging theme, you can apply that filter and find a theme that's suitable for photos. And I'll show you how to do this from your site's admin screens. But this theme directory in WordPress is the first place to go to get a theme. My advice would always be, if you're looking for free theme, only get it here. Because if somebody is letting you download a free theme somewhere else, you never know, it might have some malicious code in it. The themes in the theme directory are all checked to make sure that they're compatible with WordPress. That, they're bug fee.. They've got no malicious code in them. And that they'll work well for your site. Now I've chosen to use a free theme, from the WordPress theme directory. But of course, another great place to look for a customizer ready WordPress theme, is on ThemeForest. And if I do a search for customizer here, you can see that there are over 3000 themes that meet this search term. In some cases it might be because customizer's in their name, but many of these will be customizer ready. So you can customize the theme to make it work in just the way you want to for your site. So, let's go back into our site and take a look at the dashboard. And this is where you change your theme and you can do that in one of two places. In the appearance menu there's a themes screen which shows all the themes that are active, and lets you add new themes as well, and you can also do it via the customizer. Now, here you can activate an existing theme. So you can activate any of the themes that you've already installed on your site, and you can customize them as well, and I'll show you that shortly. But if you want to install a theme, you have to do it from this Theme screen. And you do so by clicking the Add New button. Now this takes you to the Theme directory. So, it's very similar to what we were looking at here, but it's right within the admin screens of your site, making it incredibly easy to install new themes. So let's install a theme. I'm gonna have a look at the Popular themes and you can see the most popular themes are the default themes. Of course they're gonna be popular because they're installed on sites already when you install WordPress. So let's scroll down and find another theme to install. I'm gonna take a look at this theme, ColorMag. Now here I've got a few options. I can either preview it to see what it looks like or I can just go ahead and install it. And to preview it, I can either click here on details and preview, or down here on the preview button. So I'll do that first. And this shows you what the theme looks like on an active site. Now, I don't find this preview particularly helpful because the content in here is never gonna be anything like the content in your site. The other thing that's worth noting is that this theme has lots of customization options. So you can make it look very different from how it looks here, for example changing the colors and the layout. But it also shows you that 183 people have given it ratings and that it's come out a five-star rating. So I think that means it's probably a pretty good theme. So let's install it. You can either do that by clicking Install here, or you can close this preview window and click the Install button here. Now they still install the theme on your site. So now I've got a few options. I can either preview it on my site, I can activate it, or I can return to the theme installer to install some more themes. I'm gonna activate it. So I click the activate link and there we are. Added to the list of themes on my site is ColorMag and that's active. It shows you here. So the next thing I'm gonna do is customize it. And again, there are two ways to this. I can either go by the customize link over here in the Appearance menu, or click the Customize button. And that opens the Customizer. So this theme has some specific sections that are added to the customizer. So for example, there's Important Links here which is useful to see a demo and some documentation and get support. And then as well as that, we've got colors. You've got a header or background image. Menus, widgets, and static front page, are standard customizer options, so they'll work with any theme. And then here, as well for ColorMag, you've got header options, design options, social options, additional options, and category color options. So let's start with a header image. Here I can add an image to display in my header. So I'll select a file from my computer and I've got an image here that I'm gonna use. So I'll choose that, it uploads for me and I can add some alt text. I click select and crop and then the theme gives me the option to crop it so that it fits in my header. So I click on crop image and here it is, added in the customizer. So let's go back and customize some other options. Now I'm going to look at the header options. So there's quite a few things I can change here. I'm not gonna change all of them, but just change a few to give you an idea of how customization works. So let's take a look at the header image position. At the moment, I've got it between the site title up here and the main menu. And I'm going to move it so it's above the site title. And I'll click on it to make that image link back to the home page. If I save and publish that. I go back to my live site, refresh the screen. You can see that my new theme is active and if I click on the image there it takes me to the home page. So that's my first bit of customization and you can see it starting to look good. So that's the only header option I'm gonna customize. Now let's look at some of the design options. So let's have a look at the default layout. And I can either do this for the whole site, for pages only, or for single posts only and I'm going to do it for the whole site. So you can see here, I've got different options for my side bars. I can either have the sidebar on the right, which is the default. I can have it on the left. I can have no side bar at all. And I can have no side bar with my content centered. Let's move the side bar over to the left. If I save and publish that, go back to my site and refresh it. You can see there it is over on the left hand side. Now if I wanted to I could change that just for pages or single posts, and I'll do that for pages. I'm gonna make pages so there's no side bar. I'll click save and publish. Go to my live site, and go to a page. Page A. You see that's a full width template now. So that's my layout. The next design option I've got is colors. And the primary color by default in this theme is a shade of blue. Let's change that to a shade of purple. So that is now reflected throughout the entire design. So I'll save and publish that. Go back to my site, and there's my purple, which mirrors the header image nicely. So those are the design options that I'm gonna use. Another option you have available to you is custom CSS. And this is one way to add your own CSS to a theme without creating a child theme. However, if you've got a lot of CSS to add, I would strongly recommend creating a child theme to hold that, because it will avoid the use of inline CSS in the head section of your pages. And add them to a separate style sheet. And if you want to learn how to create a child theme, take a look at the link, that I've included with this course. So let's go back and take a look what else we've got. There are some Social Options here, so I can activate the social links area, so I click on activate. And I'm gonna add my Twitter name, I need to type in the full address to my Twitter page. I'll save and publish that. Go back to my site and refresh. Click on the Twitter link and it takes me to my Twitter page. So I could also do that with Facebook, Google Plus, Instagram, Pinterest and YouTube, if I wanted to. So I'll go back. That's the social options done. And then finally, I'm gonna look at the category color options, and here I can select a different color for each of the categories in my site. So let's start with uncategorized, I'll make that gray, save and publish. Go to the home page so I can find a post that's uncategorized and you see here that gray is reflected in that link to the uncategorized archive. So in the buttons here, that link through to the different category archives in the site, there are different colors, and I could create a different color for every category in my site. So that's how you install and customize a theme in WordPress. The customizer makes it very straightforward for you to make your own changes. But bear in mind the changes that are available to you in the customizer will depend on what's set up in your theme. So you might want to try installing a few themes and having a play with them before arriving at the final theme that you'll be using for your site. I hope you found this course useful. And that you enjoy working with your own themes. Thanks for watching.