With the shortcode setting, you can display your results anywhere on your site by using a shortcode – and then customise the results using PHP templates in your theme folder.
Enable Shortcodes
Head to the Settings screen and enable the Shortcodes setting.
By default they’re enabled already.
Create a Query
Set the location to Dynamic and the Integration to Results Shortcode.
Once you save the query, you’ll see a new option to copy the results shortcode.
Displaying the Results
Place this shortcode anywhere on your site to display the results from your query settings.
Create Connected Fields
Once you’ve saved your query, you can start creating and connecting fields below. iT Fields are optional, you can use queries solely for building listings without any fields at all.
Learn how to create and add fields to your query.
Customising the Results
By default, Search & Filter uses a predefined PHP template for displaying your query results.
This can be overriden in your theme. Search & Filter first looks in your theme folder for an appropriate template to use, and falls back to it’s own if there isn’t one.
Template Location
Templates should be stored in your theme folder, inside a sub folder called search-filter. The path should look like this:
./wp-content/themes/your-theme/search-filter/...
Where your-theme is the folder of your theme.
It is recommended to use a child theme for customizations.
Create a Template With the ID of the Query
Search & Filter first checks the search-filter folder in your theme for a template matching your query ID. If your query ID is 123 then it would try to load the file:
./wp-content/themes/your-theme/search-filter/123.php
This allows you to create different results template for each of your queries.
Finding the Query ID
You can find the query ID at the top of the query edit screen:
It is also present in the results shortcode itself, where 123 would be the ID:
[searchandfilter query="123" action="show-results"]
Create a Fallback Template
If a template with your query ID is not found in your theme folder, then Search & Filter looks for a file called results.php in the same folder:
./wp-content/themes/your-theme/search-filter/results.php
This template will be used for any queries that don’t have their own specific template.
Copy the sample template
A good starting point is to use the template that comes with Search & Filter.
This can be found in:
./wp-content/plugins/search-filter-pro/includess/features/shortcodes/template.php
Copy this file to your theme folder and rename it to results.php – the path should be:
your-theme/search-filter/results.php.
Once you’ve copied this over you’re ready to start customising the results.
Migrating from v2
If you’ve migrated from version 2 of Search & Filter there are a couple of things to note:
- We no longer run
wp_reset_post_data()automatically, it must be added to your template after the$query->have_posts()loop. It can be found on line67of the v3 template. - The container CSS class has changed to
.search-filter-query--id-123(from.search-filter-results-123), where123is the query ID.