Custom searches built using Toolset<\/h4>\n\n\n\n\n\n![\"\"](\"https:\/\/toolset.com\/wp-content\/uploads\/2020\/05\/toolset-search-features-realestate.png\")
<\/a>Custom search for properties<\/figcaption><\/div><\/figure>\n\n\n\n<\/p>\n<\/div>\n\n\n\n
\n![\"\"](\"https:\/\/toolset.com\/wp-content\/uploads\/2020\/05\/toolset-search-features-travel-destination.png\")
<\/a>Custom search for travel destinations<\/figcaption><\/div><\/figure>\n<\/div>\n<\/div>\n\n\n\nOn this page<\/h2>\n\n\n\n- Steps for creating custom searches<\/a><\/li>
- Make the search results update when search inputs change<\/a><\/li>
- Add front-end sorting to search results<\/a><\/li>
- Add pagination to search results<\/a><\/li>
- Style the search box and results<\/a><\/li>
- Display the search box and search results on different pages<\/a><\/li>
- Display the search box and search results side-by-side<\/a><\/li>
- Hide the search results until the first search<\/a><\/li>
- Display the search results on a map<\/a><\/li>
- How to search by post relationships<\/a><\/li>
- Enable custom search for existing Views<\/a><\/li><\/ul>\n\n\n\n
Steps for creating custom searches<\/h2>\n\n\n\n
There are two main steps for creating a custom search:<\/p>\n\n\n\n
\n\n1. Create the custom search box<\/strong><\/p>\n<\/div>\n\n\n\n\n2. Design the custom search results<\/strong><\/p>\n<\/div>\n\n\n\n\n![\"\"](\"https:\/\/toolset.com\/wp-content\/uploads\/2020\/05\/toolset-custom-search-form-400x255.png\")
<\/a><\/figure>\n<\/div><\/div>\n\n\n\n\n![\"\"](\"https:\/\/toolset.com\/wp-content\/uploads\/2020\/05\/toolset-custom-search-results-500x319.png\")
<\/a><\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n<\/div>\n\n\n\nIt doesn’t matter which of these steps you do first. However, having at least simple search results makes it easier to test the search form.<\/p>\n\n\n\n
Here is an example of a complete custom search, with both the box and the results.<\/p>\n\n\n
\n![\"\"](\"https:\/\/toolset.com\/wp-content\/uploads\/2020\/05\/toolset-custom-search-complete-500x381.png\")
<\/a>Custom search with the search form and search results<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n<\/div>\n\n\n\n1. Creating the custom search form<\/h3>\n\n\n\n
You start by inserting a View<\/a> block into your page.<\/p>\n\n\n\nIn the View creation wizard, enable the Search <\/strong>option.<\/p>\n\n\n\n![\"\"](\"https:\/\/toolset.com\/wp-content\/uploads\/2020\/05\/toolset-views-custom-search-1-500x335.png\")
<\/a>Enabling the custom search when creating a new View<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n<\/div>\n\n\n\nAfter finishing the View creation wizard there is a View Search <\/strong>section in the View\u2019s editing area. Use the available buttons to add a custom search field, insert submit and reset buttons, or add other blocks.<\/p>\n\n\n\n![\"\"](\"https:\/\/toolset.com\/wp-content\/uploads\/2020\/05\/toolset-views-custom-search-2-500x272.png\")
<\/a>Custom search section when editing a View block<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n<\/div>\n\n\n\nFor example, you can click to Add Search Field <\/strong>and use the Select a Field <\/strong>dropdown. Select by which content type you want users to be able to search by and click Next<\/strong>.<\/p>\n\n\n\n![\"\"](\"https:\/\/toolset.com\/wp-content\/uploads\/2020\/05\/toolset-views-custom-search-3-500x293.png\")
<\/a>Adding a custom search field<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n<\/div>\n\n\n\nYou can now use the right sidebar to tweak the options for this search field. This includes the main field settings, label and style options.<\/p>\n\n\n
\n![\"\"](\"https:\/\/toolset.com\/wp-content\/uploads\/2020\/05\/toolset-views-custom-search-4-500x183.png\")
<\/a><\/figure>\n<\/div>\n\n\n<\/div>\n\n\n\n2. Creating the search results<\/h3>\n\n\n\n
The results of a custom search is basically a list of posts. In Toolset, we call such lists Views. Instead of writing custom queries<\/a>, Toolset does everything for you. All you need to do is visually design what and how you want to display for each post.<\/p>\n\n\n\nYou create a View using Toolset blocks as they allow you to display dynamic content<\/a> coming from custom fields, taxonomies, and standard post fields. You can then use the styling options within each Toolset block to design how the list will look like.<\/p>\n\n\n\nYou can even display Dynamic Sources using WordPress core blocks and popular block plugins<\/a>. Insert them and in the right sidebar, expand the Dynamic Sources <\/strong>section. Toggle on the option for any of the supported fields in that block.<\/p>\n\n\n\nToolset even allows you to display Dynamic Sources inside any text blocks like headings, buttons, and more. For more information, check out the lesson about displaying Inline Fields<\/a>.<\/p>\n\n\n\nYou can also enhance search results by adding pagination, front-end sorting, or making results update when search inputs change.<\/p>\n\n\n\n
<\/a><\/p>\n<\/div>\n\n\n\n
<\/a>On this page<\/h2>\n\n\n\n- Steps for creating custom searches<\/a><\/li>
- Make the search results update when search inputs change<\/a><\/li>
- Add front-end sorting to search results<\/a><\/li>
- Add pagination to search results<\/a><\/li>
- Style the search box and results<\/a><\/li>
- Display the search box and search results on different pages<\/a><\/li>
- Display the search box and search results side-by-side<\/a><\/li>
- Hide the search results until the first search<\/a><\/li>
- Display the search results on a map<\/a><\/li>
- How to search by post relationships<\/a><\/li>
- Enable custom search for existing Views<\/a><\/li><\/ul>\n\n\n\n
Steps for creating custom searches<\/h2>\n\n\n\n
There are two main steps for creating a custom search:<\/p>\n\n\n\n
\n\n1. Create the custom search box<\/strong><\/p>\n<\/div>\n\n\n\n\n2. Design the custom search results<\/strong><\/p>\n<\/div>\n\n\n\n\n<\/a><\/figure>\n<\/div><\/div>\n\n\n\n\n<\/a><\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n<\/div>\n\n\n\nIt doesn’t matter which of these steps you do first. However, having at least simple search results makes it easier to test the search form.<\/p>\n\n\n\n
Here is an example of a complete custom search, with both the box and the results.<\/p>\n\n\n
\n<\/a>Custom search with the search form and search results<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n<\/div>\n\n\n\n1. Creating the custom search form<\/h3>\n\n\n\n
You start by inserting a View<\/a> block into your page.<\/p>\n\n\n\nIn the View creation wizard, enable the Search <\/strong>option.<\/p>\n\n\n\n<\/a>Enabling the custom search when creating a new View<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n<\/div>\n\n\n\nAfter finishing the View creation wizard there is a View Search <\/strong>section in the View\u2019s editing area. Use the available buttons to add a custom search field, insert submit and reset buttons, or add other blocks.<\/p>\n\n\n\n<\/a>Custom search section when editing a View block<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n<\/div>\n\n\n\nFor example, you can click to Add Search Field <\/strong>and use the Select a Field <\/strong>dropdown. Select by which content type you want users to be able to search by and click Next<\/strong>.<\/p>\n\n\n\n<\/a>Adding a custom search field<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n<\/div>\n\n\n\nYou can now use the right sidebar to tweak the options for this search field. This includes the main field settings, label and style options.<\/p>\n\n\n
\n<\/a><\/figure>\n<\/div>\n\n\n<\/div>\n\n\n\n2. Creating the search results<\/h3>\n\n\n\n
The results of a custom search is basically a list of posts. In Toolset, we call such lists Views. Instead of writing custom queries<\/a>, Toolset does everything for you. All you need to do is visually design what and how you want to display for each post.<\/p>\n\n\n\nYou create a View using Toolset blocks as they allow you to display dynamic content<\/a> coming from custom fields, taxonomies, and standard post fields. You can then use the styling options within each Toolset block to design how the list will look like.<\/p>\n\n\n\nYou can even display Dynamic Sources using WordPress core blocks and popular block plugins<\/a>. Insert them and in the right sidebar, expand the Dynamic Sources <\/strong>section. Toggle on the option for any of the supported fields in that block.<\/p>\n\n\n\nToolset even allows you to display Dynamic Sources inside any text blocks like headings, buttons, and more. For more information, check out the lesson about displaying Inline Fields<\/a>.<\/p>\n\n\n\nYou can also enhance search results by adding pagination, front-end sorting, or making results update when search inputs change.<\/p>\n\n\n\n
Steps for creating custom searches<\/h2>\n\n\n\n
There are two main steps for creating a custom search:<\/p>\n\n\n\n
1. Create the custom search box<\/strong><\/p>\n<\/div>\n\n\n\n 2. Design the custom search results<\/strong><\/p>\n<\/div>\n\n\n\n It doesn’t matter which of these steps you do first. However, having at least simple search results makes it easier to test the search form.<\/p>\n\n\n\n Here is an example of a complete custom search, with both the box and the results.<\/p>\n\n\n You start by inserting a View<\/a> block into your page.<\/p>\n\n\n\n In the View creation wizard, enable the Search <\/strong>option.<\/p>\n\n\n After finishing the View creation wizard there is a View Search <\/strong>section in the View\u2019s editing area. Use the available buttons to add a custom search field, insert submit and reset buttons, or add other blocks.<\/p>\n\n\n For example, you can click to Add Search Field <\/strong>and use the Select a Field <\/strong>dropdown. Select by which content type you want users to be able to search by and click Next<\/strong>.<\/p>\n\n\n You can now use the right sidebar to tweak the options for this search field. This includes the main field settings, label and style options.<\/p>\n\n\n The results of a custom search is basically a list of posts. In Toolset, we call such lists Views. Instead of writing custom queries<\/a>, Toolset does everything for you. All you need to do is visually design what and how you want to display for each post.<\/p>\n\n\n\n You create a View using Toolset blocks as they allow you to display dynamic content<\/a> coming from custom fields, taxonomies, and standard post fields. You can then use the styling options within each Toolset block to design how the list will look like.<\/p>\n\n\n\n You can even display Dynamic Sources using WordPress core blocks and popular block plugins<\/a>. Insert them and in the right sidebar, expand the Dynamic Sources <\/strong>section. Toggle on the option for any of the supported fields in that block.<\/p>\n\n\n\n Toolset even allows you to display Dynamic Sources inside any text blocks like headings, buttons, and more. For more information, check out the lesson about displaying Inline Fields<\/a>.<\/p>\n\n\n\n You can also enhance search results by adding pagination, front-end sorting, or making results update when search inputs change.<\/p>\n\n\n\n<\/a><\/figure>\n<\/div><\/div>\n\n\n\n<\/a><\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n<\/a>1. Creating the custom search form<\/h3>\n\n\n\n
<\/a><\/a><\/a><\/a><\/figure>\n<\/div>\n\n\n2. Creating the search results<\/h3>\n\n\n\n