Introduction

One of the most powerful WordPress features is undoubtedly the Theme Customizer, which allows you to make real-time changes to your website. Using the Customizer, you can tweak a wide variety of theme settings in a visual interface. This is a significant improvement of the user experience as you can see the changes immediately applied on your website frontend.

In this tutorial, we will guide you on how to use the Customizer and overview every aspect of your website appearance you can modify using it.

Accessing the Customizer

For a start, we will need you to log into your WordPress Admin Dashboard. You can do that by accessing your domain followed by "/wp-admin", i.e., "yourdomain.com/wp-admin", where "yourdomain.com" stands for your actual domain name.

Once logged, please navigate through the left-hand side menu bar to Appearance > Customize.

This action will redirect you to the actual Theme Customizer interface.

Theme Customizer Overview

Before we begin explaining the Customizer, you should know that each theme comes with an individual set of features and functionalities. Considering that, the settings and options you are provided with might be slightly different. Anyhow, the general idea of using the Customizer is the same, and the instructions you will find should be sufficient in any case.

The Theme Customizer interface will present you with a preview of your actual website on the right end. The left vertical menu consists of a few separate sections, each dedicated to a specific aspect of your site you may customize.

We are going to review each of the sections and briefly explain what exactly you can modify.

Using the Theme Customizer

To keep it consistent, we will review each of the options available in the left-hand menu following the same order. Please bear in mind that in our example, we will be publishing the changes at the end of the tutorial. If you are looking forward to performing only particular modifications, you need to publish them right away.

Changing the Site Theme

The "Active Theme" section indicates the theme you are currently using for your WordPress website. By clicking on the "Change" button, you will be able to change your theme directly through the customizer.

Upon doing that, you will be presented with a list of all themes currently installed in your WordPress instance. In case you want to select a new one, you need to click on the corresponding "Live Preview" button. If you are then pleased with the result, you have to click on the "Activate & Published" button positioned at the top of the left menu.

You can even install new themes directly through the Customizer. You can do that by clicking on the "WordPress.org themes" radio button. Upon doing so, you will be presented with the list of available themes.

To install a new theme, you have to click on the corresponding "Install & Preview" button. After the theme is installed, you have to click on the "Activate & Published" button to save the changes.

Site Identity Settings

The "Site Identity" tab holds the general website information:

• Logo - This option allows you to replace the default text-based site title and tagline with an image. You can choose one of the available images in your Media Library or directly upload one from your local computer.
• Site Title - This is the name of your site. By default, the site title is “My Blog”.
• Tagline - This is a short phrase or sentence located under the site title. It is similar to an advertising slogan. The goal of the tagline is to submit the entity of your site to the visitors.
• Display Site Title and Tagline - This checkbox determines whether the title and the tagline to be displayed on your website frontend. In case you want to hide them, please make sure to untick it.
• Site Icon - the icon that appears in the browser tabs, bookmark bars, and also in the WordPress mobile apps. It can also be found like "Favicon". Similarly to the logo, you can choose an image from your Media Library or upload a new one from your local device.

These are among essential settings, as they influence the first impression you will leave to your visitors.

Customizing Colors

Within the "Colors" tab, you can customize the colors of your website using the color schemes provided by your theme.

• Color Scheme - This determines the background color of your website. By selecting the "Custom" radio button option, you will be presented with a color picker, and you will be able to choose any desired color.
• Header Text Color - This determines the color of the texts displayed within your website header - by default, the site title, and tagline.

If you want to switch back to the default colors, please click on the "Clear" button.

Configuring Header Media

The "Header Media" tab includes settings controlling the Header Image/Video of your website. Please find detailed instructions on this topic in our guide on How to edit the Header Image of your WordPress website.

Managing Menus

Within the "Menus" section, you will be able to modify the existing menus on your website, as well as to add new menus.

If you want to check the available menu locations supported by your theme, you can click on the "View All Locations" button.

The process of managing menus through the Customizer is not so different than through the WordPress Admin Dashboard. Therefore, we will not dig into an in-depth explanation of how to do that. In case you need further guidance, you can always refer to our How to create and manage the menus of your WordPress website tutorial.

Managing Widgets

Under the "Widgets" tab, you can customize the widgets supported by your theme. Once you access it, you will be presented with the available widget-ready areas.

If you want to include a new widget to a particular widget area, please click on it and then hit the "Add a Widget" button.

Afterward, the process of configuring the widget is quite similar to the backend. Detailed explanation on what widgets are in general and how to properly set them you can guide in our What is a WordPress Widget and how to add a new Widget tutorial.

Configuring Homepage Settings

From the "Homepage Settings" tab, you can control the type of your home page, and the default home and post pages of your website.

• Your Homepage Displays - Your selection here determines the structure of your home page. If you select the first "Your latest posts" option, WordPress will then display the posts that had been recently created. The "A static page" option allows you to either use the default homepage of your theme or a custom one.
• Homepage - This option will only be available in case you are utilizing a static page as a homepage. From the dropdown menu, you may select any available page created in your WordPress installation to be used as the Home Page of your website.
• Post page - The same applies to this option, but instead, you need to select the general page for all your posts.

You are also allowed to add new pages on the go if you prefer to so.

Configuring Theme Options

From the "Theme Options" tab, you can control the appearance of your website pages determined by the theme.

• Page Layout - Your selection here determines how the pages are presented on your Home Page. By default, they split into two columns where the title appears in the left column and the content in the right. If you want to show them in one line, please make sure to choose the "One Column" button.
• Front Page Sections - These dropdown menus allow you to select which page to be displayed in the corresponding section on your Home Page.

You are also allowed to add new pages to the corresponding Home Page section if this is required.

Adding Custom CSS

From the last "Additional CSS" tab, you are able to include custom CSS code and modify the style of the page.

The code needs to be inserted into the empty panel within the left menu.

This a great way of styling your theme, as it eliminates the need to insert the code into the theme itself and potentially lose your customization when the theme is updated.

Previewing Website on Different Display Resolutions

At the very bottom right corner of the left menu, you will find three icons resembling different devices. They are intended to preview the appearance of your web page on the corresponding device.

We would recommend you to always take advantage of them when performing visual changes on your website.

Publishing the Website

Now, once you perform the desired changes, it is vitally important to click on the "Publish" button to apply them. Even though they appear in the preview section right after they are performed, it does NOT mean they are saved. This is one of the great advantages of the Theme Customizer as it allows you to visually preview the changes before actually applying them.

Once this is done, the changes will be successfully applied to the live version of your website.

Congratulations! Now you are familiar with the WordPress Theme Customizer, and you know your way around. We hope after this tutorial, you will realize the great benefits it has over the WordPress Admin Dashboard in particular aspects.