WordPress Theme Customizer

How To Use The WordPress Theme Customizer

How To Edit Your WordPress Theme Using The WordPress Theme CustomizerIn 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.

WordPress menu: Appearance - Customize
WordPress menu: Appearance – Customize

This will bring up the WordPress Theme Customizer screen.

The WordPress Theme Customizer screen.
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
WordPress Theme Customizer
WordPress Theme Customizer

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.

WordPress Theme Customizer: Theme options menu and live preview screen.
The WordPress Theme Customizer lets you customize and preview changes to your theme in real-time.

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.

Theme Customizer Navigation Arrows.
Click on the Theme Customizer navigation arrows to go deeper into the menus or go back to previous sections.

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.

Click to edit WordPress theme elements
Click the edit icons to change WordPress theme elements.

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.

Edit WordPress theme elements in live preview mode.
Edit WordPress theme elements 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.

View live WordPress Theme edits in the Customizer.
View live WordPress Theme edits in the Customizer.

When you are happy with the changes you have made to your theme, click the ‘Publish’ button to save and update your theme settings.

Publish your theme changes.
Publish your theme changes.

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.

Click the gear icon to access additional theme publishing settings.
Click the gear icon to access additional theme publishing settings.

This will bring up additional Theme Customizer options.

Additional Theme Customizer options.
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)
Publish your theme changes live, as a draft, or schedule for later.
Publish your theme changes live, as a draft, or schedule for later.

To exit the WordPress Theme Customizer click on the ‘X’ button.

Exit WordPress Theme Customizer.
Exit the WordPress Theme Customizer.

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.

WordPress Theme Customizer 'exit without saving' prompt.
Make sure you save before exiting the Theme Customizer if you want to keep the changes you have made.

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 Autosave notice.
WordPress Autosave notice.

WordPress Theme Customizer – Menus

WordPress Theme Customizer Menu.
WordPress Theme Customizer Menu.

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.

WordPress Theme Customizer menu - Active theme section.
WordPress Theme Customizer menu – Active theme section.

In the ‘Themes’ section, you can select a different theme from the selection of themes you have currently installed on your site.

WordPress Theme Customizer - Active Themes tab.
Select a new WordPress theme from your installed themes library.

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.
WordPress Theme Customizer - Search & preview themes feature.
Search & preview new WordPress themes inside your Theme Customizer.

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.

Installed themes - Live Preview
Click on Live Preview to preview the theme.

WordPress will display a live preview of the new theme on your Customizer screen. Click on ‘Activate & Publish’ to activate and switch themes.

Click Activate & Publish to change your active WordPress theme.
Click Activate & Publish to change your active WordPress theme.

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’.

Install & Preview new WordPress themes.
Install & Preview new WordPress themes.

The new theme will be installed and display in the Theme Customizer’s ‘Live Preview’ screen.

WordPress Theme switching - live preview.
WordPress Theme switching – live preview.

Click on ‘Activate & Publish’ to activate and switch themes.

Click 'Activate & Publish' to change themes.
Click ‘Activate & Publish’ to change themes.

{Info|Important|Important Info|Useful {Information|Info}}

Installing new themes can add new items to the WordPress Theme Customizer menu.

Different WordPress themes can add new items to the Theme Customizer menu.
Different WordPress themes can add new items to the Theme Customizer menu.

New Theme Customizer menu items will often add their own options and settings.

WordPress Theme Customizer - Custom theme settings and options.
Different themes will add custom options and settings to the Theme Customizer.

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).

Click the arrows to navigate the Theme Customizer's screens.
Click the arrows to navigate the Theme Customizer’s screens.

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.

Click on the arrow to exit a Theme Customizer section.
Click the arrow to exit a Theme Customizer section and return to the previous section.

{Tip|Useful Tip|Practical Tip}

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.

WordPress Theme Customizer - Site Identity
Click the arrow to expand the Site Identity menu.

This section lets you customize elements of your site like the logo, site title, tagline, and site icon.

WordPress Theme Customizer - Site identity options.
Edit these Site Identity options.

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 - Colors
Some themes offer many 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.

WordPress Theme Customizer -Customize Header and Background images.
You can customize your Header and Background images too!

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.

WordPress Theme Customizer - Header Image section.
Select a current header image for your site’s theme.

You can add multiple header images to your site and rotate these randomly using the Randomize uploaded headers feature.

WordPress Theme Customizer - Randomize uploaded header images feature.
Use the Randomize uploaded header images feature to rotate header images on your site’s theme.

Your header images will then rotate randomly as visitors click through to visit other pages on your site.

Rotate images randomly in your theme header
Add rotating website headers via the Theme Customizer.

To learn more about adding and using images, see the tutorials below:

WordPress Theme Customizer Menu – Custom Menus

To edit your WordPress theme’s custom menus in the Theme Customizer, click on the ‘Menus’ section.

WordPress Theme Customizer - Menus
Click the arrow to expand the Menus menu.

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.

WordPress Theme Customizer - Menus section
Configure and edit your menus.

Expand a menu to edit its options and settings.

WordPress Theme Customizer - Menu section.
Edit and configure individual menu options and settings here.

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.

WordPress Theme Customizer - Widgets menu.
Click the arrow to expand the Widgets menu.

The widgets displayed in this section will depend on the currently active theme installed on your site.

WordPress Theme Customizer - Widgets section.
The Theme customizer lets you access all the widgets available in your theme.

Click on the main widget location panels to access, edit, and configure your widgets.

WordPress Theme Customizer- Widget Menu
The Theme Customizer lets you edit and configure widgets for all the widget panels your theme makes available.

Note: You can also access the widget menus by clicking on the edit buttons in the Live Preview screen section.

WordPress Theme Customizer: Live Preview screen - Edit Theme Widget settings
Click the pencil icons in the widgets section to view your theme’s widget settings in the Live Preview screen.

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.

WordPress Theme Customizer - Homepage Settings menu
Configure your Homepage settings in this section.

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.

WordPress Theme Customizer - Additional CSS menu.
Click the arrow to expand the Additional CSS menu.

This will bring up the ‘Additional CSS’ section.

WordPress Theme Customizer - Additional CSS
Add CSS code to style your WordPress Theme here.

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.

WordPress Theme Customizer - Coding Enhancements.
Scan and fix CSS errors easily in your WordPress theme coding.

{Tip|Useful Tip|Practical Tip}

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.

WordPress Theme customizer - New menu added by plugin.
Plugins can add new menu items to the Theme Customizer.

 Some plugins will not only add new menus, but also a whole range of additional options and settings.

WordPress Theme Customizer - Plugin Settings
Some plugins will add new menus, options, and settings to the Theme Customizer.

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.

Live Preview Display Section
View how the changes you make to your theme will display on different screen sizes.

By default, live previews display your site as seen on a full resolution screen (e.g. a desktop or laptop computer).

Live Preview Display - Full screen.
Live Preview Display – Full screen preview.

You can also see how your site will display on a tablet screen.

Live Preview Display - Tablet screen.
Live Preview Display – Tablet screen preview.

And on the screen of a mobile device.

Live Preview Display - Mobile screen.
Live Preview Display – Mobile screen preview.

Click on the ‘Hide Controls’ button to hide the WordPress Theme Customizer menu.

WordPress Theme Customizer - Hide Controls
Hide the WordPress Theme Customizer screen menu section.

This lets you preview your theme without being distracted by the Customizer menu.

Live Preview screen with Theme Customizer hidden.
Live Preview screen with Theme Customizer hidden.

Congratulations! Now you know how to edit your WordPress theme’s options and settings using the WordPress Theme Customizer.

WordPress Theme Customizer
Edit your WordPress theme’s options and settings using the WordPress Theme Customizer.

***

Print Friendly, PDF & Email

Terms Of Use | Privacy Policy

Scroll to Top