How to Customize WordPress Theme by Customizer
Tags: wordpress
Published: 2020-08-24 02:34:34

The publication at [GretaThemes](https://gretathemes.com/wordpress-theme-customizer/).
 --- --- --- 

Customizing a WordPress theme is a necessary step to utilize any theme after activating it. And with the help of the theme's Customizer, you can do it more easily than ever. However, it may be a little bit difficult when you get used to this tool. So if you are confused, this article will be really helpful for you.

After [choosing a WordPress theme](https://gretathemes.com/wordpress-themes/) and [installing it](https://gretathemes.com/install-wordpress-theme/), you should use the Customizer tool to customize the website's appearance following the theme demo or your own style. The advantage of this tool is the live preview mode that allows you to directly see the results while customizing. This saves you time and is much easier to manipulate than editing in the backend (Admin Dashboard).

Here are the basic steps to customize a [WordPress theme](https://gretathemes.com/wordpress-themes/) with Customizer to create a website that is most closely similar to the demo theme or to your desire.

### Open the Customizer Tool

First, go to **Customizer** on the Admin bar at the top of the page, or **Dashboard** > **Appearance** > **Customize** to open this tool.

![Open the Customizer tool.](https://cdn-images-1.medium.com/max/600/0*ki8_JFrBBh-Mqy4a.png)

Customizer's interface consists of two main parts: the left column contains customization options and the right screen displays the live preview. Here is the most common interface of Customizer.

![Customizer's interface consists of two main parts.](https://cdn-images-1.medium.com/max/600/0*gojfC9qVl8mZwfoR.png)

The left column includes:

1: The **Publish** button to save the results after customizing. If you close the site without clicking it, your customization won't be saved. So after every change, don't forget to press this button.\
2: This area shows the theme you're using. As you can see in my example, I'm using Memory theme. (You can download this theme [here](https://gretathemes.com/wordpress-themes/memory/)).\
3: Theme customization options. Note that the theme options vary depending on different themes.\
4: Click **Hide Controls** to hide this column. Also, if you want to see how the live preview looks like on other devices, just click the corresponding device icons here.

After getting familiar with the Customizer interface, let's dig into each basic customization option to customize an appearance that is most similar to the demo or to your idea. Remember to read the theme's documentation carefully, since it may have different customization requirements.

### Customize Theme by Customizer

After activating a theme, your website hasn't looked like the demo yet. Unless your theme supports importing demo, you have to manually customize the theme. Common custom sections include:

### Homepage Settings

This is the most important section to determine your homepage display.

![Customize your homepage settings.](https://cdn-images-1.medium.com/max/600/0*nC5rkmTl-SAJACjm.png)

In **Homepage** Settings, there are two options for showing homepage: the latest posts and static page. Depending on the requirements of each theme, you can choose a suitable option.

For a reading site like blogs, you should choose **Your latest posts**.

![Showing homepage with your latest posts.](https://cdn-images-1.medium.com/max/600/0*EzNLjui3cbwAch68.png)

For business pages, you should choose **A static page**, then select a page for the homepage in the **Homepage** section and an archive page in the **Posts page** section. Just click on the drop-down menu icon in each section to select one from available posts and pages, or click **Add New Page** to create a new one for these two items.

However, if the chosen homepage has not been customized and set up, it may lack special features such as slider, call to action, hero image, etc. and you'll need more customization. You'd better read the theme's guidelines for these settings.

![Read the theme's guidelines to know how to customize other settings.](https://cdn-images-1.medium.com/max/600/0*z0CTwP-7NslBk5rx.png)

### Site Identity

This section helps you change information about the website like [changing logo](https://gretathemes.com/change-logo-in-wordpress/), title, tagline.

![Site Identity helps you change information about the website.](https://cdn-images-1.medium.com/max/600/0*1hezfBztzZrNzeug.png)

[Choose the logo](https://deluxeblogtips.com/tips-create-a-great-logo-design/), write the [title and tagline](https://deluxeblogtips.com/optimize-wordpress-title-tagline/) for your website. Besides, it may have options to customize logo, title, or hide/show these items.

![Options to customize logo, title, or hide/show these items.](https://cdn-images-1.medium.com/max/600/0*-HDJeiMnPlQ6vJgt.png)

### Color, Background Image, and Fonts

Most of the themes, once activated, will automatically set up colors, backgrounds, and fonts similar to the demo. However, in case the above elements haven't been ready yet, you need to set them up.

![You can customize color, background image, and fonts](https://cdn-images-1.medium.com/max/600/0*4hD0hXngOhCO9WKv.png)

#### Color

Most themes support the Color section. However, while some themes allow you to change the color of many elements, some themes limit to few ones.

First, click the element that you want to recolor (1) (like main color, heading color, or text color). You can choose a color directly on the palette (2), or enter the color code here (3).

![Customize the color of your theme.](https://cdn-images-1.medium.com/max/600/0*eJZXdrPm_CJ1bE67.png)

#### Font

Font or **Typography** section allows you to change font styles, family fonts, text size, etc. depending on each theme.

Choosing a family font also depends on the requirements of the theme. The easiest way is selecting an available font from the drop-down menu like the image below. Themes like this usually support only some basic fonts.

![Font or Typography section allows you to change font styles, family fonts, text size, etc.](https://cdn-images-1.medium.com/max/600/0*V2J95NKmMiCh2i7d.png)

If your themes [support Google Fonts](https://gretathemes.com/using-google-fonts/), you may need to get the font's code, name, or link from [fonts.google.com](https://fonts.google.com/) and then paste to the boxes like this.

![Get the font's code, name, or link from fonts.google.com and paste to the boxes.](https://cdn-images-1.medium.com/max/600/0*ShgP6tVNZnca5iNr.png)

The advantage of the second way is that you have many choices of fonts from Google Fonts.

#### Background Image

Most themes allow you to choose a photo to set the **background image**. In Background Image section, click **Select image** and select a photo from your library or upload one.

![Select a background image from your library or upload one.](https://cdn-images-1.medium.com/max/600/0*jfndP91DybW4QR-f.png)

Then, you can edit style, location, and size of the image to make a perfect fit with your website.

![Edit style, location, and size of image.](https://cdn-images-1.medium.com/max/600/0*A514l8e9BVaCnkaD.png)

To change the background image, click the **Change Image** button. If you want to delete a background photo, hit the **Remove** button.

When you choose **Repeat Background Image**, the background image will be repeated from the beginning to the end of the page. If you choose **Scroll with page**, it will be moved along with the page when you scroll as below.

![If you choose Scroll with page, it will be moved along with the page.](https://cdn-images-1.medium.com/max/600/0*oys4D_HUdTU7J6Do.gif)

### Menu

The **Menu** section lists all the menus and their current locations. Traditionally, the primary menu is on the header. Especially, some themes will allow you to display more than just one location, such as on the footer, topbar, slide menu, etc. To find out how many menu locations you have, look at the text below the **Menu Location**.

![The number of menu locations display in the Menu Location section.](https://cdn-images-1.medium.com/max/600/0*-N3N7ODYYfn1-QP_.png)

Memory theme, for example, has only one location for the menu. You can see it by clicking the **View Location** tab. Then, hit a menu location and select an available menu you want to display there. To edit a menu, click **Edit Menu**, and click **Create New Menu** to create another one.

![You can see the menu by clicking View Location tab](https://cdn-images-1.medium.com/max/600/0*1xM-HM2AhaARPTI4.png)

What about the detail of creating and editing a menu? You can refer to our previous article [here](https://gretathemes.com/add-rename-page-wordpress-menu/).

### Widget

Widgets are blocks of content or function added to some areas supporting widgets such as sidebar or footer. There are 15 default WordPress widgets that allow you to insert videos, photos, galleries, latest posts, pages, and more. Especially, some themes even offer their own special widgets, so you should find out exactly the widgets you need, then select them properly.

In **Widget** section, you will see the areas that support widgets on the current page. The number and the location of these areas also vary by theme.

![You will see the areas that support widgets on the current page.](https://cdn-images-1.medium.com/max/600/0*Xvdn9sfeokBh0n6J.png)

To add a widget, click the location to place the widget such as footer, and click the button **Add a widget**. You can choose one in the list or use the search bar to find the widget you want.

![You can choose a widget in the list or use the search bar to find one.](https://cdn-images-1.medium.com/max/600/0*cVRcOQ0m7_-pUnfX.png)

After choosing a widget, some like image, gallery, video, audio, and page ones may need additional setup to display them as you want. When doing this, you should carefully read the widget's request and follow it. Don't worry, these steps are quite simple.

To delete a widget, go to the desired one and click **Remove**.

![Delete a widget.](https://cdn-images-1.medium.com/max/600/0*NqGdZk0_eP4m_7Kt.png)

The **Reorder** button will help you move widgets to another area of the theme. Specifically, click (1), select the new widget area (2), and click the **Move** button (3). In addition, the up and down arrow button (4) will help move widgets in an area. When completed, press **Done** (5).

![Move widgets to another area of the theme.](https://cdn-images-1.medium.com/max/600/0*8Z58iIwqmFN1q1qr.png)

That's it, we've done with the widgets.

### Last Words

Customizing these above sections with the Customizer are general and basic steps to customize your website so that it looks like a demo or your imagination. Besides, there are many other different sections for each theme. If you have any difficulty in customization, you should read the documentation or contact the theme author immediately.

Hope this article has helped you to create your own fascinating appearance for your site.