Finding a theme that really matches your needs can be a bit of a task. Although there are thousands of beautiful themes in the WordPress Themes Repository, most of them offer limited features. To unlock the real features and functionalities of the theme, you need to pay a small fee to get the “pro” or “extended” version of the theme.
Nevertheless, for most basic websites, the free version will do.
We’ll talk more about purchasing pro versions of themes, as well as cracking open and editing themes, in the future.
For now, let’s continue building a basic website with a free theme from the WordPress Themes Repository.
OK, so I’ve searched the WordPress Themes Repository. I’ve installed and network enabled a few dozen themes. Then I’ve tested, deleted, searched again, installed, network enabled and tested again.
Finally, I’ve settled on a theme. It’s not the ultimate King of themes, the “wave your wand and it’s done” fairy tale theme or anything like that.
It’s just a reasonably designed which I see that I can make use and customize to suit my tastes.
And that’s what this lesson is all about: customizing themes.
So let’s give a screenshot of what my website looks like with this new theme installed.
Pretty bland and boring I would say!
Yes, so let’s go ahead and customize this theme a little bit. Or, maybe, a lot!
To start customizing our new theme, we will log into our WordPress Dashboard by typing in: hotelamazonasgy.com/wp-admin, typing in our username and password and clicking “Log in.”
So once inside the Dashboard, click on Appearance >> Customize. This will load the active theme’s customization menu.
The name of the theme that I’m currently using, by the way, is Unicorn.
As you can see, that’s quite a lot of customization options. But what’s really interested about the Unicorn Theme is that I didn’t see an “Upgrade to Pro” button.
Most themes come with an “upgrade to pro” button somewhere in the customization section, but I didn’t see any so far for this theme.
That means, that so far, it’s a completely free theme. And that’s both a good and a bad thing. It means that someone is doing a charitable project on the internet for WordPress users.
The bad news is that a theme that is not commercialized is more likely to be abandoned than a theme that is commercialized. That is because a theme that could bring revenue gives the creators incentives to keep developing, upgrading, improving it and making it better.
But a completely free theme – what’s stopping the creators from just leaving it down? Nevertheless, it’s possible that it’s a good theme anyways, and that it will continue to be upgraded.
So I’ll stick with this theme and I’ll do a bit of customization here and there.
Let’s go.
First thing I want to touch on is the color scheme. So I’m going to click on: Customize Colors >> Color Scheme. And I land here.
And this gives me a drop down box where I can select a different color scheme. As you can see, the present color scheme is “Unicorn.”
As you can see, I’ve changed the color scheme from “Unicorn” to “Black.” Someone once said that black is a depressing color. That’s possible on some occasions. However, when contrasted well with other colors, it does a great job. So let’s click the Publish Button you see up there. Then I’ll take a new browser where I’m not logged in and load the page, or reload if I already have it loaded.
So that right there is a screenshot of my website with the new color scheme.
The next thing I’m going to customization is the Menu. Presently my website has just one menu, but on this theme it’s showing up at three different places: the same menu in three different places!
In that pic above you can see the same menu showing twice: one right above the other.
And in the pic above, you can see the same menu at the footer of the page.
That doesn’t make sense! Does it?
So let’s open up our Menu customization options.
First when click on the Menu button shown above. This opens up a new set of options.
Next we click on “Primary Menu” shown above.
Then we scroll down to Menu Locations.
Then we’re going to untick all those boxes that are highlighted above. We don’t want the menu to be at the very top or the very bottom, and we don’t want to automatically pages to the menu. We will selectively add pages and that will be done manually.
So, there we go.
Now let’s click the “Publish” button and refresh our page on the other browser to see the changes.
Alright, so once we’ve finished that, we get of of the Menu Customization Options by clicking the left pointing arrow at the top.
OK, I noticed that I didn’t the changes I was expecting to see take place. The menu did move away from the top, but it remained it footer also. This could be because of a variety of factors which range from caching to technological glitches to something I don’t yet understand about the theme. So let’s just ignore that for a while and move on.
Let’s click on widgets.
Clicking this will open widgets options.
You might be asking yourself at this point: what’s a widget? We haven’t yet covered widgets in our Tutorial Series.
So I’ll give you a brief explanation. Every WordPress Theme comes with a number of “widget areas.” The widget areas may be located at the top, bottom, right and left of the theme layout. The widget areas allow you to drag and drop “widgets” into them.
WordPress widgets allow you to do a wide variety of things ranging from adding a Facebook Pages Box to your site to showing recent posts and pages, page menus, text, images, slideshows and much much more.
So we’ll put our first widget onto this website through the customization menu.
So we’re here in widgets area.
As you can see, this theme carries a “left sidebar” widgets area. But it gives you the option of putting one widget in the home page left sidebar, and another widget in all other pages “left sidebar.”
It’s up to you if you want to design your home page a little different from the rest of the pages as this theme is offering you that flexibility.
However, I’ll choose the give my site a uniform look for both the homepage and all other pages – so far.
So the same widget that I drop into the home page left sidebar, I will also drop into the “pages left side bar.”
So what’s the widget I want to place there first? It’s called Facebook Page Integration. This widget by Jetpack allows me to link to my Facebook Business Page from my website via a handy Facebook Pages box.
So I click on the “Home Page, Left Sidebar” option to open it.
There we go.
You can see the handy “Add a Widget” button right there.
Let’s click it.
So there above is a list of the plugins we have available in our WordPress installation so far. We can have a lot more widgets by installing so plugins. And we’ll talk more about this later.
But for now, let’s click on the widget, we want to put in our left sidebar.
It’s called the Facebook Page Plugin Widget by Jetpack.
Once we click on that, it goes into the left side bar area, and the options are open to customize it.
First thing we are asked to do is type in a “Title.” And for this, we will type:
Simple, isn’t it?
Next thing we are asked for is the URL of our Facebook Business Page. And if you have a Facebook Page, then you should know the URL that leads directly to it.
There you go. That highlighted in yellow above is the URL for the Amazonas Hotel’s Facebook Business Page.
The next set of options are what you see above: a set of check boxes to tick or untick. I’ll just tick them all.
Also, I’ll increase the height in pixels by clicking the up arrow which appears when you hover your mouse over the box.
Next, I’ll click the Publish Button at the top and I’ll go refresh my page on the other browser to watch my changes take effect.
And there you go. Some screenshots of what our Facebook Page Integration into our website.
Troubleshooting tip: remember to type in : https://www.facebook.com/yourbusinesspage
instead of facebook.com/yourbusinesspage, www.facebook.com/yourbusinesspage or http://www.facebook.com/yourbusinesspage.
This is because the s in https: is important.
See you in the next lesson: Customizing a WordPress Theme: Part 4
