WordPress themes provide non-techie website owners not only with an incredible choice of professional web design options and layouts but also great versatility and the ability to further customize the theme and create a unique look and feel for their sites.
In this step-by-step guide for non-techies, we’ll look at how to edit your WordPress theme using the WordPress Theme customizer and explore the options and settings of the WordPress Theme customizer menu.
How To Edit Your WordPress Theme Using The WordPress Theme Customizer
To access the WordPress Theme customizer, log into WordPress, then go to the main menu and select Appearance > Customize …
(WordPress menu: Appearance > Customize)
This brings up the WordPress Theme Customizer screen …
(WordPress Theme Customizer screen)
The WordPress Theme Customizer screen allows you to edit and configure your theme settings and preview changes live before committing these to your site …
(WordPress Theme Customizer: Theme options menu and live preview screen)
WordPress Theme Customizer – Live Preview Feature
The Live Preview area of the screen contains clickable edit buttons …
(Click to edit WordPress theme elements)
Clicking on the edit buttons brings up relevant sections of the Customizer menu and allows you to change theme elements on the fly …
(Edit WordPress theme elements in live preview mode)
As you make changes to options, fields, or settings, WordPress displays these in the Live Preview section …
(View live WordPress Theme edits in the Customizer)
Once you are happy with the changes you have made to your theme, click the ‘Publish’ button to save these and update your theme settings …
(Publish your theme changes)
In version 4.9, WordPress introduced a number of changes to improve Theme Customizer workflow, such as the ability to save your theme changes in ‘draft’ mode, schedule your theme changes for publishing at a later date, collaborate on theme design improvements with others by sharing design preview links, locking your design to protect it from being changed by other users, and more.
To access these additional publishing settings, click on the gear icon next to the ‘Publish’ button …
(Click the gear icon to access additional theme publishing settings)
This brings up additional Theme Customizer options …
(Additional Theme Customizer options)
Select one of the publishing options from the ‘Action’ section to save your changes …
(Publish your theme changes live, as a draft, or schedule for later)
To exit the WordPress Theme Customizer feature, click on the ‘X’ button …
(Exit 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)
Sometimes, when exiting the Theme Customizer screen, you may also see a warning from the WordPress Autosave feature asking you to restore your most recent changes …
(WordPress Autosave notice)
WordPress Theme Customizer Menu
(WordPress Theme Customizer Menu)
The WordPress Theme Customizer menu provides a number of editable options and settings. The items you will see on the menu depend on the WordPress theme you have installed on your site and can include the following:
- Default theme configuration options and settings
- Custom theme options and settings specific to the active WordPress theme you are currently using
- Options and settings from active WordPress plugins that you have installed on your site, which affect you current theme.
Let’s go through these menu items …
WordPress Theme Customizer Menu – 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)
From the ‘Themes’ section, you can select a different theme from the themes you have currently installed on your site …
(Select a new theme from your installed WordPress themes)
Or search for new themes from the WordPress theme repository …
(Search & Preview WordPress Themes From The Theme Customizer)
You can search, browse, and preview thousands on WordPress themes from from your Theme Customizer screen before deploying changes to your site and speed up the search for new themes with filters for subject, features, and layout.
Changing WordPress Themes – Installed Themes
To change your existing theme to a new theme that you have already installed on your site, click on ‘Live Preview’ …
(Installed themes – Live Preview)
WordPress will display a live preview of the new theme in your Customizer screen. Click on ‘Activate & Publish’ to activate and switch themes …
(Click ‘Activate & Publish’ to change your active WordPress theme)
Changing WordPress Themes – WordPress.org Themes
If you can’t find a new theme from the themes you have currently installed on your site, you can 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)
The new theme will be installed and display in the Theme Customizer’s ‘Live Preview’ screen …
(WordPress Theme switching – live preview)
Click on ‘Activate & Publish’ to activate and switch themes …
(Click ‘Activate & Publish’ to change themes)
As mentioned earlier, installing new themes can add new items to the WordPress Theme Customizer menu …
(New WordPress themes can add new items to the Customizer menu)
New Theme Customizer menu items often add new configurable theme options and settings to the feature …
(WordPress Theme Customizer menu items add new theme options and settings)
To exit the ‘Themes’ section (or any Customizer menu section), click on the arrow to the left of the menu item …
(Click on the arrow to exit a Customizer section)
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 the tutorial below:
WordPress Theme Customizer Menu – Site Identity
Click on ‘Site Identity’ in the WordPress Theme Customizer menu …
(WordPress Theme Customizer – Site Identity)
This section lets you customize elements of your site like the logo, site title, tagline, and site icon …
(WordPress site identity options)
To learn more about configuring settings in this section, see the following tutorials:
WordPress Theme Customizer Menu – Colors
Depending on the WordPress theme installed on your site, you can have a choice of options (or a single option, or no options) for customizing your site’s colors …
(WordPress Theme Customizer – Colors)
WordPress Theme Customizer Menu – Header And Background Image
Depending on the WordPress theme or plugins installed on your site, you may see different options for customizing your site’s Header and Background image …
(Customize WordPress Header and Background images)
The Header Image section lets you add multiple header images to your WordPress site and select one of these as the current header image …
(Make a header image the current header for your site)
You can also add multiple header images to your site and rotate these randomly using the Randomize uploaded headers feature …
(Randomize uploaded header images)
Your header images will then rotate randomly as visitors click through to other pages on your site …
(Rotate images randomly in your theme header)
To learn more about adding and using images in this section, 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 – Menus
To edit your WordPress theme menus in the Theme Customizer, click on the ‘Menus’ section …
(WordPress Theme Customizer – Menus)
The menus you will see displayed in this section depend on your currently active theme …
(Customize your WordPress menus)
To learn more about using menus in WordPress, see the tutorial below:
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)
The widgets displayed in this section will depend on your currently active theme …
(Customize your WordPress widgets in the Theme Customizer)
You can also access the widget section by clicking on the edit buttons in the Live Preview screen …
(Edit your theme widget settings in the WordPress Live Preview screen)
To learn more about using widgets, see the tutorials below:
- How To Use And Configure WordPress Widgets – Part 1
- How To Use And Configure WordPress Widgets – Part 2
- How To Use And Configure WordPress Widgets – Part 3
- How To Use And Configure WordPress Widgets – Part 4
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)
To learn more about WordPress home page settings, see the tutorial below:
WordPress Theme Customizer Menu – Additional CSS
You can view and edit some of your WordPress theme’s CSS code by clicking on the ‘Additional CSS’ menu section …
(WordPress Theme Customizer – Additional CSS)
This brings up the ‘Additional CSS’ section …
(Edit your WordPress Theme CSS)
In WordPress 4.9, several coding enhancements were introduced, such as Syntax Highlighting and Error Checking, which allows users to scan, pinpoint, and fix CSS editing and coding errors quickly and easily from the WordPress Theme Customizer …
(Scan and fix CSS errors easily in your WordPress theme coding)
Even if you are a non-technical WordPress user, this feature can help you pinpoint issues and alert theme developers about problems with your existing theme.
WordPress Theme Customizer Menu – Plugin Settings
Adding plugins to your website can affect your WordPress theme. Depending on the plugins you have installed (e.g. Yoast SEO), you may find new options and settings added to your Theme Customizer menu …
(WordPress Theme Customizer – Plugin Settings)
Adding certain plugins (e.g. Jetpack) can also add new items to the Customizer’s menu …
(Plugins can add items to the customizer menu)
To learn more about using plugins in WordPress, see the tutorials below:
WordPress Theme Customizer Menu – Live Preview Display Options
Most WordPress themes are fully responsive. The WordPress Live Preview feature in the WordPress Theme Customizer lets you see how your site will display in different devices and viewing platforms …
(Live Preview Display Options Menu)
By default, live previews display your site as seen on a full resolution screen (e.g. a desktop or laptop computer) …
(Live Preview – Full Screen Display)
You can also see how your site will display on a tablet screen …
(Live Preview – Tablet Screen Display)
And on a mobile device screen …
(Live Preview – Mobile Screen Display)
Click on the ‘Hide Controls’ button to hide the WordPress Theme Customizer menu …
(WordPress Theme Customizer – Hide Controls)
This lets you preview your theme without being distracted by the Customizer menu …
(Live Preview With Theme Customizer Hidden)
Congratulations! Now you know how to edit your WordPress theme using the WordPress theme Customizer feature.
***
"If you're new to WordPress, this can stand on its own as a training course and will stay with you as you progress from beginner to advanced and even guru status." - Bruce (Columbus, Ohio)
***