Build Your Own Business Website header image

Whoops, you've found some protected content!

Watch the opening clip of this video to preview it,
the full video is available to free and paid members.

Lesson 5 – Part 4 – Simple WordPress Theme Customization

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

In this final video for our Using WordPress Themes lesson, we highlight some of the typical elements that you can customize in typical WordPress themes. Most themes have some limited ability to be customized.

Level of Customization Depends on the Theme

If you’re familiar with the Genesis 2 theme and the Thesis 2 theme then you know there’s quite a wide range of customizability but the typical theme does not have a huge range.

Example 1 – Twenty Twelve Theme

However, you can make some pretty decent changes. We’ve got Twenty Twelve already installed and it’s active. So let’s go take a look at the customize section. I’m going to start by adding a new header image.

Header Image

But before we do that note that the header image ought to be 960×250. So you want to start off by creating an image that is that size. Once you’ve created an image that that’s size then you can insert it. It’s asking if I want to crop it. Cropping can be kind of problematic. The ability to crop like this is brand new in this WordPress version 3.9. You used to only be able to crop proportionally.

Note what it does. It takes this header image and it places below the site title, tagline and menu. This means that if you’re going to do that you probably want to get rid of the site title and tagline because you don’t want them like that if you’ve got this kind of a header image.

Set Background Color/Image

The other thing we can do with this is to set a background color but instead of that I’m going to set a background image. We’re going to upload a new image. I’ll select the file and I’ve got big-blue-background as my background image for this. Open it and now I can choose options.

I can choose tiling. I can give it a position. I’m going to say center, no repeat and fixed so it stays in the same spot while the page stays. Hit save and publish. Let’s close that, reload it and now my website has changed somewhat. I’ve got a nice big background image here. I’ve got this header image here. If you want your header image below your menu like this and like all that spacing then this might be a reasonable way to go.

Example 2 – Twenty Fourteen Theme

Now, if we come over here to Twenty Fourteen and activate it instead, all that customization goes away. Well, actually, look at that. The background color didn’t go away. The Twenty Fourteen theme pushes everything off to the left so it doesn’t center in the space which means that the background image is kind of odd here.

Header Image

Let’s hit customize and go to our header image. In this case the size should be 1260×240. Let’s upload an image for that size. I’ll select the file and grab my header background for 1260 and select.

Again, I could crop it down but I’m going to skip cropping. Note where it goes. It goes all the way up here at the top and my site title and tagline are down here. I can choose not to display it and have this going on instead.

Oh, that was a background color I see. There was no background image, it didn’t take my background image. I could again choose a background image if I wanted to but it’s kind of weird in this case. But you could do that and here’s what your website looks like with that.

Example 3- Twenty Thirteen Theme

Let’s do this one more time. I’ll come over here to Twenty Thirteen, activate that and customize it. Note that the header size should be 1600×230. Now in this case, the background image is behind the title and tagline which I like.

Let’s select a new header image. I’ll upload a file, select the file and I’m looking for a header background that 1600 pixels wide. I’ll select this one and crop it. And that’s what it looks like. I’ll crop the image I guess I made it a little bit too tall.

I can change the color of the header text. I’ll pick white. We’ve got the BYOB Boot Camp color white now for that and there is no background color I can set. Let’s save that and look at it. Now I’ve got this big background image that spans all the way across. I don’t have a way of changing these colors unfortunately so I would choose a background image that actually matches these colors if I was going to use this style or just come up with my own.

Fourteen Extended Plugin for Twenty Fourteen Theme

Ray says there’s a free plugin for changing the Twenty Fourteen theme so you can center it. It’s called Fourteen Extended. Yeah, that’s probably not a bad idea. It makes some sense to do something like that with Twenty Fourteen.

Anyway, this gives you a sense of the kinds of customization that you can do with the standard WordPress themes. You’re probably familiar with a much larger range of customization ability in Thesis especially but also with Genesis. There is so much more that you can do with those themes.

In any case you don’t have to use themes as they come, they don’t have to stay looking exactly as they do when you purchase them. There are relatively simple, point and click kinds of things you can do to change themes.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment