Managing the Search Suggestions list

When you click the main Search field in our demo you will be pre­sent­ed with a drop-down menu that gives you some sug­ges­tions about the things that are pro­mot­ed on the web­site — this is a great way for you to encour­age vis­i­tors to explore the site — it will appear both on the Front Page hero and in the Head­er of the rest of the site.

To add those links, we’ve envi­sioned a sim­ple yet pow­er­ful and flex­i­ble sys­tem (see screen­shot). We will use the stan­dard Word­Press Menus — let’s get start­ed:

Step 1 — Add the Keywords field to the front-page

The search menu is added to the Key­words field from front-page. You just have to edit the front-page and make sure that the Key­words box is checked (see screen­shot).

Step 2 — Create the Search Menu

The very first move is to go to Appear­ance → Cus­tomize → Menus and click on Add Menu but­ton to cre­ate a new menu, then give it a name like Search Menu, for instance.

Step 3 — Assign the Search Menu

At this point, you have to go to Appear­ance → Cus­tomize → Menus → Man­aged Loca­tions sec­tion and select the Search Menu that you just cre­at­ed in the Search Menu field.

Step 4 — Add Items to the Menu

You have to go back to Edit Menus area. From the left sec­tion, you can add links to the desired sec­tions: list­ings cat­e­gories, tags, regions or even reg­u­lar pages.

If the items that you want to add to your menu are not vis­i­ble, click the Screen Options but­ton in the top right cor­ner of your screen and make sure that you checked all the need­ed ele­ments (see screen­shot)

Step 5 — Add Description

In the same Screen Options sec­tion, there is a Descrip­tion option that you should check if you want to have small explana­to­ry notes for each menu item (see screen­shot)

Step 6 — Add Icon

For icons, you need to install the FREE Menu Icons plu­g­in. After acti­va­tion, a new block will appear on the left side from where you can select the icon sources. After that, each menu items has a new icon field that you can use (see screen­shot)

Addi­tion­al Read­ings:

This article applies to Listable, as they share the same underlying structure.

Updated on May 31, 2017

Was this article helpful?