How to Use the WordPress Customizer
In this lesson in our WordPress series we will learn how to use the WordPress Customizer. Customize is where you design the website including the header, footer, and overall design decisions. In addition, you use Customize to create menus for the website.
Think of Customize as where you work on everything except for the <main> section of the web pages.
The cool thing about Customize is that it is a WYSIWYG (What You See Is What You Get). You can see the changes as you make them on the website.
This lesson builds on Lesson 8 and continues work on the Gaming with Grandma website using the Astra theme.
Accessing The Customizer
To access the Customizer, simply click the word “Customize” in the black bar.
(Don’t see the black bar? Then you need to login to your WordPress website. You login to your website by going to your WordPress website and appending /wp-admin to the domain in your browser bar. )
Once you click Customize, a left sidebar appears with a myriad of options.
Customize First Steps
When you create a new website, here are some the first customize tasks.
- Set up a home page. This is the same on all WordPress themes.
- Install the logo. How you do this can vary by theme, but is usually fairly easy.
- Install the favicon. This is the same for all WordPress themes.
Parts of the Customize area come from WordPress Core and are the same on all WordPress websites. Parts of Customize come from the theme. (Each theme has its own learning curve.) Because of that, if you aren’t using the Astra theme, what you see may be different.
1. Set up a Home Page
The default home page for WordPress is a list of posts. Since most websites are not blogs, a list of posts is rarely what you want on the home page. We will create a custom home page.
- Customize->Home Page Settings
- Choose “A Static Page” for the website
- Create a new page called “Home”
Note that you are you are creating a new page (Home) and setting the home page to it in one step. The Homepage Settings is universal to WordPress.
Go ahead and Publish. (The home page is empty right now. We’ll work on that in Lesson 10.)
2. Install the Logo
Now we are going to install the logo. How you install the logo can vary by theme, but is generally fairly easy. These instructions are for the Astra theme.
Go to Customize -> Header Builder -> Site Title and Logo
From there you will see what to do. You will find the logo in the Media Library, since we uploaded all of the images in Lesson 8.
Most themes also give you some settings for the size of the logo. You may want to match my settings at left. Note that as you change the settings you will see the changes live.
Publish the changes, and check to see how it looks.
3. Install the Icon/Favicon
For WordPress, you need a square image that will serve as the icon and favicon. The ideal size is 512 x 512 pixels. Navigate to:
Customize->Site Identity
Install the Icon/Favicon from the media library. Publish.
Post Categories for Menus
Before we jump into the menu in customize, let’s add some post categories. That way we will have the categories available for creating the menu. The true power of WordPress comes to life when you understand how to use categories. Post categories are used to organize and display your posts.
Navigate to the dashboard and choose Posts->Categories from the dark gray sidebar.
For Gaming with Grandma, the post categories should be:
- iOS
- Android
- Playstation
- Switch
Now that you have some categories, we need to add categories to each of your posts. A quick way to do this is with Quick Edit in the Posts listing. (You can also add categories with Edit Post in the right sidebar.)
Navigate to the dashboard, then click on All Posts. When you hover over each individual post you will see Quick Edit. You only see the Quick Edit option when you hover over it.
Attach the appropriate categories to posts with Quick Edit. Be sure to uncheck the “Uncategorized” category.
Delete the Hello World post.
At the end of this step, your list of posts should look like this:
Menus in the Customizer
Now that we have some categories, we are ready to create our menu in the Customizer. As a side note, there are two places where you can create and edit WordPress menus.
- One place is in the dashboard: Appearance -> Menus
- The other place is in Customize. We’ll use Customize, because it is a WYSIWYG.
Create Primary Menu
- Navigate back to the home page and open Customizer.
- In the Customizer, navigate to Menus.
- Create a new menu and name it “Main Menu”.
- Set it to the Primary Menu so that it displays in your navigation. (See image below)
- Click the Next button so we can start to add menu items.
With WordPress, you can add menu items and create pages in one step! Look for the Add New Page option. We’ll use that option to add some pages to our website.
Add Items to Menu
Click Add Items and then add these pages to your Menu.
- Find the Home Page you already created and add it. Make sure you choose the Home “page”.
- Add a Contact page with the Add New Page button
- Add an About page with Add New Page
Note that as you add the menu items you see them in the top menu on the page.
Adding the Game Category Pages
Now let’s add a Dropdown menu for the game system categories. To create the dropdown menu for Game Systems, we first need to create a Custom link.
The URL for the custom link is a #. You can use the # when you create a menu item that returns the same page. See the screenshot below.
Add the four categories you created to the menu.
Reorder the Menu and Create the Dropdowns
Now the tricky part. We need to change the order of the menu.
1. Drag and drop the order of the menu items.
2. To make the dropdown menu for the four Game Systems, gently drag the menu items to the left.
Match your menu to the screenshot below.
After you publish, your final menu should look like the screenshot at right. There is a drop down menu for Game Systems.
Sidebars and Widgets
Sidebars are prime real estate for the desktop view of a website. Like the footer, they appear on most pages, but higher up on the page.
Sidebars are best used for redundant information, because they aren’t viewed on a mobile device. There are two options on most WordPress themes:
- Do not display on mobile
- On mobile, display the sidebar at the bottom of the page.
Either way, sidebars are pretty much useless on mobile. Good items to display on a sidebar include:
- Search bar
- Additional navigation options
- About the website
- Contact form for a business website.
You add items to the sidebar and the the top footers with Widgets.
Most WordPress themes place some default widgets in the sidebar or footer. When you turn on your sidebar with the Astra theme, it already has several Widgets included.
Install Sidebar on Posts
1. Navigate to one of your blog posts so that you can see the Sidebar on it. We’ll skip the sidebar on the home page so we have more room for design.
2. Customize->Sidebar
3. Select the right or left sidebar layout
That’s all you have to do to turn on the sidebar. You should now see the sidebar on your posts.
Now that we have the sidebar turned on, we need to clean it up.
1. Go to Customize -> Widgets
2. Select the Main Sidebar
3. Delete the widgets for Recent Comments and Archives
Your Sidebar will look like the sidebar at right. You may add or change the widgets if you like.
Overall Website Styling
Now we are going to work on the overall website styling. In order to do that, we need a bit of content on the home page. Cut and paste the home page content for Gaming with Grandma into the home page, so we have some content for making font color and size decision. Edit Page at the top of the page to add the content.
For the styling work, you need the following blocks. Just put these in as a placeholder:
- <h2> heading
- <h3> heading
- button
We’ll come back to making a better home page next week.
Now for the fun part…
The Astra theme has a host of styling options. Start at the top of the customizer and work through ALL of them. You have two objectives:
1. Gain experience in designing a website with WordPress.
2. Creating the foundation for a beautiful website.
Some Design Guidelines
- Publish intermittently: Don’t do hours of work without publishing your changes, or you risk losing your work. WordPress will save your unsaved work for you, but don’t rely on that.
- Fonts: You may only use two fonts on the website. If you are taking my course, any fonts are ok EXCEPT for the default fonts. The default fonts cannot be used anywhere on the website. If you can’t find them, do more clicking to learn the Astra theme.
- Colors: Your color themes must be consistent. You may not use the default theme colors for ANY color choices. There are color choices for the header, the menu, the regular text and the footer. Here are the colors in the logo: #FF00FF, #FEFF00, #070308
- Sidebar: A sidebar is required for the blog pages. You’ll have to navigate to a blog page to work on the sidebar.
- Footer: You don’t need a fancy footer, but you need to remove the “Powered by Astra” and you need to add the Social Icons to the footer.
Go Through ALL the Settings
For this lab your goal is to learn everything that you CAN do with the Astra theme. If you still have the “Gaming with Grandma” text in your nav bar, then you need to spend more time in Customize in order to find the setting to turn that off.
Right now the Home, About and Contact pages are incomplete. We will work on those in the Lesson 10. If you are interested in learning more about WordPress, check out our WordPress training program.