How to display widget zones with the Hueman WordPress theme

Widgets in WordPress are blocks of content that you can embed and edit, in predefined locations of your website. They are for example very useful to display a list of page in your footer ( with the menu widget ) or to display an advertisement block in your sidebar ( with the text/ html widget ). If you are not familiar with widgets in WordPress and how to use them, visit this introduction page.

The Hueman theme has several predefined widget locations : header, sidebars, footer. There is a lot of flexibility in displaying the widgets in Hueman, you can for example contextualize the widgets to a specific type of content. The widget zones can be set both for a specific location on the page - sidebar(s), header or footer and for a given context - home page, a single page, archives, categories etc. Further down, we shall see some examples of these.

Setting the widget zones can also be done in the following two ways.

1. From the customizer as default settings for locations and context.

From the customizer, go to Dynamic Sidebars and Widgets. Under the Create And Manage Widget Zones section, you can add more widget zones or manage options for the existing widget zones.

2. From a single post or page, with the meta box after the post/page content

Alternately, you can also set up widget zones for individual posts/pages using the metabox below the post/page content in the post/page editor.

What are the default widget zones of the Hueman theme?

The default widget zones of the Hueman theme are

• Primary (usually left), Secondary (usually right). There are some exceptions to this rule depending on the layout.
  1. 1 Column: both primary and secondary widget zones are not displayed.
  2. 2 Columns - Content Left: primary widget zone on the right.
  3. 2 Columns - Content Right: primary widget zone on the left.
  4. 3 Columns - Content Middle: primary widget zone on the left and secondary widget zone on the right.
  5. 3 Columns - Content Left: primary widget zone on the extreme right and secondary widget zone between content and primary widget zone.
  6. 3 Columns - Content Right: primary widget zone on the extreme left and secondary widget zone between primary widget zone and content.
• Footers - Footers may be disabled totally or can have 1 to 4 columns. Depending on the footer layout, the number of widget zones also vary from 0 to 4.
• Header ads and Footer ads may also be disabled or enabled based on user settings.

How to create a custom widget zone?

If the default widget zones do not suit your needs, follow the following steps to create a custom widget zone.

1. From the customizer panel, go to Dynamic Sidebars and Widgets. Under the Create And Manage Widget Zones section, click on the Add New button.

   

2. Now, you can change the name from the default Widget Zone X to something more meaningful.

3. To change the location of a widget zone, choose from the dropdown list of locations. You can add more than one location. You can removed an already chosen location by clicking on the x symbol against it. The default location is Primary sidebar.
4. To change the context in which a widget zone is displayed, choose from the dropup list of contexts. The default context is Home.

   

Example 1: How to display a side menu on the left sidebar of your home page?

To create a side menu on the left sidebar of your home page, follow these steps.

1. From the customizer panel, go to Dynamic Sidebars and Widgets. Under the Create And Manage Widget Zones section, click on the Add New button. Change the name of the new widget zone.

   

2. The location and context can remain the default values.
3. Now, go back to go to Dynamic Sidebars and Widgets and click on Home Side Menu (or the name of your recently created widget zone.)
4. Click on Add a Widget and add the Custom Menu Widget.
5. Type in a title and choose the menu that you want to be displayed.

   

6. Save and publish.

Example 2: How to display a Google map in the right sidebar of your contact page?

To display a Google map on the contact page, follow these steps.

Part 1: Create the Widget Zone:

1. From the customizer panel, go to Dynamic Sidebars and Widgets. Under the Create And Manage Widget Zones section, click on the Add New button. Change the name of the new widget zone.
2. Go back to go to Dynamic Sidebars and Widgets and click on Contact Google Map (or the name of your recently created widget zone.)
3. Click on Add a Widget and add the text widget.
4. Copy and paste the Google map code into this text widget.
5. Return to the Create And Manage Widget Zones section and edit the Contact Google Map zone. Remove location and context.

   

6. Save and publish.

Part 2: Add the widget zone to the contact page:

1. Open the contact page in the page editor.
2. In the metabox title Page options, choose the 2 Column - Content left layout.
3. Choose the Contact Google Map zone from the dropdown list for the primary sidebar.

   

4. Update the page.

Visit your contact page and see the results.

Why is a widget zone flagged 'inactive'?

Sometimes, widget zones may be flagged inactive in the Create And Manage Widget Zones section.

This may be due to the following reasons:

1. When the widget zone context chosen is not applicable for this particular location. For example, the Before Footer location and Search Results context do not work together.
2. When the widget zone is chosen at a post or page level and for this reason, the location and/or context is blank in the Create And Manage Widget Zones section. For example, the Contact Google Map zone does not have location or context.

That is a short overview of the possibilities that widgets offer in the Hueman theme. Play around with the various combinations to achieve that ideal look for your site.

Doc created by: Menaka S.