Using the theme customizer

The theme customizer is a WordPress feature that allows you to change certain theme settings and preview them on-site in real time. The built-in customizer is enabled on all themes with a basic set of configuration options. We can use the customizer API to add our own controls and settings to customize the theme. Many themes come with additional tabs and controls for advanced customizations.

In this recipe, we are going to look at the use of default theme customization settings.

Getting ready

Special preparation is not required for this recipe. The necessary features are available on the WordPress dashboard. We will be using the Twenty Twenty theme throughout this recipe.

How to do it...

Follow these steps to load the customizer, before we go through the different sections:

1. Log in to the WordPress Dashboard as an administrator.
2. Click on the Appearance menu.
3. Click on the Customize option. You will get a screen similar to the following with the available customizer options for the theme:

The Twenty Twenty theme provides support for nine tabs, starting with the Site Identity tab. We are going to look at six of the nine tabs common for most themes.

Site Identity tab

Let's take a look at the use of the settings in the Site Identity tab:

1. Click the Site Identity tab to get a screen similar to the following:

2. Then, change site title and tagline to your preferred values.
3. Click Select site icon and upload an image. The image's width and height should be equal. The minimum allowed size is 512 px.
4. Click the Publish button to save the changes.

You will see the title and tagline change instantly on the right-hand side of the window. Also, once the icon has uploaded, it will show as the icon of the browser tab.

Colors tab

Let's take a look at the use of the settings in the Colors Identity tab:

1. Click the Colors tab to get a screen similar to the following:

2. Change Primary Color to Custom.
3. Select a color from the color bar.
4. Click the Publish button to save the changes.

You will see the colors for buttons, links, and featured image change on the site preview. This should be used when you want a different color scheme.

Menus tab

Let's take a look at the use of the settings in the Menus tab:

1. Click the Menus tab to get a screen similar to the following:

2. Click on the Create New Menu button to create a menu:

3. Add a menu name as Main Menu and menu location as Desktop Horizontal Menu and click the Next button. The Twenty Twenty theme provides five built-in menu locations.
4. Click the Add Items button to add menu items to the menu from the available list on the right-hand pane. Also, we can tick the Automatically add new top-level pages to this menu setting to add main pages to the menu without selecting them manually:

5. Select the Pages, Posts, Categories, Tags, or Custom Post Type items for the menu. In this case, we are going to add the Home and Privacy Policy pages to the menu.
6. Click the Publish button to save the changes.

You can go back to the Menus tab and see the newly created menu. This screen can be used to create new menus, edit existing menus, change the location of the menus, and view available menu locations with the current selection.

Widgets tab

Let's take a look at the use of the settings in the Widgets tab:

1. Click the Widgets tab to load the widget areas of the theme as shown in the following screenshot:

2. Click Footer #1 tab to load the widget area
3. Click the Add Widget button to add a widget. Once you've done this, you'll see a screen similar to the following:

3. Select a widget from the screen that opens on the right-hand side. The widget will be added to the existing list.

4. Click the arrow icon of any widget to edit the settings. You will get a screen similar to the following for the Recent Posts widget:

5. Change the necessary settings of the selected widget.
6. Click the Remove button inside each widget to remove unnecessary widgets.
7. Click the Reorder button to enable up/down arrows for each widget.
8. Change the widget order by using the up/down arrows.
9. Click Done to complete reordering.
10. Click the Publish button to save the changes.

The Twenty Twenty theme provides two widget areas. This screen can be used to completely modify widgets in any given widget area.

Homepage Settings tab

Let's take a look at the use of the settings in Homepage Settings:

1. Click the Homepage Settings tab.
2. Click the A static page option. You will see the following screen:

3. Select a page for the Homepage setting. If you don't have a page, click the Add New Page button and create a page. In this case, we will be creating a new page called Home.
4. Select a page for the Posts page setting. If you don't have a page, click the Add New Page button and create a page. In this case, we will be creating a new page called Blog.
5. Click the Publish button to save the changes.

This screen is used to configure the pages that will be used as home and blog pages. More details about this feature will be discussed in the Using a static page as a home page recipe.

The last tab is called Additional CSS. It will be discussed in detail in the next recipe, that is, Working with Custom CSS in live preview.

With this, we have checked the basic usage of the main five tabs in the theme customizer.

How it works...

The default Customizer tabs are enabled for any theme. However, some themes might remove these tabs and use custom tabs that have been generated by the theme. We have the ability to add custom tabs and settings to the customizer using Customizer API functions. The default settings available in the customizer are saved in the wp_options table of the WordPress database.

If you are not familiar with working with a WordPress database, please refer to the Appendix of this book for instructions on how to work with databases for these recipes.

All the settings changes are temporary until we click the Publish button. The changes in the settings are previewed instantly in the site window on the right-hand side. The preview process is handled by enqueuing necessary details and styles with JavaScript. Since the changes are previewed instantly, many people will think the changes have been saved. However, you will lose the changes when refreshing the page if you don't click the Publish button.

Usually, we modify the settings and check how they are changed in the layout on the right-hand side. However, we have the option of clicking the Edit button icons on the right-hand side to load the respective settings for that section. The use of Edit buttons makes this process simpler. We should use the customizer to modify the content and check the existing theme, as well as check multiple themes without activating each theme on the site.