Build Your Own Business Website header image

Simple WordPress Theme Customization

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects - ,

Applies to -

Whoops, you've found some premium content!

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

Now something that WordPress has been working on for two years or so is the theme customizer. They’ve been working on it so slowly that I think it has been confusing. That’s why I have never taught it before.

WordPress ships with the ability for theme authors to setup theme options in the theme customizer. That ability used to be so limited that theme authors ignored it. But we are getting to the point now where WordPress.org is going to begin requiring people to use the theme customizer if they’re going to have their theme in the WordPress repository.

The customizer can be accessed from this little customize button. As it turns out there been a lot of changes with WordPress 4.7 in the customizer. And the 2017 theme, while it doesn’t include schema, has taken advantage of all the new features in the customizer. That puts us in a position where we can use the customizer to set some things up.

When to Use the Customizer

The problem with the customizer is that it begins with the assumption that a brand new person is going to start customizing their site right away. And that’s a fallacy. You can’t really start customizing your site right away. First you actually have to have content.

Without real content you just can’t customize your site which is why I am teaching the customizer after I teach the content section. People get caught up in what they want their website to look like not realizing that their website will never look like anything until they put content in it.

And so this is not one of the first places you go even though that’s the way WordPress thinks of it. Really, this is one of the last places you go after you’ve got a bunch of content set up and you’re in a position to be able to create a menu and then do some of the things that this allows you to do.

Site Identity

With that said, let’s take a look. Site identity is site title and tagline. You can turn that off and neither of those will show or you can turn it on and you could delete, say, the tagline. You can also select your site icon which they say needs to be 512 pixels wide and tall. I don’t think I have an image ready for that so we’ll skip that for now. Let’s step out of this for a moment.

Change the Theme

Customizing your site can start here with this customized button or you can come back over here and under Appearance you can choose customize. In any case, from this customized section you can change the theme if you want to use a different theme.

Or you can change a whole bunch of other stuff. As you just saw under site identity, you can change the display of the title and tagline. On the screen display these little blue pencils allow you to select options for each of these areas. This is for the header, this is the title and this is the tagline.

Header Media

Let’s go back to the header area. This is the background image here. I can set header media for it. Let’s add a video. I did download a little piece of media to use here. There it is. Extract all. Let’s look at its properties. It is 481 megabytes, I am guessing that I cannot use when it’s this big. It’s a .MOV file. Let’s see whether or not I can upload this image, select a video and upload. It’s not going to work Max is 64 megabytes.

In order for me to make this work I’d have to edit this video down which I can’t do right now because the software I would use is the same software I’m using to record now. We’ll just do that at a later date when I have the right sized media. But we could use a header image.

We’ll click on use a new image, choose a new image. This bring me to my media library where I’ve got all of these delicious looking images of food. I’ll just grab a coffee shop image. They’re suggesting we crop it so we’ll crop it like that. Say okay and there’s a new header image. And. So. That was the header media.

Colors

Let’s take a look at colors. We can make it a dark color scheme, which I hate, or we can make it a light color scheme, which I like. I’ll keep that. Header text color I think does want to be fairly dark. So we can set that color that way.

Menus

Menus give us a choice of the menus we’ve created and menu locations. We took care of this in the last lesson.

Static Front Page

We’ve already taken care of the static front page and the Post’s Page when we configured WordPress to act like a traditional website.

Theme Options

Let’s look at our theme options. Front Page Section One placeholder. There are 4 placeholders here. This let’s you set up, on the front page in particular, a bunch of different sections. So let’s work on that. We’re going to choose that page for number one. Then I’ll pick another one for placeholder two. And then one more for section 3.

I have essentially taken three of my pages and I have turned them into sections on this front page. I’m good with having only three. If you wanted to you could add one more. So there’s the theme options. Let’s save and publish this and see what it looks like.

It’s interesting I thought that the header stopped but it goes away. Let’s just scroll through this front page some more and see what each of the sections looks like now that we’ve added three. We’ve got this font awesome background then this content and we come to our picture background. Then there’s Agility color scheme, the coffee background and layout features.

Let’s go to another page, agility 3 templates. So, what happens here is that the menu stops at the top with the header image disappearing as you scroll further down. That’s the way it works. The menu sticks to the top and because of that you might want to reorganize where that image is cropped. And also the color.

You’d have to think about those things for how it works on different pages. On the Home page the dark works pretty well. You probably want to provide some drop shadow to that. And so it looks to me like we only really need to use title for this.

Additional CSS

The customizer comes with the ability for you to add your own custom CSS. So, we’re going to do with that site title. Text shadow, colon 1 P X 1 P X 1 P X 8 8 8. Let’s see how that works. Okay, that helped. It actually does make it stand out better. Let’s save that change and publish it.

Let’s take a look at the Site Description. If we want to change the color of site description…well, that didn’t work. Site description, color. It doesn’t look like that does. Oh it’s got this it’s got a opacity of 0.8 So we’re going to give it an opacity of 1. That kind of works.

View Your Site in Different Browser Window Sizes

The other thing that’s handy about this is you can see what your site’s going to look like in other browser window sizes. You can use this little button down here to change to phone, tablet or desktop. You can see it happening there.

Let’s come back to our front page template. Right now we’ve got no widgets over here in the left area. Hmm, the menu doesn’t stick in the case of phone view. It’s kind of cute little menu. Really, you have to choose this image carefully because this actually doesn’t look very good on the phone. You want your image and your text to look good in all three cases, phone, tablet and desktop.

Widgets

We could put in widgets as well. We haven’t talked about widgets yet but we’ll do that next since we are ready to move on to customizing the functionality of your site.

Only Use Additional CSS for Adding Custom CSS

Before we go on though I want to talk briefly about this Additional CSS option. This is why no one ever needs to use the Theme editor any longer. The excuse for using the Theme editor was that you’d just want to change one little thing in the CSS. Well, now you can change that one little thing without without needing to open up that editor because now there’s this Additional CSS section here in the customizer.

It does require that you write your own CSS rather than going into and changing another piece of CSS. But that keeps the theme intact. This separates your own edits from the theme’s edits which is really fundamentally sound practice. If you’re going to edit something you want to keep yours separate because these things upgrade all the time. So every time a new functionality comes along or new security issues show up these themes update CSS. When you make your changes to it integral to the theme then when it updates you lose all that.

So that’s why you always separate your own edits from from the theme. The customizer provides you a way of doing that now. I’m not saying that everything theme gives you the chance of adding additional CSS like this. But if you’re using one of the wordpress dot org themes you want to look for one that has the customizer so that you have the opportunity to make these kind of changes.

0 Comments… add one
0 comments… add one

Leave a Comment