Introducing the WordPress theme customizer

So, what is a theme Customizer?

Every WordPress theme comes with a "Customize" screen and it helps you tweak the design aspects of the website such as:

Colors
Font Families
Font sizes
Header patterns
Logo
Website Layout

And it looks like this:

Customization "Option" panels on the left

On the left-hand side, you'll see something called customization "panels".

And if you go inside a particular "panel", you'll see the actual customization options.

For example, let's go inside the "Colors" customization panel.

0:00

And there we go.

We can now access the customization "options" of the "Colors" panel.

Customization "Preview" panel on the right

Whenever we make changes to the customization options on the left, we can preview those changes "live" on the right-hand side of the screen.

For example, if you notice, there is a section called "Global Colors" on the left.

And there is a "blue" color inside it.

Let's see what happens if we change it to a different color.

0:00

Did you see that?

As soon as I am done changing from blue color to a pinkish color, the preview panel on the right reacted to that.

It changed all the instances of the "blue" color to the "pink" color.

Usually, the changes affect the entire website.

💡

Please note that most of the changes that we perform inside the WordPress customize screen will affect the entire website.

Not just the page that we are currently previewing.

For example, if we visit a different page or a blog post on the website through the preview panel, we can see that the "blue" color got replaced with the "pink" color everywhere on the website.

0:00

Now that is the power of the WordPress customize screen.

Preview the changes on various devices

We can also see how a particular change looks on a tablet and mobile.

0:00

💡

Please note that the options are not specific to a particular device.

For example, if we change options while previewing how it looks on the mobile device, the value of a particular option remains the same on the desktop and tablet.

The responsive options are just for preview purposes. They do not help us make any value-based changes.

Always publish the changes

If you notice, every time we tweak an option, the "Publish" button will come alive yelling at you:

"Heyyyyyyyyy! Save the changes!"

So, just listen to it and save the changes by hitting the "Publish" button.

If you exit the WordPress "Customize" screen without saving the changes, those changes will not reflect on the frontend.

As simple as that.

Switch between various customization panels

You can go back to the original customize screen by clicking on the "left" arrow icon located at the top-right-hand corner of the screen.

0:00

How to exit the WordPress Customize screen

Finally, once we are satisfied with the customization, we can go back to the WordPress admin dashboard by exiting the customize screen.

And we can do that by clicking on the "cross" icon located in the top-right-hand corner of the screen.

The Conclusion

And, that's all you need to know about the WordPress customize screen for now.

We will keep visiting the Customize screen a lot during this module.

For example, in the next lesson, we will use this knowledge to upload a custom logo for our website.