Using the customizer in the Hueman WordPress theme

Overview

Since version 3.3 of the  Hueman theme, the customizer has a new interface, allowing you to customize any page or your Hueman website with a specific set of options, while before all options of the customizer were applied site wide.

The principle of this feature is simple : if an option of a given page has been customized locally, then it will apply the local customization in priority. If the option is not customized, then it will inherit its value from its parent, up to the site wide options.

This is for example very useful if you need to display a specific menu only on one page, or if you need to set a custom font for some posts. It can also be used to set specific colors, footer layout, site layout by page. In fact any options of the customizer can be set to a local scope, except a few ones that are excluded for the moment : widgets and the custom CSS introduced in 4.7.

Not only this, you can also apply a set of options to a group of similar contexts like : all pages, all posts, all tags, all categories, all authors, ... A typical use of this is for example to apply a particular set of colors, or a background, to all static pages.

Minimum WordPress requirements

Before you start, this feature requires the activation of the Hueman Addons plugin v2.0+ and WordPress version 4.7 +. If you did not install the Hueman Addons plugin yet, you will need to do it from your WordPress admin in Plugins > Add New.

Getting started

When you'll open the customizer in Hueman, you'll see new tabs on top of the left panel. Those tabs are clickable and allow you to switch from one option scope to another, back and forth, and to customize each scope independantly.

Let's take 2 examples to quickly review the various possibilities offered by this feature.

Use case 1 : setting a specific top menu to your contact page

In this example, you want to set a particular menu on the top of your contact page, including links to some company's pages for example. But you want this menu  only visible on the contact page, and not in all other pages.

Here's how to achieve this :

  1. On the front end of your website, navigate to your contact page
  2. Click on the customize icon of your WP admin bar : 
  3. You are customizing only this page, the top right panel is active :
  4. Open the Menus panel and create a specific menu for this page
  5. Assign the created menu to the top location : 
  6. Close the  customizer by clicking on the top left cross : 

Your page should display a specific menu, not visible on other pages. You can see the result live on the  demo page here.

This is an example of use with the menu, but you could also have set a specific header image, font, color set to this particular contact page.

Use case 2 : defining a header image for all your blog category archive pages

In this example, you want to display a header image on the category archive pages, like for example  this one on the demo website.

  1. On the front end, navigate to any category page
  2. Click on the customize button of the top admin bar
  3. Select the middle option scope tab : All categories : 
  4. Then navigate to Header Design > Banner image and enable the header image :
  5. Save and exit.

Now all category archives of your website are displaying a specific header image. Check the live  result here.

You can override this header image for a specific category by customizing the local set of options of this category, with a similar approach as the one described in example 1.

Reset

If you change your mind and you want to reset some local options, you can use either :

  • the reset button on the right of the each option in the customizer panel : 
  • or the entire scope reset on top of the customizer panel : 

Typical customization workflow

This new feature also helps gaining in productivity when customizing your website. In the customizer, you can navigate in your website from the preview by clicking on your menu or posts links, and then customize each contexts individually.  The customizer will keep track of your customizations done to any contexts during the session.

Once you're satisfied by your design, you can click and publish your work.

As per  WordPress 4.7, and the introduction of the customize changeset persistency, you can even close the customizer without saving right away, and go back to your customizations later, they will be available during 7 days.