Skip Navigation

[Resolved] Designing a Custom Search Image Gallery

This support ticket is created 4 years, 6 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Karachi (GMT+05:00)

This topic contains 5 replies, has 2 voices.

Last updated by shannonM-2 4 years, 6 months ago.

Assisted by: Waqar.

Author
Posts
#1841437

Tell us what you are trying to do?
What I'd like to use Toolset for is to create an image gallery of wedding dresses in our store with a custom search that allows visitors to narrow down their search by designer, price range, sample size, silhouette, and trend with a type in search field that allows them to input keywords to search by as well.

Is there any documentation that you are following?
https://toolset.com/course/custom-types-in-wordpress/ and https://toolset.com/course-lesson/creating-a-custom-search/?utm_source=plugin&utm_medium=gui&utm_campaign=blocks

Is there a similar example that we can see?
I decided to go with Toolset based on an older video before Toolset updated to the visual style editor which I find more confusing. The way the custom search page looks and operates in this video is what I'd like to re-create, but for our dresses: hidden link

As of now, I've created the post type (Dresses) and custom fields and taxonomies, but I'm having trouble designing the content template and getting the data from the post type to show up in the View.

If I could kindly get a step by step on how to make this work, that would be most helpful as I'm a bit lost right now.

#1841763

Hi,

Thank you for contacting us and I'd be happy to assist.

To share more specific and detailed steps, I'll need to understand how the post type, custom fields and taxonomies for the dresses, have been set up and what you have already tried.

Can you please share temporary admin login details, along with the link to a page with the view that you've created so far?

Note: Your next reply will be private and please make a complete backup copy, before sharing the access details.

regards,
Waqar

#1845559

Thank you for sharing the admin access.

In WordPress, taxonomies are optimized for the search filter queries, which is why it is recommended to use taxonomies over the custom fields whenever possible.

While custom fields can be used for the view's search filters, they're generally more useful for storing content that just needs to be displayed on the front-end.

I'll recommend removing the custom fields like Designer, Silhouette, Price Range, Trend, and Sample Size and instead add individual custom taxonomies for each of these items.
( similar to how you've added "Design Details" )

This approach will not only have performance benefits, but it would be easier and more intuitive to apply more than one term in each taxonomy to the same dress or add new terms.

Another thing is that the tutorial video is using the Bootstrap library for showing the items in the grid layout. To enable this on your website, please go to WP Admin -> Toolset -> Settings -> General and select "Toolset should load Bootstrap 4" option for the "Bootstrap loading".

After that you can start creating a view following the instruction from that video and please share its link, if you face any challenge or something is not working as expected.

#1846147

Understood. I still have a few questions before I proceed.

1. Once I change Designer, Silhouette, Price Range, Trend, and Sample Size from custom fields to taxonomies, will I be able to display these on the front end as drop-down selections? If so, how do I select that option when creating the View.

2. I'd like to keep the current wedding gowns page as is while I work in the back end on creating the new version with Toolset. Do I use the content template to do this and then somehow display on the front end when I'm ready? Or should I create the view on a separate page?

3. Now that I've selected loading with Bootstrap 4 do I have to download something or do anything further to make it work properly?

Thank you, your help is much appreciated.

#1848025

Thanks for writing back.

> 1. Once I change Designer, Silhouette, Price Range, Trend, and Sample Size from custom fields to taxonomies, will I be able to display these on the front end as drop-down selections? If so, how do I select that option when creating the View.

- Yes, you can show custom taxonomies as a drop-down in the search form. For example, the movie genre is a custom taxonomy in the same video tutorial:
hidden link

I'll recommend a special focus on the part starting from 6:40 in the video which shows how to use the "Search and Pagination" section to add front-end search filters.

We also have a detailed guide on adding custom search in views using the classic editor at:
https://toolset.com/documentation/legacy-features/views-plugin/front-page-filters/

> 2. I'd like to keep the current wedding gowns page as is while I work in the back end on creating the new version with Toolset. Do I use the content template to do this and then somehow display on the front end when I'm ready? Or should I create the view on a separate page?

- Views give you the flexibility that they can be added to any page, at any time. You can create a view and show it on a temporary page while you're working on it. When it is ready, you can add it to the actual wedding gowns page.

> 3. Now that I've selected loading with Bootstrap 4 do I have to download something or do anything further to make it work properly?

- No, you won't have to download anything else. After the Bootstrap library is turned on the website, you'll see a "Grid" button on top of the content editors.
( this example screenshot is taken from the tutorial video at 8:25 - hidden link )

You can insert the code for the grid columns and adjust the content inside it accordingly.

#1849963

My issue is resolved now. Thank you!