WordPress Theme Customizer
Table of content
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:
or if you are logged in and admin toolbar is visible by clicking Customize link:
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.
On this screen you can change the 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:
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:
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:
By selecting Color Scheme radio button you choose between light and dark body background:
Change the placement of your sidebar by selecting the appropriate radio button:
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:
To restore the random effect click Hide image. To upload new header image click Add new image:
Upload and select the new image from the Media Library:
Click Select and Crop, adjust the selected area and click Crop Image:
Here is your new header image:
If you want to delete the image, hover over it and click X square.
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):
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:
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.
Fit to Screen option will preserve image ratio while Fill Screen option will stretch the image to fill the entire screen.
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.
Here you can add links to your menu. Notice that your theme has defined only one menu location – primary:
Even if you create new menu and add to it different links, this new menu will replace the existing primary menu.
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.
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:
Click on Widget name to expand it and click Remove link. Next click Add a Widget and select Calendar as it is shown below:
Static Front Page
You can set any static page to be a home page:
and any other page to display your blog posts:
For more details read our article WordPress Static Front Page.
Here you can overwrite some CSS properties – in the example, we'll replace the color of the Static page
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
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.
To cancel click the X icon area and confirm your choice by clicking Leave:
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.