Home > Help Center > Applications > WordPress > WordPress Theme Customizer

WordPress Theme Customizer

WordPress Theme Customization screen (Theme Customizer) allows site admins to tweak a theme's settings, color scheme or widgets, and see a preview of those changes in real-time.

In this article, we'll show you how to use WordPress Theme Customizer and we are going to tweak our active theme twentyeleven (wordpress.org/themes/twentyeleven/).

All customizations are defined by the theme and you can tweak settings only within these pre-defined options especially those connected with theme layout.

For example, if you want to completely remove the header image or to add one more footer widget you need to modify the corresponding theme template files – you cannot achieve such changes through customization.

Theme Customization screen can be accessed from administration panel by clicking Appearance > Customize:

Customize link in the dashboard

or if you are logged in and admin toolbar is visible by clicking Customize link:

Customize link in the admin toolbar

On your left-hand side is the customization menu from where you can access each customizable site element, in the right pane you'll see a live preview of all changes you made. These changes are applied but not saved until you click Save & Publish button.

Create a full backup of your site before start tweaking – you do not want to save any test values by accident. We also strongly recommend to create a child theme of your main theme and test anything only on the active child theme. If anything goes wrong just create a new child theme and start again clean.

Main customization menu

Site Identity

On this screen you can change the title and tagline:

Edit site's title and tagline

If you uncheck the box Display Site Title and Tagline and click Home link to refresh the preview, the header image will touch the top edge of the screen and the search bar will get moved within the menu bar:

Hide site's title and tagline

From the Site Icon area you can set the site Favicon - read how to add a favicon to your WordPress site.

Click on the arrow link area to return to the main customizer menu:

Return to the main customization menu

Colors

You can use the color picker to select new colors or you can paste your own pre-defined color. A very useful option is saving and restoring the default color with a button click:

Customizing colors menu

By selecting Color Scheme radio button you choose between light and dark body background:

Toggle color scheme

Layout

Change the placement of your sidebar by selecting the appropriate radio button:

Select sidebar on the left

Select no sidebar

Header Image

Twentyeleven theme comes with pre-defined randomly loading header images. If you want your site to load only one header image and to disable the random effect just select the image thus making it default:

Select the default header image

To restore the random effect click Hide image. To upload new header image click Add new image:

Add new header image

Upload and select the new image from the Media Library:

Selected image in the Media Library

Click Select and Crop, adjust the selected area and click Crop Image:

Adjust the image size

Here is your new header image:

The new header image

If you want to delete the image, hover over it and click X square.

Remove a header image

You can add more images, the selected one will be the default image. If you click on Randomize uploaded headers the newly uploaded images will randomly load on each page refresh (it does not mean your site will load new header image on every refresh, it means the images will not follow any loading pattern):

Randomize multiple header images

Background Images

You can replace the current background with a pattern background. Select the pattern image file from Media Library and select the option Repeat Background Image:

Select a pattern image to repeat in the background

The new tiled background

You can also set a fading background but keep in mind these images are huge in size and can significantly slow your page. Uncheck both boxes and from the Image Size drop-down menu select Original.

A fading background image

Fit to Screen option will preserve image ratio while Fill Screen option will stretch the image to fill the entire screen.

Different background options in the Preset menu

The options in Preset dropdown menu are similar and give you limited access to other tools, so check Custom and play with all available options until creating the desired background effect.

Select the background image size from the menu

Here you can add links to your menu. Notice that your theme has defined only one menu location – primary:

Menu section in the main menu

Even if you create new menu and add to it different links, this new menu will replace the existing primary menu.

The newly created menu

The new menu will use the primary menu location

Use this tool only to change menu links. If you need more menus these must be created first in the theme template (functions.php) files and then they will be available for customization in Menus screen.

Widgets

You can manage widgets but only in the theme defined widget areas. We'll replace the second text widget in the footer area with calendar widget:

Customizing Widgets section

Click on Widget name to expand it and click Remove link. Next click Add a Widget and select Calendar as it is shown below:

Curent footer preview

Selecting the calendar widget

The changed footer preview

Static Front Page

You can set any static page to be a home page:

Select your homepage

and any other page to display your blog posts:

Select how to display the blog posts

For more details read our article WordPress Static Front Page.

Additional CSS

Here you can overwrite some CSS properties – in the example, we'll replace the color of the Static page <h1> heading:

Changing the heading color

If you wonder how we know what the proper CSS selectors are, right-click on the heading, select Inspect Element and you'll see the corresponding HTML code. Now we can style the element the way we like by overwriting the color property in themes' stylesheet style.css:

CSS class selectors

Now it is the time to decide to keep all customizations or to cancel it. To save changes – click Save & Publish. Be careful because there is no undo and unless you have a backup the changes will be saved permanently.

Save & Publish button

To cancel click the X icon area and confirm your choice by clicking Leave:

Click Leave to cancel the customizations

Summary

Do not rush with your customizations. We can recommend you to customize different properties and make a lot of screenshots. Then cancel the customizations and slowly go over the screenshots to select the good ones.

Still not finding what you're looking for?

Contact our support team with any additional questions or concerns.

Contact support