The WordPress Customizer

The WordPress Customizer is a relatively new feature of WordPress.

It's a panel that allows WYSIWYG changes to be made to the theme's style, as well as some website content such as menus and widgets.

3rd party theme makers have been strongly encouraged to make use of the Customizer framework as a way of providing website controls to users. The Beaver Builder Theme is one such theme.

Test Drive the Customizer

Feel free to launch the Customizer now, however taking a backup of the database is strongly recommended at this point if you're concerned about making changes that you will not be able to restore.
[collapse title="Log in" active="false"]

Firstly, do you need to log in?

Usually you can tell by going to your website and looking at the top of the screen.

Do you see a black bar at the top?

It's called the admin bar and it looks like this:

Tip: If needed you can click the website name (The Manual in the example above), and it will toggle you between the front end and the WordPress dashboard.. if needed. We can largely avoid the WordPress dashboard.

If you see the black admin bar, then you're logged in.

If not, then proceed.

Ok, log in

Just add


to your URL.

To clarify, that's the root URL of your site.


Assuming of course that your website is which it definitely isn't.

In some cases WordPress could be installed in a subdirectory,
in which case the root URL would be:

Assuming of course that the subdirectory is "mywebsitefolder" which I seriously doubt.

When you log in, it's best to click "Remember Me" if you intend to come back.

If you're using Google Chrome web browser, also save the password when prompted.

If you forget your password, just click "Lost your password?".

You can then reset your password via email confirmation.

[/collapse][collapse title="Open the Customizer" active="false"]

If on the front of the website, click Customize in the Admin bar.

If in the Dashboard, go to Appearance > Customize.

The Customizer will open as a sidebar on the left.


[collapse title="Change the Customizer settings" active="false"]

  1. Make changes by selecting the relevant section in the settings panel. They will be reflected live in real time on the website.
  2. When done with a settings section, use the back button to return to the menu.
  3. You can get an idea of how the site will look on different device sizes with the buttons at the bottom.
  4. Click Save when done.
  5. Close the Customizer (X, top left)


[panel type="danger" heading="If a customizer setting is having no effect"] Note: if you find that a customizer setting is having no effect, then it's very likely it's a part of the theme that I had to override the setting for.

More info on why that happens

The Customizer works by storing your preferences in the database. When someone visits your website, in order to render a page WordPress checks your setting in the database, then generates a CSS style which it adds to the stylesheet.The web page's HTML code references the CSS to display the page. Occasionally I'll have no choice but to override a style that the Customizer has set in order to achieve something required by the mockups.



Share this article: