An introduction to the theme customizer

All my themes from Shaped Pixels use the WordPress Customizer to provide a variety of options and settings, but what is different with Receptive is that I have designated settings that are theme specific with a small “SP” (short for Shaped Pixels) icon next to each setting group.

I did this because the core developers at WordPress are getting a little carried away with adding more “admin” based functions into the customizer which makes it a bit more confusing for the end-user. Things like, menus, widgets, and the background settings have been incorporated into the customizer, often getting mixed in with the theme’s own settings which makes it difficult to know what settings are WordPress and what ones belong to the theme. To help you out, I now place an SP next to each section:

 theme customizer

You might notice an extra section in the screenshot above labeled as “Additional CSS“. This is part of the upcoming WordPress 4.7 that is soon to be released; the reason you see it here is because I built this theme using a beta version of 4.7 to ensure that when they release it, Receptive will be compatible. One note that I should mention about the Additional CSS tab, is that I wrote a blog article “Using the Custom CSS Editor in WordPress” introducing this new feature that you can read up on.

Each section has sub-sections and settings, some offer a mix of simple to more complex options and settings for you, so each tutorial for this theme will take you through the ones that relate to the theme during your initial setup.

I won’t go into the sections related to WordPress:

  1. Site Branding
  2. Menus
  3. Widgets
  4. Static Front Page
  5. Additional CSS

Make Changes and Save

Whenever you make changes from within the customizer, you get a preview window that loads your website that can be navigated to the page where you are editing. As you make changes, such as colour, you will see a live preview as you perform your customization. For example, the Top Bar Background colour here:

customizing colours

When you are happy with your changes, click on the blue “Save & Publish” button at the top of the settings column:

save colour

NOTE As you make changes (before saving) and see the results in the preview window, your website visitors do not see the changes until you click “Save & Publish“.