How To Use The WordPress Theme Customizer
In this tutorial, you will learn how to edit your WordPress theme using the WordPress Theme customizer.
We will also explore the options and settings of the WordPress Theme customizer menu.
For additional information, see these related tutorials:
***
As a website owner or user, WordPress Themes provide an incredible choice of professional designs, options, and layouts, as well as the flexibility to customize the theme to create a unique look and feel for your site.
The Theme Customizer is a feature of your WordPress admin area that allows you to edit, tweak, and customize theme settings like your theme’s colors, fonts, text, and almost anything else you want to change, using a visual interface and live preview changes.
How To Edit Your Theme Using The WordPress Theme Customizer
To access the WordPress Theme customizer, log into your WordPress admin, then go to the main menu and select Appearance > Customize.
This will bring up the WordPress Theme Customizer screen.
The WordPress Theme Customizer is divided into three main sections:
- Menus section
- Live Preview Edits Screen section
- Live Preview Display section
We’ll go through each of the above sections below shortly. You will learn how to edit and configure your theme settings and preview your changes before committing these to your live site.
Theme Customizer Menus Section
All the Theme Customizer’s menus are found on the left of the Live Preview screen.
To go deeper into each menu level and expand new options and settings sections, click on the right menu arrows.
To return to previous screens or go back up to higher-level menu sections, click the left arrows.
We’ll explore some of the Theme Customizer’s most common menus in a moment.
WordPress Theme Customizer – Live Preview Edits Screen
The Live Preview Edits screen lets you make, undo, and view all kinds of edits to your theme without modifying your live site.
When you’re ready to apply your changes, you can click the Publish button and all of your edits, tweaks, and customizations will be applied instantly to your theme.
The Live Preview Edits screen also contains clickable buttons for all the editable sections of your theme.
Clicking on an edit button (pencil icon) brings up a menu in the Menus section that lets you edit or configure the theme element in live preview mode.
You can see the changes to options, fields, or settings in the Live Preview Edits screen as you are making these.
When you are happy with the changes you have made to your theme, click the ‘Publish’ button to save and update your theme settings.
The Theme Customizer also gives you the ability to save your theme changes in ‘draft’ mode, schedule changes to publish later, collaborate on theme design improvements with others by sharing design preview links, lock your design to protect it from being changed by other users, and a whole lot more.
To access additional publishing settings, click on the gear icon next to the ‘Publish’ button.
This will bring up additional Theme Customizer options.
Select one of the publishing options from the ‘Action’ section:
- Publish
- Save as a draft
- Schedule
- Discard changes
- Share a preview link (great for collaborating with users that can’t access your site’s Customizer)
To exit the WordPress Theme Customizer click on the ‘X’ button.
Note: If you exit the WordPress Theme Customizer feature without saving your changes, you will be prompted to cancel and save/publish your edits or navigate away from the page and lose your changes.
Sometimes, when exiting the Theme Customizer screen, you may also see a warning from the WordPress Autosave feature asking you to restore the most recent changes you have made to your theme.
WordPress Theme Customizer – Menus
The WordPress Theme Customizer menus section provides editable and configurable options and settings.
The items displayed on this menu depend on the active WordPress theme you are currently using and can include the following sections:
- Default theme configuration options and settings.
- Custom theme options and settings specific to the active WordPress theme you are currently using.
- Additional options and settings from WordPress plugins that you have installed and enabled on your site.
Let’s go through some of the main menu items you will find with almost all installed themes.
WordPress Theme Customizer Menu – Active Theme
The WordPress Theme Customizer is designed to make it easier to edit your currently active theme.
To change your current WordPress theme, click the ‘Change’ button in the ‘Active theme’ section of the WordPress Theme Customizer menu.
In the ‘Themes’ section, you can select a different theme from the selection of themes you have currently installed on your site.
Or, search for new themes in the free WordPress theme directory.
You can search, browse, and preview thousands of WordPress themes without leaving your Theme Customizer screen.
To do this, go to the Themes tab, then:
- Select WordPress.org themes
- Search for themes based on keywords, or
- Click on the ‘Filter themes’ button to speed up and narrow your search for new themes using Subject, Features, and Layout filters.
Changing WordPress Themes – Installed Themes
To change your existing theme to a new theme, make sure the new theme is already installed on your site, and click on the ‘Live Preview’ button.
WordPress will display a live preview of the new theme on your Customizer screen. Click on ‘Activate & Publish’ to activate and switch themes.
Changing WordPress Themes – WordPress.org Themes
If you can’t find a suitable theme for your needs from the themes that are currently installed on your site, browse the WordPress.org free theme repository from the Theme Customizer’s ‘Active theme > WordPress.org themes’ section.
After finding a new theme, click on ‘Install & Preview’.
The new theme will be installed and display in the Theme Customizer’s ‘Live Preview’ screen.
Click on ‘Activate & Publish’ to activate and switch themes.
Installing new themes can add new items to the WordPress Theme Customizer menu.
New Theme Customizer menu items will often add their own options and settings.
Click on the right menu arrows to access deeper (i.e. nested) levels of options and settings for each section or click the left arrows to return to previous screens (higher-level sections).
For example, to exit the ‘Themes’ section (or any Customizer menu section) and return to the previous section (or go up a level), click on the arrow to the left of the menu item.
WordPress themes cannot be deleted or uninstalled from the Customizer section. To delete or uninstall a WordPress theme, go to the Themes section (‘Appearance > Themes’).
To learn more about managing and editing WordPress themes, see this tutorial: How To Edit WordPress Themes
WordPress Theme Customizer Menu – Site Identity
Click on ‘Site Identity’ in the WordPress Theme Customizer menu.
This section lets you customize elements of your site like the logo, site title, tagline, and site icon.
To learn more about configuring settings in this section, see these tutorials:
WordPress Theme Customizer Menu – Colors
Depending on which WordPress theme you have actively installed, there may be a choice of options (or a single option, or no options) for customizing your site’s colors.
WordPress Theme Customizer Menu – Header And Background Image
Depending on which WordPress theme or plugins are installed and activated on your site, you may see different options for customizing your site’s Header and Background images.
If your theme offers this option, then the Header Image section lets you add multiple header images to your site and select one of these images as its current header image.
You can add multiple header images to your site and rotate these randomly using the Randomize uploaded headers feature.
Your header images will then rotate randomly as visitors click through to visit other pages on your site.
To learn more about adding and using images, see the tutorials below:
- How To Use The WordPress Media Library
- How To Add And Format Images In WordPress
- How To Add Custom Header Images To WordPress Posts And Pages
WordPress Theme Customizer Menu – Custom Menus
To edit your WordPress theme’s custom menus in the Theme Customizer, click on the ‘Menus’ section.
The menus displayed in this section are determined by your currently active theme. Some themes offer many custom menus and menu locations, and some themes only offer a few or even just one custom menu option.
Expand a menu to edit its options and settings.
To learn more about using menus in WordPress, see this tutorial: How To Use WordPress Menus
WordPress Theme Customizer Menu – Widgets
To edit your WordPress theme widgets in the Theme Customizer, click on the ‘Widgets’ menu item.
The widgets displayed in this section will depend on the currently active theme installed on your site.
Click on the main widget location panels to access, edit, and configure your widgets.
Note: You can also access the widget menus by clicking on the edit buttons in the Live Preview screen section.
To learn more about using widgets, see this tutorial: WordPress Widgets Explained
WordPress Theme Customizer Menu – Homepage Settings
You can configure your WordPress home page settings from the ‘Homepage Settings’ menu item.
To learn more about configuring settings for your home page, see this tutorial: How To Configure WordPress Reading Settings
WordPress Theme Customizer Menu – Additional CSS
The Theme Customizer lets you view, insert, and edit CSS code to style your theme (note: this requires knowledge of CSS).
To access this section, click on the ‘Additional CSS’ menu section.
This will bring up the ‘Additional CSS’ section.
WordPress offers several coding enhancements, such as Syntax Highlighting and Error Checking, which allows users to scan, pinpoint, and fix CSS editing and coding errors quickly and easily directly from the WordPress Theme Customizer.
Even if you are a non-technical user, this useful feature can help pinpoint issues and alert theme developers about problems with your existing theme.
WordPress Theme Customizer Menu – Plugin Settings
Adding plugins to your website will often also enhance your theme and add new items to the Theme Customizer.
For example, you may find that installing certain plugins on your site will add new menus to your Theme Customizer.
Some plugins will not only add new menus, but also a whole range of additional options and settings.
To learn more about using plugins in WordPress, see this tutorial: WordPress Plugins Explained
WordPress Theme Customizer Menu – Live Preview Display Section
Most WordPress themes are fully responsive, meaning they will resize their layout and elements to display correctly across different browsers and devices.
The WordPress Theme Customizer lets you preview how your site will display on different screen sizes across different devices.
By default, live previews display your site as seen on a full resolution screen (e.g. a desktop or laptop computer).
You can also see how your site will display on a tablet screen.
And on the screen of a mobile device.
Click on the ‘Hide Controls’ button to hide the WordPress Theme Customizer menu.
This lets you preview your theme without being distracted by the Customizer menu.
WordPress Theme Customizer – FAQs
Here are frequently asked questions about the WordPress Theme Customizer:
What is the WordPress Theme Customizer?
The WordPress Theme Customizer is a built-in tool that allows users to customize various aspects of their WordPress theme’s appearance in real-time. It provides a user-friendly interface for making changes to colors, fonts, layouts, and other design elements without needing to know any code.
How do I access the Theme Customizer in WordPress?
You can access the Theme Customizer by navigating to “Appearance” > “Customize” in your WordPress dashboard. This will open the Customizer panel, where you can see a live preview of your website and make adjustments.
What can I customize using the WordPress Theme Customizer?
With the Theme Customizer, you can customize a wide range of elements, including site identity (logo, site title, tagline), colors, background images, header and footer layouts, menus, widgets, and more.
Can I preview changes before applying them with the Theme Customizer?
Yes, one of the primary features of the Theme Customizer is the ability to preview changes in real-time. As you make adjustments, you can see how they affect your website immediately without needing to save or publish the changes.
Are changes made in the Theme Customizer permanent?
Changes made in the Theme Customizer are not permanent until you save and publish them. You can experiment with different settings and configurations until you’re satisfied with the result, at which point you can click the “Save & Publish” button to make the changes live.
Is the Theme Customizer available for all WordPress themes?
Most modern WordPress themes support the Theme Customizer. However, the level of customization options available may vary depending on the theme. Some themes offer extensive customization options, while others may provide more limited settings.
Can I add additional settings to the Theme Customizer?
Yes, developers can extend the functionality of the Theme Customizer by adding custom settings and controls using the WordPress Customizer API. This allows for the creation of custom panels, sections, controls, and live preview updates for specific theme features.
What should I do if I encounter issues with the Theme Customizer?
If you encounter issues with the Theme Customizer, such as it not loading properly or certain settings not working as expected, you can troubleshoot by checking for plugin conflicts, ensuring your WordPress installation is up to date, and contacting theme support or seeking assistance from the WordPress community.
***
Congratulations! Now you know how to edit your WordPress theme’s options and settings using the WordPress Theme Customizer.
***
Updated: July 5th, 2024