Using the customizer in the Hueman WordPress theme

Overview

In the Hueman theme, the WordPress live customizer has an enhanced interface, allowing you to customize any page or your website independently from the others, while all theme options set in the customizer are usually applied site wide.

Before providing use cases, let's go through the two simple principles behind this feature :

  • If a theme option, like the column layout, has been customized specifically for a page ( = only for this page ), then Hueman will use the specific page customization in priority for this option.
  • when a theme option of this page is not customized specifically, then this option will inherit its value from its parent option level ( all posts, or side wide for a single post ), 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 level, 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 to display a large header with title and image background to all your posts, and keep a normal header for all other contexts. ( learn more about  header background design in Hueman Pro )

Minimum WordPress requirements

Before you start, this feature requires the Hueman Pro theme ( or the Hueman Addons plugin v2.0+ ) and WordPress version 4.7 +.

Getting started

Make sure you have activated the Hueman  theme in Appearance > Themes. Then open the live customizer.

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

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 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 reset the entire customization level by clicking on the icon on top of the level switcher 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.