A Tour of the WordPress Customizer

You are here:
Estimated reading time: 3 min

This article gives you a tour of the WordPress Customizer where many of your site’s settings can be changed.

Finding the Customizer in your Dashboard

First of all, login to your WordPress dashboard. In the left dashboard menu select AppearanceCustomize. This will take you to a new screen where the left menu is completely different than the dashboard menu.

Find the Customizer

We are using the Twenty Twenty theme so the sample shown at the right side will be of that theme. The first five settings (in other themes there may be more than five) affect the theme: Site identity, colors, theme options, cover template and background image. The remaining four settings will be the same for other themes: menus, widgets, homepage settings and additional CSS.

As you choose settings and change them, the area in the left will show these changes as you make them.

Customizer – Twenty Twenty theme

Site Identity Settings

The “Site Identity” setting lets you change the logo (or upload a new one), the site title, the tagline and allows you to upload a site icon.

Site Identity Settings

Colors Setting

The Colors settings allow you to choose a color for the background of the Twenty Twenty theme and also for the header and footer.

Color Settings

Theme Options

The theme options allow you to manage a few details such as the search icon in the header, the author bio (below a single post) and wether or not the entire article is shown in the blog page (called archive page here).

Theme Options

Cover Template Settings

The Cover Template settings manage features of the “Cover Template” option that the Twenty Twenty theme has for posts and pages. You can change if the image is fixed or in parallax mode (scrolling) choose what color the overlay is (in this case a dark rose), the text color (white right now for better contrast) and the opacity of the overlay (how much you can see of the image below).

In order for one of your pages or posts to have this “Cover Template” layout you need to assign it to them on each individual post/page while you are editing it. It’s located on the right side options where it says “Template”.

Cover Template Settings

Background Image Settings

The Background image settings let you add a background to your posts. You can have the image repeat itself like in the screenshot below. You can also choose the image position (play around with this setting so you can see the difference). You can also have the background image be static or scroll with the page.

You should choose an image that is better suited to be a background than the one I chose for the example. You can find some at Subtle Patterns.

Background Image Settings

Menus

The Menu settings let you choose what menu you want in the display locations that your theme has. Twenty Twenty has five display locations for the menus. In this screenshot we see two menus we made and assigned to “Footer Menu” and “Desktop Horizontal Menu”/”Mobile Menu”.

From these settings you can also create new menus or view all the display locations for your theme.

Menu Settings in the Customizer

Widgets

The Twenty Twenty theme has two widgets both for the footer area. Here you can assign any of WordPress’s widgets like categories, archives, calendar, recent posts, etc.

Widgets

In the screenshot below you can see what widgets are in the Footer #1 Widget Area. Remember that you can rearrange these boxes into any order you want by dragging and dropping them into position.

Footer #1 Widget Area

Homepage Settings

The Homepage settings is where you can choose what happens on the front page of your site. You can either have a listing of the latest posts or you can choose a specific page from the pages you have created.

Homepage Settings

Additional CSS

In the Additional CSS area you can add some CSS rules to tweak the look of your theme. In the sample I’ve made all links the color red. You can add as many CSS rules here as you want but my advice is that if the box is filled and you need to make many more changes, create a child theme and put your CSS in the stylesheet there.

Additional CSS

Customizer for the Astra Theme

In the screenshot below you can see how the customizer options change when using another theme. I’ve installed the Astra theme.

Customizer with Astra Theme

The Site Identity area is very powerful in Astra! You can even choose to remove the Title and Tagline from the site. And there are typography options as well (all to do with font size and type and color).

Site Identity Settings for Astra

The footer can have widget areas or hide them.

Footer widget options for Astra

Conclusion

As you can see the customizer is very powerful. Many themes redirect their links in their settings to go to the customizer area so that you do not have to change things in different areas.

I suggest that whenever you install a new theme you take a little peak at the customizer area to see what new options you have for that theme. Sometimes I’ve been very impressed with the features I’ve found there.

Resources

Background Patterns
Subtle Patterns – https://www.toptal.com/designers/subtlepatterns/

Themes
Twenty Twenty – https://wordpress.org/themes/twentytwenty/
Astra – https://wordpress.org/themes/astra/

Thank you for reading.

Was this article helpful?
Dislike 0
Views: 7