Custom Search Modal

This article will show you how to 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 what 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:

<input type=”text” value=”Search Grid” />

Button:

<button>Search Grid</button>

Text Hyperlink:

<a href=#”>Search Grid</a>

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:

Custom Search Modal

Further Resources for Web Design and Development Enthusiasts

Alright! We've embarked on quite an adventure exploring the realms of this topic. But why stop there? The world of web design and development is vast, and there's always more to learn and discover. Let's dive into some resources that'll keep your knowledge fresh, your skills sharp, and your passion ignited:

The Author

KC

Strength does not come from winning. Your struggles develop your strengths. When you go through hardships and decide not to surrender, that is strength.

Liked this Post?
Please Share it!