Using the WordPress live customizer in the Hueman theme : the contextualizer

Overview

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

Note : you need to install Hueman Addons plugin or Hueman Pro to activate this feature.

Before going through an example, let's understand the two simple principles of this feature :

• If a theme option, like the header banner image, has been customized specifically for a page, the Hueman theme 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. If we are displaying a single post, the parent levels are : All Posts and then Side Wide.

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 almost all options of the customizer can be set at a local level, including the custom css.

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.1+ ) 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 navigate through the various options, you'll notice a link with a location icon at the bottom of settings eligible for contextualizations.

Let's take a use case to review the various possibilities offered by this feature.

Use case : setting a specific header image on your home page

In this example, you will set a specific header image only on your home page.

1. In the contextualizer panel, click on Add new and search for "Header image".
2. Then change the image 

Use case : setting a specific top menu on 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 to be displayed only  on the contact page

Here's how to achieve this :

1. On the front end of your website, navigate to a contact page that you have previously published
2. Click on the customize icon of your WP admin bar : 
3. Open the Menus panel and create a specific menu for this page if not already done. In the example, the created menu is "Company Page"
4. Open the menu locations and click on the "Can be contextualized for..." link at the bottom of the topbar location 
5. Add the contextualization and pick the menu that you want to display for this page : 
6. Your page displays a specific menu, not displayed 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.

Remove a contextualized option

If you change your mind and you want to reset some local options, you can remove them easily.

Open the live customizer, click on the Contextualizer panel and reset the option that you want to reset to the site wide value.

Customization Workflow

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

Once you're satisfied by your design, you can click and publish your work, or save it as a draft and publish later.