How to add a search box to WordPress Grid Gallery

Last updated on

Product

Wonder Grid Gallery Version 17.4 or above

Tutorial

This tutorial will guide you how to add an external search box to the grid galleries created with Wonder Grid Gallery. You can place the search box anywhere on the same page as the gallery, for example, above or below the gallery, or in a sidebar widget etc.

There are two steps in this tutorial:

  • Step 1 - Create a WordPress grid gallery and add its shortcode to a WordPress page or post
  • Step 2 - Add a search box to the same page as the gallery

An online demo is as follows. You can type in the search box and test the search function. The search function will search the text in the image or video title, description, alt text and image URL.

Step 1 - Create a WordPress grid gallery and add its shortcode to a WordPress page or post

First please install the WordPress premium plugin Wonder Grid Gallery. You can download the free trial version from the plugin home page, test it, make sure it works for you before upgrading to the commercial version.

After you have installed the plugin Wonder Grid Gallery, in your WordPress backend, left menu, go to Wonder Grid Gallery -> New Gallery, create a new gallery. You can add images and videos, select a skin, then publish the gallery.

After you have published the gallery, you can add the provided gallery shortcode to a WordPress page or post.

Step 2 - Add a search box to the same page as the gallery

To add a search box to search the gallery, add an input field anywhere on the same page and assign its class to wondergridgallery-search. You can also add the attribute placeholder to specify a short hint that describes the input box.

The HTML code is as follows:

<input type="text" placeholder="Search Gallery" class="wondergridgallery-search">

If there are multiple galleries created with Wonder Grid Gallery on the same page, the search box will search all galleries. To create a search box that only searches a specified gallery, you can add a data attribute data-galleryid to specify the ID of the gallery.

The HTML code is as follows:

<input type="text" placeholder="Search Gallery" class="wondergridgallery-search" data-galleryid=1>