An introduction to the Customizer

To help you customize your website, the WordPress Customizer is available with a variety of settings and options that are located within panels that you click on.

Accessing the Customizer

There are a few methods of accessing the customizer, but the one that is accessible the most is from the side column in the Admin area under the “Appearance” menu group. However, we will outline all the accesible locations below:

Appearance >> Customize

Go to Customize

Dashboard Home

Dashboard home customize button

The Admin Bar on the Front-End

Admin Bar Customize button

Appearance >> Themes >> active theme

Theme Thumbnail customize button

Appearance >> Themes >> Theme Details

Theme Details Customize button

Default Setting Panels

There are a set of panels that are standard with every WordPress installation:

  • Site Identity
  • Header Image
  • Background Image
  • Menus
  • Widgets
  • Static Front Page
  • Additional CSS

If you see other panels included, they will be part of the theme you are using. Themes will offer additional options for your website and will show up along side with the default panels.

Types of Settings

There are a wide range of settings that can be made available to you, many of which are based on the theme that you use. Generally, you will see the following types of settings:

  • Text Fields
  • Checkboxes
  • Radio Buttons
  • Range Sliders
  • Select Lists
  • Text Areas
  • Colour Selectors
  • Image Uploader

Most settings are associated with basic form elements, so you will be able to recognize many of them. There may also be some custom options added that are specific to a theme.

Colour Selectors

Currently, WordPress only has one type of colour selector that uses HEX colour values. People are still waiting for the implementation of an RGBA colour selector because it would offer a transparency setting too.

Most themes will offer colour selectors to let you customize various elements within your website. Using a selector is quite easy because all you do is drag around a circular cursor and a slider bar to adjust the saturation level of a colour. In our screenshot below, you will see the HEX value #bad631 of the green currently selected.

Colour Selector

Error: Please enter a valid email address

Error: Invalid email

Error: Please enter your first name

Error: Please enter your last name

Error: Please enter a username

Error: Please enter a password

Error: Please confirm your password

Error: Password and password confirmation do not match