Lesson 4, Topic 1
In Progress

Step 6. Customize Your Website’s Basic Appearance

Jacob February 16, 2021
Lesson Progress
0% Complete
A screenshot of the WordPress themes page under "appearance."
A screenshot of the WordPress themes page under “appearance.”

Now comes the fun part of designing your website—the actual customization.

Under the Appearance tab you can find a few pages with settings relating to customizing the appearance of your website.

We’ll outline the basics of how to use this system below, but please keep in mind that your final design is ultimately up to you.

The information presented in this section is simply a starting point for your overall design process.

Appearance -> Menus

A screenshot of the WordPress menus page under "appearance."
A screenshot of the WordPress menus page under “appearance.”

The Menus page under the Appearance tab lets you create custom menus to use around your site.

To begin, you should type in a name for your first menu (such as “Header Menu”), review the settings for this menu (such as clicking “Primary Menu” as the display location), and then clicking “Create Menu.”

You’ll then be taken to a page where you can edit your menu as you see fit.

For example, you could add your Home and About pages to your header menu, then add in a custom link with your phone number so people can directly call your business.

Generally, it’s smart to create a header and footer menu at a minimum to fill out your theme.

Appearance -> Customize

A screenshot of the WordPress customize page under "appearance."

When you click the Customize link under the Appearance tab you’ll be taken to your theme’s customization dashboard, which is separate from the WordPress dashboard we’ve been using up to this point.

On the left you’ll see several new tabs which each govern a particular aspect of your website’s overall design.

Appearance -> Customize -> Global

Under the Global tab you’ll find links to customize your website’s typography, colors, container defaults, and button colors.

Appearance -> Customize -> Header

Under the Header tab you’ll find settings relating to your website’s primary header (the bar of information at the top of every page).

Here, you can set various aspects of your site’s identity (such as your logo and favicon), customize what your header bar looks like, customize the styling of your primary menu, and select whether or not you want a transparent header (and what that header should look like).

Appearance -> Customize -> Breadcrumb

Breadcrumbs are a type of secondary navigation that reveal a user’s location within a website.

They are generally only used in larger sites where users often get lost without additional guidance (such as on e-commerce sites).

Smaller sites (such as the one we’ve set up so far) should generally turn breadcrumbs off until they need them.

Appearance -> Customize -> Blog

Under the Blog tab you can find various styling options relating to your posts, such as the default content width, what metadata to include, and other similar settings.

Appearance -> Customize -> Sidebar

Here, you can edit whether or not pages on your website have a sidebar by default, as well as what that sidebar will look like when it displays.

Appearance -> Customize -> Footer

Under the Footer tab you can find settings for customizing the bottom bar of your website.

For example, you could add widgets to your footer (which could contain additional navigation options, search bars, etc.) and you can customize the existing footer on your website.

Appearance -> Customize -> Menus

The Menus tab simply contains information similar to what we customized earlier in Appearance -> Menus.

Appearance -> Customize -> Widgets

Under the Widgets tab you can customize the various widgets that appear in your theme’s primary sidebar.

Appearance -> Customize -> Homepage Settings

The Homepage Settings tab simply shows information relating to your homepage that we’ve customized already.