The Ultimate Guide to The WordPress Customizer

Introduction

Back in June 2012, update 3.4 “Green” made a significant advancement in the WordPress core code adding the Customize option in the Appearance menu.

How to navigate to the WordPress Customizer

By that time, the feature was mostly bypassed by both users and developers. That was so until the WordPress update 4.5 turned the Customizer into a powerful WYSIWYG interface.

The Customizer has certain mandatory sections containing some of the theme settings; however, it has been developed to allow developers to customize and extend these options.This means that the appearance of the Customizer may vary in different themes.

 If you are a beginner level user, let this be of no worry to you; the general principles of using the Customizer are the same.

Sinatra Pro theme offers more options for customization settings than other free themes.

What is The WordPress Customizer?

The WordPressCustomizer is a page within the WordPress admin area that enables a user to personalize their WordPress theme. The Customizer allows users to review the results of the Customizer’s adjustments before publishing them first.

How to Access the WordPress Customizer

Benefits of Using The Customizer

  • The Customizer replaces various complicated option pages with one manageable interface.
  • Its Live Preview feature saves users from the tedious process of going back and forth between the dashboard and the public-facing side of the website.
  • The Live Preview feature also made it possible to avoid publishing of potential mistakes; which, otherwise, would have already been visible to the visitors of the website.
  • Changes made in the Customizer are preserved after theme updates.
  • Eventually, the Customizer can speed up the development process.

General Customizer Settings

Themes and plugins can register new sections in the customizer; however, below is a list of generally found ones:

  • Site Identity
  • Header Media (or Header image)
  • Menus
  • Widgets, if the theme you are using supports widgetized areas
  • Homepage Settings
  • Colors
  • Custom CSS

How to Access the Customizer

First Option: Navigating via the WordPress Dashboard to Appearance » Customize leads directly to the Customizer’s interface.

Second Option: It is possible to access the Customizer from any page or post on your website. To do so, just go to the action bar in the top-left corner of the screen and click Customize.

Third Option: To access the Customizer from the WordPress Dashboard, go to Appearance » Themes and click on the Customize button in the active theme.

The Customizer Interface

The Customizer interface consists of the Customizer pane on the left and the Preview window on the right side of the screen. The Customizer pane has a section containing Theme Settings a user can modify. The Preview window on the right side instantly displays changes a user makes in the Customizer pane. It is not necessary to publish the changes in order to preview them.

The bottom of the Customizer pane contains a Hide Control button on the left side, which allows hiding the pane to get a full-width preview, and a Device Preview button on the right side that simulates what the website looks on different devices, i.e. desktop, tablet and smartphone.

Edit Shortcuts in the Customizer Preview 

Further improvements in the Customizer’s UI implemented visible shortcuts in the Preview window that are linked to the corresponding settings in the Customizer’s pane.

How to Use the Customizer?

In this guide, we will use the Sinatra theme that excellently utilizes the possibilities of the Customizer. Though in the guide we will only cover general features, more resources on custom settings specific to the Sinatra theme are covered in Sinatra documentation.

Once they have entered the Customizer, the first thing a user will see in the Customize pane is the Active Theme field displaying the name of the currently customised theme.

Switching Themes

The Customizer enables the users to preview the website’s content with different themes, without actually switching off the currently active theme. To do so,

  1. In the Active Theme section simply click on the Change button.
  2. To select a theme to preview, choose between installed themes or any theme from the WordPress.org repository.
  3. Click on the Live Preview button in the theme you are considering to switch to.

It is even possible to adjust the rest of its settings and see how those adjustments reflect on different pages, before deciding to keep the adjustments and the theme (by clicking on Activate and Publish) or to simply discard them (by clicking on theX icon).

How to Apply Your Changes

To apply the changes made in the customize pane to the live website simply click on the Publish button in the top right corner of the Customizer pane.

Schedule Changes to Apply Later

It is possible to schedule changes made in the Customizer to be applied at a later date. To do so:

  1. Click on the Gear icon next to the Publish button.
  2. Select Schedule radio button,
  3. Select Date from the Calendar fields.
  4. Click on the Schedule button in the top right corner of the Customizer pane.

Save Change as Draft

It is possible to save changes made in the Customizer as draft. To do so:

  1. Click on the Gear icon next to the Publish button,
  2. Select Save Draft radio button.
  3. Again, click on the Save Draft button, but this time in the top right corner of the Customizer pane.

Although the changes are scheduled to apply later or saved as a draft, it is still possible to preview what it would look like if they were live or to share a link with people who cannot access the Customizer to have a preview.

Only published changes will appear on the live website.

Site Identity 

The Site identity allows a user to add basic website information, such as logo, site title, tagline and site icon.

A Logo is a graphical representation of your website identity, an image such as a corporate symbol. To add a logo via the Customizer:

  1. Click on the Site Identity section. The section will expand and reveal a list of available settings.
  2. Under the Logo label, click on the Select Logo button.
  3. Use Media Manager to upload your logo; or if it has already been uploaded, select it from Media Library. At this point, you should be able to see your logo in the Preview window.
  4. Click Publish to apply changes on your live site.

How to Add a Site Title

The Site Title is practically your website’s name. This is a custom name and it can differ from the URL or your username. For example, it can be a more intuitive version of your URL (e.g. www.sinatrawp.com can become Sinatra WordPress Theme, or you can change it to something that best fits your website. To add a Site Title  via the Customizer:

  1. Click on the Site Identity section. The section will open up and reveal a list of available settings.
  2. Under the Site Title label, use the text field to type in the title of your website.
  3. Click Publish to apply changes on your live site.

How to Add a Tagline

The Tagline is a brief description or an advertising slogan, a sentence that describes what your website is about. To add a Tagline from the Customizer:

  1. Click on the Site Identity section. The section will open up and reveal a list of available settings.
  2. Under the Tagline label, use the text field to type in the tagline for your website.
  3. Click Publish to apply changes on your live site.

How to Show/Hide Site Title and Tagline?

The site title and tagline are generally displayed under the logo. It is possible to hide them in the following way:

  1. Navigate via the Customizer to the Site Identity section. The section will open up and reveal a list of available settings.
  2. Check/uncheck the Display Site Title and Tagline check-boxes to show or hide your website title and tagline that appear next to your logo.
  3. Publish to apply changes to the live site.

How to Set up a Site Icon?

One additional thing you can personalize in the Site Identity section is a Site Icon. These graphics are used as icons that appear in your visitor’s browser tab, as bookmark icons, or within the WordPress mobile apps. Site icons are squared images, at least 512px in width and 512px in height.

  1. Navigate via the Customizer to the Site Identity section. The section will open up and reveal a list of available settings.
  2. Under the Site Icon section click on the Select Image button.
  3. Use Media Manager to upload your site icon; or if it has already been uploaded, select it from Media Library. At this point, you should be able to see your logo in the Preview window.
  4. Publish to apply changes to the live site.

How to Change Colors

Colors have a great impact on the overall website appearance, and it is possible to change your entire theme’s color palette with few clicks. To access these settings, simply navigate via the Customizer menu to the Color section.

It is possible to choose a color by adding its hex code or via the color picker tool.

How to Manage Menus

Fast preview for menu changes is one of the major benefits of managing your menus via the Customizer. To access this feature via the Customizer, follow the steps below:

  1. Click on the Menus section.
  2. If your theme already has a menu that you wish to use, you can click on it to begin editing.
  3. If your theme does not have a menu, click on the Create New Menu button instead.
    1. Type in a name for your menu, and then click Create Menu.
    2. Choose where you want this menu to appear.
    3. Click on the Next button to start adding items. Add as many items as you wish.
    4. Publish to apply changes on the live site.

How to Add Menu Items

Along with the pages you have already published, it is possible to add a several more different menu items:

  • Page – link to a page on your site
  • Custom links – any URL link
  • Categories – shows a feed of blog posts from a given category
  • Tags – shows a feed of blog posts with a given tag
  • Posts – links directly to a particular blog post

How to Add a Blank Page

If you wish to add a brand new page to your menu, follow the steps below:

  • Click on the Menu section.
  • In the area that opens up, select the existing menu to edit or create a new one.
  • Click on the +Add Items button; it will reveal available settings.
  • Under the Page label, in the text field with the Add New Page placeholder, enter the name for the page you want to create and click on the +Add button.
  • Publish to apply on the live site.

How to Add Submenu Items

Click on the Reorder link and use left right arrows to add or remove an item from the submenu/dropdown menu. You can also use the Drag-and-Drop feature in the same way as in the menu section from the admin panel; that is, drag and drop a menu item to the right, so it indents beneath the main menu item below which you want it to appear.

You can Shift-click on navigation menu items in the Preview screen to open the corresponding controls in the Customizer pane.

The location of the menu may vary depending on the theme you are using. In addition to the existing menus, there may be some other types, such as the Social Links Menu.

If you want to set your menu as your website’s main navigation, choose the Primary Menu (often called Header or Top).

On the contrary, the Bottom or Footer menu is navigation located at the bottom of the pages.

If the theme you are using offers a Social Links Menu, it will automatically convert menu items to the corresponding icons for popular social media profiles.

How to Delete Menu Items

Clicking on the menu item you want to delete will reveal the Remove link. Click on the link to remove that menu item.

Rename a Menu Item

By editing the navigation label in the menu settings, you can change the name of the menu item that appears on your website navigation.

To create an unclickable parent tab, use the custom link menu item with a hash sign in the URL field.

How to Use Widgets

In the WordPress, a user can assign a widget to the widget-ready areas. The availability of the widget-ready areas varies from theme to theme. Usually, these areas are sidebars, footers, headers, etc.

To access the widget customize screen:

  1. Click Widget Menu in the the Customizer. If the currently active theme supports widgetized areas, you should have at least one widget area listed.
  2. Select the widget area you want to modify.
  3. Click on the +Add a Widget button. It shows a list of available widgets.
  4. Select a widget you want to add to this area.
    • To adjust the widget settings, click on the down arrow in the right to expand the interface.
    • To save the widget’s settings, click on the Done link; or to remove the widget, click on the Delete link.
    • You may add as many widgets as you like.
    • Publish changes to apply them to the live website.

Using Drag-and-Drop you can rearrange the widgets in the area. You may use Rearrange link instead of Drag-and-Drop as well. 

Widget areas are not mandatory for the WordPress themes. If you do not see the widget menu in the Customizer, it means that your theme does not support widget areas.

Homepage Settings

You can choose what is displayed on the homepage of your website. It can be a feed of blog posts or a static page. To do so:

  1. Select the Homepage Settings menu from the Customizer.
  2. Select a Radio button to choose between a blog homepage or a static page (a page that you have created and published previously).

Additional CSS

You can add your own CSS code to customize the appearance and layout of your website.Simply click on the Additional CSSmenu from the Customizer to access the CSS editing area.