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 which defined Facet action as “Filter” and Filter type as “Search”
    Input keywords to trigger search action.
  2. Category select:
    A facet widget which defined Facet action as “Filter” and Filter type as “Select”
    Allow viewers to choose categories for search action
  3. Search button:
    An Apply Facets widget which contains redirect URL of search Results page
  4. Result section:
    A section contains result Grid. Only appears if search action triggered
  5. Result page:
    A page where viewer would be redirected to to see search results

Create the Elements

In WP Dashboard > Piotnet Grid > Add new Facet

Keyword field

  • Add Facet widget
  • In settings tab: Define Facet Action type as “Filter”, Filter Facet as “Search”
    Switch On for Disable add the parameter to URL
  • Add search placeholder, for example: “enter your keywords”
  • In Advanced tab: Set width for the Facet.
    For example, in our Demo we set width = 65% on Desktop, 100% on Mobile.

Category Select

  • Add Facet widget
  • In settings tab: Define Facet Action type as “Filter”, Filter Facet as “Select”
    Switch On for Disable add the parameter to URL
  • In Advanced tab: Set 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 settings tab:
    Switch OFF for Disable Facets Action Before Clicking
    Switch ON for Apply Redirect
    Enter Redirect URL to the search Result page (see Result page part below)
  • In Advanced tab: Set width for the Widget.
    For example, in our Demo we set width = 15% on Desktop, 100% on Mobile.

Result Page

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

In this page, you also can add an other Search box facet, so your viewers can continue searching by other keywords. Take note that this Search box facet must have 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)

Now you can embed your search box into anywhere by using the Template shortcode.

Result Section

If you need to have a Result section in your Search box template, please perform 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 name of the Keywords field Facet
  • Add a Grid widget into this Section, at Select Grid, select the Grid which you have just created to show search results
  • Add some other facets into this Section for filter the results. For example, you can add a pagination.

Embed the Search Box

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

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