HIDE

Create a Search Box

You can choose to import our pre-made demos or create a new Search Box yourself as following steps.

This document is guidance on how to create a search box and embed it into any desired pages.

Elements of a Search box

There are five elements of a search box: Keywords field, Category filter, Search button, Result section, Result Page.

1. Keywords field:

A facet widget that defined Facet action as “Filter”
Filter type as “Search”
Input keywords to trigger search action.

2. Category Select:

A facet widget that defined Facet action as “Filter”
Filter type as “Select”
Allow viewers to choose categories for search action

3. Search button:

An “Apply Facets” widget which contains a redirect URL of the Search Results Page.

4. Result section:

A section contains the result Grid. Only appears if search action is triggered.

5. Result page:

A page where viewers would be redirected to see search results.

Create the Elements

In WP Dashboard > Piotnet Grid > Add new Facet

Keyword field

  • Add Facet widget
  • In the Settings Tab:

Define Facet Action type as “Filter”,
Filter Facet as “Search”
Switch ON to “Disable add the parameter to URL”

  • Add a search placeholder, for example: “enter your keywords”
  • In the Advanced tab: Set the width for the Facet.

For example, in our Demo, we set width = 65% on Desktop, 100% on Mobile.

Category Select

  • Add Facet widget
  • In the Settings Tab:

Define Facet Action type as “Filter”,
Filter Facet as “Select”
Switch ON to “Disable add the parameter to URL”

  • In the Advanced Tab: Set the width for the Facet.

For example, in our Demo, we set width = 20% on Desktop, 100% on Mobile.

Search Button

  • Add Apply Facets widget
  • In the Settings Tab:

Switch OFF for “Disable Facets Action Before Clicking”
Switch ON for “Apply Redirect”
Enter the “Redirect URL” to the search Result page (see Result page part below)

  • In the Advanced tab: Set the width for the Widget.

For example, in our Demo, we set width = 15% on Desktop, and 100% on Mobile.

Result Page

  • In WP Dashboard > Add New Page
  • Embed a Grid into this page for showing search results
  • Use the URL of this page for the Search button (the part above)

On this page, you also can add another Search Box Facet, so your viewers can continue searching by other keywords.

Take note that: This Search Box Facet must have the same name as the original Search Box Facet.

At this stage, basically, you have enough elements for a search box. You can wrap them into a template:

  • In WP Dashboard > Piotnet Grid > Add new Template > Edit with Piotnet Grid
  • In the Template Edit Mode:

Add a Facet widget,
Select the Search Box Facet which you have just created (parts above)

-> You can embed your Search Box anywhere by using the Template shortcode.


Result Section

In the front-end, the Grid will be hidden until users fill in the keyword in the “Search box”. If you need to have a Result section in your Search box template, please perform the following actions.

  • In WP Dashboard > Piotnet Grid > Add new Grid
    This Grid is for displaying search results, so design it as you need

  • Edit the Search Box Template (the one which you have just created as part above)
  • Add a Section right under the Facet widget
    In Settings tab > Search Results Section > Enable > Enter the name of the Keyword field Facet
    (do not forget to revise this corresponding element in case you changed the “Search Facet Name”)
  • Add a Grid widget to this Section,

At Select Grid, select the Grid which you have just created to show Search Results

  • Add some other facets into this Section to filter the results. For example, you can add Pagination.

Embed the Search Box

At this step, you have already created all elements for a search box. Now the only thing you need to do is allocate the search box to any desired pages.

The convenient part is you are allowed to use the full search box by embedding the Search Box Template with shortcode, or only use part of the search box by adding in the Search Box Facet.


You can test an available Search Demo Template.

In WP Dashboard > Piotnet Grid > Templates > Import Demos > Choose Template 3 > Import