Course: Customizing the Display

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:

  1. Understanding Theme Options
  2. Customizing the theme for your website

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’:

WordPress Dashboard Mystile panel

The Mystile panel in the WordPress Dashboard

When we click on the Mystile panel, it opens up a sub-menu which defaults to the Theme Options panel:

Theme Options panel

The Theme Options panel

General Settings

Quick Start

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:

Tracking Code field

The Tracking Code field

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:

Display Options

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:

Display Options panel

The Display Options panel

Styling Options

Background

The next panel in Theme Options is Styling Options. This panel opens on the Background panel:

Background panel

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.

Links

The Links panel allows you to select a color for your links, hover (when your mouse is hovering over a link), and buttons:

Links panel

The Links panel

Typography

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:

Typography panel

The Typography panel

Layout Options

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:

Layout Options panel

The Layout Options panel

Homepage

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:

Homepage panel

The Homepage panel

Footer Customization

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:

Footer Customization panel

The Footer Customization panel

Subscribe & Connect

Connect Settings

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:

Connect Settings panel

The Connect Settings panel

Contact Page

Contact Information

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:

Contact Information panel

The Contact Information panel

Maps

The Maps panel is used for adding a Google Map showing your client’s location, and includes several fields for customizing the display:

Maps panel

The Maps panel


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.

General Settings

Quick Start

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:

Changing Theme Stylesheet

Changing the Theme Stylesheet

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:

Key factors

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.

Resources

You may find the following resources helpful in creating your color schemes:

Examples

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:

Google Analytics tracking code

Adding the Google Analytics tracking code

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.

Typography

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:

Changes in Typography panel

Making changes in the Typography panel

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:
Icon Font

  • 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

The video below shows how to use Genericon’d, a WordPress plugin for the Genericons icon font set. The Genericons set is developed by Automattic, the company behind WordPress.org and WordPress.com.

Check out how simple it is to add icons to your WordPress sites:

Layout Options

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:

Changes in Layout Options panel

Making changes in the Layout Options panel

Footer Customization

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:

Customizing Footer Widget Areas

Customizing the number of Footer Widget Areas

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:

Enabling Custom Footer (Right)

Enabling the Custom Footer (Right)

Subscribe & Connect

Connect Settings

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:

Adding Twitter and Facebook links in the Connect Settings panel

Adding Twitter and Facebook links in the Connect Settings panel


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.

Go to next Course: Adding Pages and Navigation