4: Choosing The Perfect Theme For Your Site

Course Progress

Mod 3 - Themes

Running Time:  3:01

How do you evaluate a theme for your site?

There are some things you should be thinking about no matter what type of site you have.

Here are some pointers whether you’re looking for a theme for a brand new site or your site needs a fresh coat of paint.

Don’t get hung up finding a theme just for your industry or interest. There are many general purpose themes that will work for just about any kind of site.

Get Access To Over 50 Free Videos  So You Can Learn WordPress

Useful Links

Here are a few well known free themes I’ve used for me and others. They might just work for you:

And here’s more to help you choose your theme:

Transcript Of This Video

No doubt, making the right choice for your WordPress theme is a big decision. While you can always change your theme, it’s best to stick with a theme and work everything out. What is a WordPress theme? In case we don’t know, it’s what sets the art direction, the style, the topography, and the layout. I look at it as the skin of your website. In addition, your theme will include various functions and features that will be unique to the theme. Themes are of two kinds, “Free” and “Premium.” There are two major differences. Yes, obviously one you have to pay for and one you don’t, but with a premium theme, you get many more features. That sounds like a really good idea, but if you’re starting out with WordPress, don’t go to the premium theme yet. I’d rather you focus on all the fundamentals of learning WordPress and not getting confused by the various features that can be included in a pretty complicated theme. So, stay away initially from premium themes and work with the free themes. There are plenty of great free themes that you can make wonderful websites with. The other thing I like about free themes is that you can test them. You don’t have to pay for anything, you install the theme and test it. Now, what do I check for when I’m looking at a theme? One thing I look at is, “Does the theme have documentation? If so, where’s the documentation?” If I can see the documentation before I buy a premium theme, I want to know that it’s documentation that I can understand. If you buy a premium theme, the documentation should let you make a website just the way you see it in a demo. OK, that’s important, so check out documentation.

What about support? What if you have a question or a technical issue that has to be worked out? Where are you going to get support? For free themes the only place you’re going to get it is on a theme support forum, and the support for those kinds of things can be very spotty. If you buy a premium theme, you want to check in advance what to expect for support. What’s the turnaround time if you ask a question? How can you ask a question? Do they accept support by email?

Is the theme frequently updated? Now, truth be told, most themes are not frequently updated, but they are updated from time to time. Especially when there are major changes to WordPress itself. I always like to check, “When was the theme last updated?” Even, “When was the theme first released to the public?” And “How many installations are there?” That’s a really important thing as well. I look at ratings and reviews, but I keep an eye out on this because they can be skewed. It’s very hard to know whether or not they’re honest ratings and reviews. It’s pretty easy to trick the system. Be careful, relying a lot on ratings and reviews, but I do take a look. The last is, “Is the theme WooCommerce compliant?” WooCommerce is the most popular and widely used WordPress e-commerce plugin, so you might say “I’m never going to sell anything on my website,” and that could be true but I’ve seen a few cases where people start out that way, and then they say “I want to sell something.” Then the question gets to be, “Is the theme WooCommerce compliant?” So why not just start out with making sure that the theme is WooCommerce compliant? Many of them are, but not all of them. So, where do you get a theme? The easiest way to get a free theme is by using the WP admin or WordPress.org. I showed that in the video called Installing Your Theme. Then you can buy your theme from various vendors, and there are lots of vendors out there to buy your themes. The biggie is Envato, they’re a marketplace for all sorts of WordPress products, and they’re trusted. What it is, is a marketplace. Many different designers and developers are selling their WordPress wares, if you will, their WordPress themes and plugins on Envato. You get a demo site, you get all kinds of things, but you don’t get to download and test the theme unless you buy it. Then there are great services, one of them’s called Elegant Themes and another one’s called StudioPress. I have a little more to say about those in a minute or two, and then I’m just listing– aThemes, BeThemes– You get the idea. There are thousands of individual, generally very small companies and studios that sell the themes that they’ve created. Now, there are different types of themes. No, I’m not just talking about “Free” and “Premium,” I’m talking about the kinds of themes that are what I call “Ready-made.” Just install them, and they’re ready to go. In addition to the ready-made, we have frameworks. Even though you can use a framework as a theme, that’s perfectly fine, generally, the frameworks are basically a foundation for another theme. Genesis made by StudioPress and Divi made by Elegant Themes are two very popular and widely used frameworks. Then we have free frameworks, one of them is very well-known called _Underscores and the other is called Bootstrap. _Underscores was what was used to create the 2017 theme, the 2016 theme, the 2015 theme, and many other themes. What this means is that when a developer makes a theme, they don’t start from scratch, they start from existing code, and they build on top of that. That’s the whole principle of a framework.

What about testing, and what to look for when you’re doing it? You want a test to make sure that the theme is responsive. A responsive theme is one that will work on desktop computers, laptops, tablets, cell phones, refrigerator browsers, car browsers, everywhere. The design transforms appropriately for whatever environment it finds itself in. There’s a lot of things to consider. Most themes today are responsive, but if you go back a couple years ago, that was not the case. Even though a theme can be advertised as responsive, I will always test it out in every way that I can as much as possible until I am satisfied that it is responsive. Then, does your theme have page templates? What’s a template? If you want a landing page, if you want a page with no sidebar if you want a page that has full screen with different layouts. Those are templates that are within the theme.

Many locations, many premium themes will have several menu locations built in. In other words, they give you the option to have a horizontal menu or maybe two vertical menus, maybe a footer menu compared to a free theme that may give you just one option where your menu is going to be located on your page. Then, does the theme have any special widgets? Widgets are commonly used for blogging, but not just blogging. I’m always going to be looking at what special widgets are available with the theme, and then what kind of custom design options are built into the theme. Is it possible for me to change the layout? How would I do that? What about changing font and color, and different things that deal with design? How is that incorporated into the theme itself?

Take my advice please and follow the things that I’ve just gone over here in this video. These are things that I have learned over the years looking for themes for myself and for my clients. The more time I spent doing that, the better results I always got.

All 6 Modules In This Course

3: Working With The Customizer

Course Progress

Get Access To Over 50 Free Videos  To Learn WordPress

Mod 3 - Themes

Running Time:  11:47

There’s no doubt that any WP Theme can be tailored to meet your design requirements.

The question is…how?

The simplest way is to start with The Customizer (Appearance > Customize) as I do here. Many themes have the same options but they will differ from one theme to the next. Premium themes will have more options compared to free ones.

But custom styling goes well beyond what you can do with The Customizer. These options include:

  • Using a plugin to make changes such as font or color.
  • Using a page builder plugin.
  • Creating a Child Theme to gain total control of your theme’s style. (Requires knowledge of CSS – Cascading Style Sheets – which I love.)

Transcript Of This Video

OK, spoiler alert. I’m not going to be showing you everything about custom styling your theme in this video. I couldn’t even if I tried. What I’m going to do is focus on what’s called the “Customizer” in the WordPress admin. There are two ways to get there. One is to go over here to “Dashboard” and go to “Appearance” and go to “Customize.” We’re going to be spending time here, but the other way to get there is– Let’s click this X. Let’s go back to the front side of the site, and you have a link right next to the main link. It says “Customize,” so we can go right to that page in our admin, and here we are. Let’s explore what this is all about.

So you have a left side here, a menu of choices, and a right side here that is a preview of your site. You should know that any choices that you make here will be available as a preview and they won’t be live on your site until you click the “Save” button up her, which is currently not lit up. This particular theme, 2017, has these little– I don’t know what they’re called, little edit buttons. If you click on this, it will take you to the menu section. Let me show you another one, by an example. There is one right over here, and if you wanted to change the header image, you could do it that way. I don’t particularly like these little buttons over here, and you won’t see these in every theme, but it’s certainly here in 2017.

OK, let’s look at the left-hand side. It says we’re using 2017 theme if we want to change the theme we could do it this way. But there is another way to change the theme besides doing this way, and that’s just going to “Appearance” “Themes” and making your change. In fact, that’s one of the things about the Customizer itself is that a lot of the things that you’ll find here you can find elsewhere in the WP admin. So, I’m going to change this and go back to here, click on that and go back to there. Let’s look through some of, if not all, of these. For site identity–

In a previous video, I did this, I de-selected this, so you can see I didn’t want the site title and the tag line to show up on my pages. So, I just did that. Now site icon, this is sort of interesting. These are also called favicons, or you’ll see all kinds of names for them. Here’s what we’re talking about. I just switched over to the site that is the prototype site, and you can see it right over here, this is the site icon. You might say, “Why bother with this?” It helps to brand your site compared to other pages. Look, these are pages over here, I like the fact that it’s pretty easy to do and it brands your site. Not only that but if somebody bookmarks your site, it’ll show up in the bookmark. There’s lots of places that this is going to show up.

Let’s add a site icon, and what I’m going to do is just– It’s just an image. Now my theme says that you should use a 512×512 image, I’m going to get my images out here. Here is my site icon and I’m just going to drag it over here. Let’s get rid of this. I’m going to– OK, and you can see that big image 512×512 has just gotten shrunk down to right over here, very small. But with that done what I’m going to do is, I could remove it or I could change it, but I’m not going to do anything. I’m just going to go over here and save. So, that’s done. Now I want to go back to the start of the Customizer, and you should always look for this little arrow over here, that’ll take you back to where you want to go.

It could be a little tricky navigating the Customizer when you’re first starting out– Actually, it’s still tricky for me, and I’m not first starting out. My theme gives you the option of choosing colors, so let’s take a look. Normally this theme has it set over here, and it’s “Light.” Here’s the “Dark” option. Like I said, this is a preview of all my pages, which will have that “Dark” option. It’s nice, but it doesn’t suit my needs. I tried figuring out how the custom color bar worked, and I couldn’t do it for some reason. We’ll have to let that go. I’m just going to keep it on the “Light” option. I can save and update, and for the header media, I had a whole video on this. Changing the header media, where for this theme, you could use a static image, or you could use video. So, I chose that.

Now these options over here, menu widgets, static front page, these all can be done elsewhere in the WP admin. For me, I’d rather not use the Customizer to work with my menu widgets and static front page, but I’ll show this to you anyway. If you click on “Menu,” you’ll see that I have a menu right over here, “Menu location,” this tells me the location of where the menus are. I only have one menu, and it’s a top bar, the top menu. If you go to the video that I did on setting up your menu, you’ll see a little more in detail how I did that. Also here are all the different pages in my site, and I can drag and drop. The order– Like I say, I don’t like to use it this way. I find this area to be a little cramped for what I want to– Or, how I want to work. Widgets are something that I take up in the module on blogging, but this theme supports three different widget areas, and I’m not going to get any further along into that static front page. This is also something that could be set elsewhere in the WP admin, and I prefer to do it that way.

I took that up in the first module, and I took it up in the second module on links. Anyway, I have the home page as my front page and a blog page as where my blog posts will be located. Then theme options, let’s take a look at that. These are unique for this particular theme, and I don’t use this, but you can explore this if you want. One of the things that I did though is I set this as one column. Let’s take a look at that. Here we go. Now, what’s the difference? It doesn’t look like much, but here’s two column and here’s one column. I prefer that to match what I did with the prototype site. You can see right over here, and this has got one column.

I know it doesn’t look like much from one and two columns, but it is one column. So let me save that, any time you make a change, save the change, and then go back. The other one over here is if you know any CSS, this is a place– It’s not the only place and not the only way to custom code the styling of your site, the other thing that’s interesting about the Customizer and that you won’t find anywhere else is that you can get these preview modes of what this would look like in a tablet.

What this would look like in a cell phone. OK, that’s interesting. Also, if you find that you need more space to look at everything, you can collapse your menu, and the options you have in the Customizer are determined by your theme. Every theme is going to give you a different set of options, but typically they’re going to always give you– They certainly give you the name of the theme, the ability to change it here, and they usually give you site identity, menu, widgets, static front page. Those are additional CSS, and those are ones that you’re going to see in every theme. Before I take you to look at another theme, by way of an example, let me show you this.

You click on X, and it takes you back to your site. OK, so we’re good. All I did was make this into a one column layout, and I put this in over here. All right, I wanted to show you another site. This one uses a theme called Amadeus, which I’ve used for one or two clients now, and it’s really good. It’s a free theme and the only reason why I’m going to show you this is if I go to “Customize” here you will see a lot more options. If I go over to the header area, it has four sub-areas over here. So here’s where you would change, for example, the header image.

You have other options over here, so if I go into– Let’s go down to fonts. So, here’s where I can change fonts. You’ll notice in the 2017 theme the Customizer didn’t allow me to change fonts. Here I have the option of using Google fonts to change the files for my site. Here’s another one, colors are a little more robust in that we have a lot more options in how we want to set the coloration for our fonts. I also have the ability with this theme to choose a background image that I would see on every page. I’m not crazy about background images, but at least I would have the option with this theme. Menus, widgets, static front page– Remember I said that’s standard and all the themes, so we’ve got those here. I have documentation, and this is good in case I need to have documentation. This theme is a little more complicated than 2017, so it’s always good to have the documentation and additional CSS if I know coding I could use that. Of course, these options over here are about changing the screen.

To sum it all up, the Customizer is a place that a lot of people go in their WordPress admin to perform various tasks including doing some customization that deals with style, but also to manage things like widgets, menus, and so forth. The options that you’ll see that is what you’ll see over here will vary from theme to theme. Personally, I’m not crazy about the Customizer, but if that’s something that you want to work with, go ahead. Remember this is not all the things that you can do to change the look of your website.

All 6 Modules In This Course

2: Adding Media To Your Header

Course Progress

Mod 3 - Themes

Running Time:  5:28

Adding a header image or video is very common in many WordPress Themes. This is done at Appearance > Customize > Header Media.

While you can crop your header image within the WP Admin it’s best to start with an image size that is optimal for your theme. (In the case of the Twenty Seventeen Theme the optimal size is 2000px wide X 1200px high).

Get Access To Over 50 Free Videos  So You Can Learn WordPress

Transcript Of This Video

One of the things that is very common to many WordPress themes is the use of a header image. Here is a nice big header image on my home page, and the same image is being used in a different way for the other pages of my site. Clearly, this is not an image that is suitable for my site, so I want to substitute an image, get rid of this one and put my image in there. I’m going to go into the “Admin,” “Dashboard,” and I’m going to go into “Appearance,” “Customize.” Many people call this the “Customizer,” while it is the WP admin it looks different. What you’re seeing here is a menu of options on the left-hand side, and on the right-hand side, you’re seeing a preview of what the site will be once you make changes. I’m going to go right over here to “Header image,” and no matter what theme you use if you’re going to change your header you want to read through all this. One of the things I noticed is that the optimum image size for my header will be 2,000 pixels wide by 1,200 pixels high. I’m going to keep that in mind. Now, I don’t like this image at all. If I just wanted to get rid of the image altogether, I would click “Hide image,” and then I would save the changes. Here’s what it looks like. Look, no image. Right over here, no image. But that’s not exactly what I had in mind, and I want my own image to be there. So what I’ll do is go over here to “Image,” that makes sense, and I’m going to find the image that I have right over here. Go into “My images,” and I’m going to upload the image right over here.

Perfect, we don’t need this anymore. You could see right over here the image is 2,000 pixels wide by 1,200 pixels high just as specified for my theme. If you’r e using a different theme, chances are you’re going to be using a different image size. I’m going to put in my alt-text, which I like to do. I’m going to do “In My Garden,” and then I’m going to select that image. Now, when you’re adding a header image, it’s very common that you get to this “Cropper page” as I like to call it, so you can change the image dimensions if you want. I want it just the way it is, but I’m just showing you that you have this crop tool for header images. So, I’m just going to keep it as is. Perfect. It’s exactly what I want. Now if I want to take a look at the smaller version, there it is for other pages. In fact, let’s save this and take a look at the site. We’ll close this all up, and we’ll go to look at the site, and look at this. Yes, I know I have this title in here, and I’m about to get rid of it altogether. What I want to do is take a look at these other pages. Here we go. That’s the smaller version. That’s fine. OK, I don’t like that title. It doesn’t look right. How do you get rid of that? This is very common in many themes that you’re going to run into. Again, back to “Appearance” and “Customize.”

We will now look at “Site identity.” In this case, I’m displaying the title and the tag line.

So what I’m going to do is deselect this option right over here, and look at that. Gone. I would not recommend this– Which would be to keep that and remove this. All right, you could delete– No. Don’t do that. This is very important information, especially for search engine optimization and assistive technologies, and you don’t want to do that. You want to do this. Just hide it like that, and save, and you’re good to go. The last thing I want to do is substitute my image with a video because that’s kind of cool. Right over here I’m going to go back to this and then let’s go back to “Header media” again. And now this time I’m going to select a video, and the video is already there. So let’s see what we’re going to do with this. OK, select. Look at that, poor Arlene working so hard. One of the things that my theme recommends is that you have a backup image in case a browser or some device doesn’t support the use of video in this way. I do have a backup image, and it’s going to be this image right over here, so if this wasn’t available then the user– If the user couldn’t see the video then they would see this image over here. Bottom line is I don’t want the video at all, so I’m going to remove it. We’re back to that image that I want, we’re going to save, and let’s take a quick look at the site as it is right now. That’s perfect, just what I want.

All 6 Modules In This Course

1: Installing Your Theme

Course Progress

Get Access To Over 50 Free Videos  To Learn WordPress

Mod 3 - Themes

Running Time:  10:45

One of the great things about using a free WP theme (and there are thousands to choose from) is that you don’t have to shell out bucks to play with it and see how it will work for your site.

I show you the 2 ways to get any theme into your site. The first is to use Appearance > Themes in your WP Admin, then use browse or search to get your theme. The other is to use the Plugin Directory at wordpresss.org. In that case you’ll need to download the theme first and then upload it to your site.

Learn how to install a theme with both methods. It will come in handy especially if you purchase a theme. In that case you will have to use the second (download and install) option.

Link Shown In This Video

Transcript Of This Video

One of the most important components of any WordPress site is the theme that you use. A theme is responsible for the look and feel of your site. It’s the art direction, the layout, the topography, the color that you see, and all of your pages. It also accounts for some of the functions and features that are built into your site as well. For the site that I’m building, I’m using the 2017 WordPress theme. It’s a stock theme. It’s really good, but there are certainly other themes I could use, and in fact, there are about 5,000 free themes I can choose from. So, let’s take a look.

I’m going to go over here to my dashboard. I’m going to go into “Appearance,” “Themes.” Like I said the 2017 theme is the one I’m using, it’s the active theme, these are two other themes that are inactive and if I wanted to make one of these active I would click on this or I could read a description of what this theme is all about too. I’d click on the word “Activate,” and everything would be activated. So, I’m just going to close that. To find a theme and then to install it I could either go to here, or I could go over here, and if I click on either one of those, it’ll take me to this page about adding a theme. If I go across the top over here, I see “Featured,” I see “Popular” themes. I see the “Latest” themes, I see “Favorite” themes. I don’t have any favorite themes. That is, I haven’t designated any themes as favorites. We have “Feature filter,” which I find useful because you can do your search that way. So I’m going to choose a three column layout, you can see these are the layout options over here. I can also multiple choose if I want– I want to keep it to three columns. Here are the different features that I could be looking for my site, and I’m going to pick a theme that deals with education because that’s what I do. That’s good. I’m going to now do a filtered search, and this is the theme I want. Before I do that I should also point out that if you know the name of the theme that you want to use, you could always click on here and put in the name. But a lot of people don’t know the name of the theme, especially when they’re starting out. So this is the better approach. If I wanted to do a little quick look, I could do a preview, which gives me a rough idea of what this theme is going to look like. I’m not crazy about the preview, but like I said it gives you an idea. You’re going to have a header image and sidebars, and so forth. OK, so what I want to do now is go back to where I was. I could check other themes as well, but I like this one, so now I’m going to install it. It’s pretty simple. Just click on the word “Install,” and when that’s done, it’s going to leave me with “Activate.” I don’t want to activate it right now, and I want to show you something before I do that. I could activate it straight from there, but notice here is my theme that I’ve just added, but it is not the active theme.

To make it the active theme I’m just going to click on the “Activate” button. Now it occupies the “Active” spot. Let’s go take a look at what happened here. Perfect, it’s totally different. That’s the whole point. When you change a theme, it’s sort of like changing the skin on something, and everything is going to be different. The colors. the topography. the layout. the backgrounds. Everything is going to be different. Of course, the content that I’ve already added, the home page and so forth and the image, that’s all going to stay the same. But look at this– This menu is way out of whack. This is not what I had. One of the little tripping points a lot of people have with WordPress when they change themes is they forget to do something. What you’re going to need to do is go over to “Menus,” and then go over to “Manage locations.” Now, this theme has three different locations for a menu, not like 2017, which had two different locations.

What I’m going to do here is select a location. It turns out I know from experimentation before I started doing this that it’s the bottom menu or the main location. OK, and with that in mind here’s my menu. Remember my menu I setup already, “Home” “Prep” “Plant” etc. and now the order will be restored. I like that, and order will be restored to my navigation. I have the drop down, and I have the blog, I have everything the way I had it before. Again, all the content that I’ve already added, it stayed the same with my tiller image and my content is perfect. Like I said, it’s like changing the skin, if you will, of your site. That’s one way to install a theme or to find a theme and then install it, and that’s perfectly fine. It’s convenient. Another way to do this is to go to WordPress.org, and you can find basically the same themes there. You might want to do it this way. I’m going to choose– Here we have very similar options over here. If I went to here, let’s choose a totally different setup. Now let’s do a grid layout, and I’m not going to make any other choice but that.

What I will do is– Let’s apply the filter. Let’s go choose one. You can only choose one at a time, so let’s do that. What I like about this before I download anything, I’m just going to click on this, and it takes me to the themes page and the theme directory in WordPress.org. This is handy. This will give me a lot more information than if I went through my WP admin like I just did a little bit ago, and here I can read some information, and what I like about this is if there’s any ratings or when it was last updated it doesn’t seem like there are very many active installations so it’s probably– It’s definitely not been used all that much, but maybe I’m just going to experiment with my site. What I’ll do is I will download this theme, and by downloading it in my case what I’m going to be doing is just saving a zip file that has all the files contained in my theme.

I’m going to download that, and it’s going to go onto my desktop. OK, good. Now I go back to my site and go back to “Themes.” This time when I do “Add new” I’m going to upload my theme. OK, so I’m not going to go through this because I’ve already done that. This time I’m going to upload a theme, I’m going to browse my computer where that theme is located, and like I said it’s a zip file so here, it is right over here. OK, and “Install now” is fine.

OK, it was successful. Now I can choose any of these, “Live preview” or “Activate.” But again, I like to go back to where all the themes are. OK, here it is. Now I’m going to activate it this way. So, let’s see what we have. OK. Totally different again. My menu again is all messed up. That’s fine. I’m going to straighten it out in a second. The content is exactly what I had before, it looks like I’m going to need to make some adjustments with this, but let’s straighten out the menu because this is the biggest problem that people have when they start experimenting with different themes. Which is something that you may want to do as you build your site, so let’s go back to “Menu.” In this case, again, “Manage locations.” But you see, I didn’t choose the menu yet, the menu that I’ve already made called “Main menu.” So, let’s do that.

Now I have it in the right order. “Home,” “Prep,” “Plant,” etc. Now what I want to do is go back to my themes and let’s reestablish what it is that we want. So I’m going to activate the one that we had before, and I’m going to delete some of these other ones. How do you delete them? Because I only am going to use one theme when I’m all said and done, so right over here “Delete.” Yes, I want to delete. I can repeat the process over here to the right-hand corner, “Delete.” OK, and so on. Rinse and repeat. I would get rid of those too. You’re only going to need one theme, so we’re fine. To sum it all up, there are two different ways to install your theme. One is to find it in the WP admin. Let’s take a quick look at that again. Here we go. I just went over here to “Add new” and away we went. The other one was to go to WordPress.org and click on “Themes,” and find your theme in the theme directory. When you do it this way, you’ll download a zip file, and then you’re going to have to upload that to your WordPress site.

All 6 Modules In This Course