In this course we’ll show you how to use the Theme Options panel in the WordPress Dashboard to customize your website’s appearance. We’ll cover the following topics:
Understanding Theme Options
In this lesson, we’re going to walk through the Theme Options panel in the WordPress Dashboard. We’ll give you an overview of the options you’ll use most often when customizing your websites.*
*Note: We’ll cover how to change the settings in Theme Options in the next lesson, using Stover Tree Service as an example.
Let’s get started!
Understanding Theme Options
The Theme Options panel is located under the theme name on the WordPress Dashboard. For the Mystile theme we’re using for Stover Tree Service, the Dashboard panel is labeled ‘Mystile’:
When we click on the Mystile panel, it opens up a sub-menu which defaults to the Theme Options panel:
The default panel in theme options is ‘General Settings -> Quick Start’. We’ve already covered most of the settings on this panel in the Creating a client logo and favicon lesson. The final field on this panel is for your tracking code:
We recommend Google Analytics for tracking traffic to your website. If you haven’t yet set up Google Analytics, this video will show you the steps for signing up and getting your tracking code:
The Display Options panel includes several settings that affect your site globally. This includes custom CSS, post, page, and blog settings, and the option to include a breadcrumb trail:
The next panel in Theme Options is Styling Options. This panel opens on the Background panel:
The Background panel provides options for selecting a background color, background image, and allows you to position the background image if you choose this option.
The Links panel allows you to select a color for your links, hover (when your mouse is hovering over a link), and buttons:
The Typography panel allows you to select the fonts you want to display on your website. Included are options for general, navigation, page title, post title, and various other fonts. You can select from several standard fonts, as well as numerous Google Fonts:
The Layout Options panel allows you to set up the basic layout of your site. Included are options for where your sidebar is positioned, as well as to exclude certain post categories from your Homepage and Blog Page Template:
The Homepage panel allows you to make changes to the Mystile theme’s Custom Homepage. You can add a featured image or banner, add a sidebar, and include your blog posts:
The Footer Customization panel allows you to make changes to the footer of your site. Included are options for layout, including a WooThemes affiliate link, and customizing the content displayed in the left and right footer areas:
Subscribe & Connect
You can use the Connect Settings panel to add the URLs for your client’s social media pages, as well as enable the display of social media icons on the site:
The Contact Information panel allows you to add the information you want to display on your Contact Us page, including your client’s company contact information:
The Maps panel is used for adding a Google Map showing your client’s location, and includes several fields for customizing the display:
Congratulations on completing Lesson 1! You should now understand how to navigate the Theme Options panel.
Customizing the theme for your website
In this lesson, we’re going to show you how to use Theme Options to customize your theme. We’ll cover all the steps in two ways:
- With text and screenshots
- With video
Let’s get started!
Customizing the theme: Text and screenshots
Using our Stover Tree Service example website, we’re going to go through the customizations we want to make in the Theme Options panel. We’ll go through many of the same panels we covered in our last lesson, Understanding Theme Options.
We’ll start in the Quick Start panel. The first change we’ll make here is to select the green.css Theme Stylesheet, which will be a good match for our client’s color scheme:
Color is one of the most basic elements of design, and creating the right color schemes for your websites can be a big factor in the user experience your visitors will have.
Here are some tips and tricks that will help you create great color schemes for your WordPress websites:
When selecting and creating a color scheme, there are a few key factors to consider:
1. Your client’s color scheme. If your client already has a logo and/or marketing materials, you’ll want to use the same colors for their website. This will give your websites a consistent look and feel, which is an important part of branding.
2. The psychology of color. Colors have widely recognized meanings, and the colors you select will help your clients’ visitors receive the message your clients want to deliver. You can review the Entrepreneur.com article Your Brand’s True Colors to learn more about the meanings associated with various colors.
If you find that your client has an existing color scheme that doesn’t send the desired message, we recommend that you guide them toward a scheme that’s a better match. An important part of being a Strategic Partner, rather than just a Web Designer, is sharing your expertise when it will benefit your client.
3. Your client’s images. Whenever possible, you should make an effort to have your client’s images match, or at least complement, their color scheme. There may be situations where you start with their color scheme and find matching images, and others where you start with their images and create a matching color scheme.
Less is more
When creating color schemes, it’s important not to overdo. Two or three colors is all you’ll typically need to create a compelling look, and using more may create a cluttered and disorganized feel.
When designing with three colors, a good rule of thumb is the 60-30-10 rule. This means that your primary color should take up around 60% of the design space, your secondary color 30%, and your accent color 10%. If you find that you need to use more than three colors, try using different shades or tints of your main colors to maintain continuity.
You may find the following resources helpful in creating your color schemes:
Watch this video to see examples of companies you know, and how they apply color theory to their website designs:
Now, back to the Quick Start panel. We can then scroll down to the ‘Tracking Code’ field, where we can add the Google Analytics tracking code for Stover Tree Service and click on the ‘Save All Changes’ button:
Tip: Save All Changes
It’s a good idea to click on the Save All Changes button whenever you’ve made a change or changes in a panel. This will avoid the possibility of forgetting to save your changes and having to make them again.
The next changes we’ll make are on the Typography panel. We’re going to enable custom typography by clicking on the ‘Enable Custom Typography’ checkbox, change all of the fonts to ‘Arimo’ (which is a good fit for our client’s site), change the ‘General Typography’ weight to ‘Normal’, and finally click on the ‘Save All Changes’ button:
You’re probably familiar with icon fonts, even if you’ve never heard of them before. Icon fonts are fonts that include simple graphics that you can use to enhance the content on your websites.
Adding an icon font to your WordPress websites can help you in several ways:
- When used to break up your text, icons make your content an easier and more interesting read
- By using content-specific icons, you can help your visitors identify and assimilate your content quickly and easily
- Icons can also be used to draw attention to the content areas you want to emphasize
Check out how simple it is to add icons to your WordPress sites:
In the Layout Options panel, we’re going to change the layout from sidebar-left to sidebar-right, and then click on the ‘Save All Changes’ button:
We’re going to make two changes in the Footer Customization panel: First, we’re going to change the number of footer widget areas to two:
We’ll add a footer widget to one of these areas in a future lesson. We can then scroll down and click on the ‘Enable Custom Footer (Right)’ checkbox, which will remove the WordPress and WooThemes credits, and then on the ‘Save All Changes’ button:
Subscribe & Connect
The final changes we’ll make for the Stover Tree Service site are in the Connect Settings panel. We’ll add the links for Stover Tree Service’s Twitter and Facebook accounts, and then click on the ‘Save All Changes’ button:
Customizing the theme: Video
Watch this video to see the steps we’ve outlined above:
Congratulations on completing Lesson 2! You should now understand how to use the Theme Options panel to customize your theme.