How to add a search box to WordPress Grid Gallery

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.

Wilderness
Wilderness
click to open an image lightbox
Sunset
display muted HTML5 video, click to open a web link
YouTube Video - WordPress Carousel Plugin
YouTube Video - WordPress Carousel Plugin
click to open a video lightbox
Book - Open PDF in Lightbox
Book - Open PDF in Lightbox
YouTube Video - Wordpress Portfolio Grid Gallery
YouTube Video - Wordpress Portfolio Grid Gallery
click to open a YouTube lightbox
Sea - Island
Sea - Island
click to open an image lightbox
Elephant Dreams - Vimeo
Elephant Dreams - Vimeo
click to open a Vimeo lightbox
Landscape - Green
Landscape - Green
click to open an image lightbox
Big Buck Bunny - MP4
Big Buck Bunny - MP4
click to open an MP4 video lightbox
Photo - Forest
Photo - Forest
click to open an image lightbox
Photo - Evening
Photo - Evening
click to open an image lightbox
Photo - Desert
Photo - Desert
click to open an image lightbox
Sea - Dark Beach
Sea - Dark Beach
click to open an image lightbox

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>