Themes vary a lot in how they can be customized
It’s not possible for us to provide a straightforward set of procedures for customizing a theme, because themes vary a lot in this respect. We offer some general guidelines here; you’ll need to find out the specifics from the instructions provided for the theme you’ve chosen.
What do we mean by ‘customization’?
Separating content from presentation: In the world of website development, an important distinction is made between content and presentation. Content consists of the actual text, images, and other media. Presentation is the manner in which it is shown. This distinction is essential to the way the Web is designed to work and is a foundational concept to bear in mind.
Building your website from start to finish can be said to involve two processes:
- Getting it to look the way you want
- Filling it with your text, images, and other content.
When we talk about customization, we’re referring to the process of adjusting the website’s page layouts, color scheme, fonts, and decorative images — its presentation. This lesson deals with that aspect of website production.
Customization and inputting your own content
Without at least some pages and/or posts, and in some cases, specific images, it’s hard to tell what a website will look like. We recommend installing sample content. By using sample content, you can focus on customizing the appearance and layout of the site without getting caught up in working with your own content. Then again, it can be hard to make decisions about layout and appearance until you’ve put at least some of your own content onto the site.
You’ll need to work out for yourself whether and how to integrate these two processes. A good plugin for adding some sample (“example”) content can be found here: https://wordpress.org/plugins/wp-example-content/.
You should be customizing a child theme
Once you’ve chosen, installed and activated a theme, and created and activated a child theme, you can begin customization.
As we’ve made clear in earlier lessons, in almost every case, you should definitely be using a child theme. So when we speak of “customizing a theme”, we really mean “customizing your child theme”. Since the child theme starts out as an exact copy of the parent theme, customizing it will be the same experience as customizing the parent theme would be.
These lessons are written for people who don’t have strong coding skills. The customization process we’re about to go over is limited to what can be done directly via the Administration Screens, without editing any files manually.
It’s best to be flexible
There is a lot that can be done to change and adjust the look and layout of your website using only the Admin interface. But we recommend that you approach this process with the understanding that you will simply not be able to fine-tune everything about the website’s appearance. It’s best not to think of your site as a work of art which you must turn into a very specific vision you have in mind.
Although a non-coder has an incredible amount of control over a WordPress website, there definitely are limitations. When you run up against one of those limitations, we suggest that you ask yourself just how important it is to make a certain change, and not be attached to it if in reality it’s just not essential. Be flexible and work within the constraints of the theme you’ve chosen, and you’ll have your website done in much less time, with much less frustration.
Instructions and support for your theme
A decent theme will include some type of directions for its use, and will offer some avenue for support. Before you start customizing it, locate both of these resources. Read the instructions through, and be ready to ask for support if you need it.
Sometimes, unfortunately, very few instructions are provided, and you’ll need to be a bit proactive to figure out how the website should be set up and customized with this particular theme.
Support is often provided via a web forum where you have to log in, carefully write a post in the right section of the forum, and then wait — patiently — for a response. Don’t hesitate to use these support forums, but always be polite and professional.
Why doesn’t my home page look like the theme demo?
When you were shopping for the right theme, you probably looked at a few theme demos which showed what your site could look like, and you probably chose that theme because you want your site to look a lot like that demo.
The Home page layout and appearance is especially important, and very likely you would like your site’s home page to look like the one in the theme demo. But when you first install the theme and view the front-end website, you may be disappointed and confused by what you see. Why doesn’t it look almost anything like the demo?
Simply because (1) the theme doesn’t come with the exact images and content the demo used, but instead has to rely on whatever content you have installed, if any; and (2) the Home page needs to be set up with certain types of pages and/or posts, widgets, specifically-sized images, custom menus, and/or plugins in order to look like the demo. Setting these things up is usually pretty straightforward, and just takes a good study of the theme instructions and some time and effort.
It’s not possible for us to provide instructions here for specific theme home pages, but the theme should. As always, if you’re stuck, use the available support channel for the theme.
The Theme Customizer and Theme Options
The Theme Customizer and Theme Options are names for two separate features which may be provided by the theme author. They’re similar in that they each allow the user to easily make choices which determine the appearance and sometimes the functionality of the website.
But they’re different in one significant way: with the Theme Customizer, you can preview your settings and see exactly how they’ll look without leaving the screen, before saving the changes. With Theme Options, you’ll need to choose settings, save them, and view them on the live website to see if you want to retain those settings.
The Theme Customizer’s live-preview ability is handy, but using Theme Options is pretty simple too.
Most themes include at least one or the other; some themes include both.
Using the Theme Customizer
The Theme Customizer really is a user-friendly interface, and very little explanation should be needed. In the left panel, you make certain settings, or combinations of settings, and a preview of the website with those settings is shown in the large area on the right. When you like the settings, click Save and Publish. If you change your mind, or want to try other settings, just repeat the process.
Using Theme Options
Not all themes provide the specific feature called Theme Options, but many do. Theme Options is a set of screens in the Admin where the user can choose settings which determine certain aspects of the look and functioning of the website. Unlike with the Theme Customizer, however, you’ll need to save your changes, view them on the front-end website, and then re-adjust settings as necessary, often many times. This may sound like a lot of work compared with using the Theme Customizer, but in reality, this is a very normal process in building a WordPress website and just takes a little longer.
Log into your site’s Admin and look in the Admin Main Menu. If Theme Options have been provided, you’ll see a menu item Appearance > Theme Options. Click on it to go to the main Theme Options screen.
What you see there will depend entirely on the theme author. It may be just an easy-to-navigate set of screens, or, unfortunately, it may also include a lot of graphics and advertising which benefit only the theme author or company.
On the more professional and helpful end of the scale, it may even have buttons or links to access instructions and support.
Before you start making changes, take a look at each Theme Options screen and note what choices you have.
Because of the open-ended nature of this feature and the variety of ways it is used by theme authors, we can’t provide specific guidance in this area. You’ll need to utilize whatever instructions are available, and seek support as needed through the official channel provided.
The Appearance > Header Screen
In addition, theme authors may also provide an Appearance > Header screen, and sometimes an Appearance > Background screen, allowing the user to customize the page header and background image. If these tasks haven’t been handled by the Theme Customizer or Theme Options, they can be done on this screen.
Appearance > Editor (“Edit Themes”)
First, please note that this Editor is completely different and separate from the Visual Editor you’ll use to create pages and posts. We mention this feature here because WordPress provides it, and because it can be a useful tool for theme customization for people who are experienced with code. But unless you have a good knowledge of PHP and CSS code, we recommend that you stay away from this screen, where the PHP and CSS files that comprise the theme can be directly hand-edited.
- Codex article, Appearance Theme Options Screen
- Codex article, Appearance Header Screen
- Tutorial on WP Tuts Plus, A Guide to the WordPress Theme Customizer: What It Is, Why It Benefits Us
- Book chapter from Que Publishing, Customizing Your Theme