Product
Wonder Gallery Version 13.4 or above
Tutorial
This tutorial will guide you how to add an external search box to the galleries created with Wonder 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 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 underneath the gallery and test the search function.
Step 1 - Create a WordPress gallery and add its shortcode to a WordPress page or post
First please install the WordPress premium plugin Wonder 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 Gallery, in your WordPress backend, left menu, go to Wonder 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 wondergallery-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="wondergallery-search">
If there are multiple galleries with Wonder 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="wondergallery-search" data-galleryid=1>
