Customizer Introduction

This article was last updated on the December 21, 2016.

The WordPress customizer is a frontend interface, that allows you to make edit to your website and preview them live. What you can edit will be dependent on the theme you are using. X out of the box includes multiple customizer options, that we’ll explore in our other customizer articles here.

Exploring The Customizer

Before we start with exploring the Customizer, we’ll first of course need to open it up, there is a couple of ways of doing this.

  • Via your WordPress admin (wp-admin) > Appearance > Customize
  • Via the frontend of your WordPress powered website, in the admin bar you should see a Customize link

Customize admin link

Customize Link

Clicking on either of the above options, will load the WordPress Customizer, once the customizer has loaded, you should see a screen like this:

customizer area

On the left is the Customizer itself, this is where you select the options to customize and make any customizations. On the right is the preview area. This is a preview area of the page you are on/your website as a whole.

Some Customizer options are global (i.e, change the same setting across every post/page on the website). Others are page or page template specific, for example, you might edit a customizer setting that only effects WooCommerce pages or the blog/archive page.

Let’s just change a setting to see how the customizer works, we’ll cover all other aspects of the customizer in additional articles which we’ll link to at the end of this article.

Click on Layout and Design

Layout and Design

And under Content Layout select Fullwidth, the customizer will update instantly so you can see your change.

So before we selected FullWidth, our site looked like this:

Not FullWidth

Now we’ve changed the site to FullWidth, you should see something like this:

Full Width page

That means in just a few clicks, we’ve easily changed the whole appearance of our website, using the customizer.

Conclusion

As you can see the Customizer allows you to easily edit a varity of options all of which we have covered in our Customizer articles which can be accessed via the Knowledge Base.