Custom Search Modal

Since version 2.0, you can connect your theme’s default search to a grid, or create a custom search shortcode that will open the search modal on-click. The search can then be used to search the grid on the page, and will return a new grid of items based on the text used in the search. Think of it as an advanced filter, that shows the filter results in a popup modal.

Here’s a quick view of the custom search modal looks like:

To connect your theme’s default search to the grid

First, right-click the search field on the page, and choose “Inspect Element”:

 

Then write down the class name being used for the field, as shown in the web inspector:

 

Next, head over to the Essential Grid’s “Search Settings” section:

 

In the “Global Settings” tab, set “Enable Global Search” to “On”, and then click the “Add Setting” button:

1. Set by Class/ID: Paste the class name you copied from the web inspector earlier here (“Inspect Element” referenced earlier in this FAQ).
2. Choose Grid To Use: Connect one of your previously existing grids to the custom search.
3. Overlay Skin: Options are “Light” and “Dark”. This will be for the search modal’s main skin color.

To create a custom shortcode that will open the search modal on-click

This will allow you to create a shortcode with specific HTML that you can add to the same page/post that contains your grid. Then when the HTML element is clicked, the grid’s custom search modal will open.

From the same “Search Settings” section, click the “Shortcode Search” tab, and then click “Add Shortcode”:

1. Handle: This can be anything you choose. Avoid using spaces and special characters.
2. Choose Grid To Use: Connect one of your previously existing grids to the custom search.
3. Overlay Skin: Options are “Light” and “Dark”. This will be for the search modal’s main skin color.
4. HTML Markup: The shortcode will add this HTML to the page/post, and then when clicked, the grid’s custom search modal will appear.
5. Generated Shortcode: The shortcode to copy and paste into the page/post that also contains your grid.

 

In the screenshot above, an input field was used as the “HTML Markup”. But you could include any variation of the following examples:

 

Input Field:

Button:

Text Hyperlink:

 

Once you’ve created a search shortcode, copy and paste it into the same page/post that also contains your grid:

 

Input Field as shortcode’s HTML Markup:

 

Button as shortcode’s HTML Markup:

 

Text Hyperlink as shortcode’s HTML Markup: