You may have noticed how the hooks page in the Total docs has a custom filter that refreshes the page and filters the items in the table. This functionality is built-into the theme so you can do the same thing!
Insert and Customize the Search Bar Element
The first step is to insert the Search Bar element and edit the Custom Action URL and Custom Input names under the Query tab.
- Custom Action URL: This is the URL you want to send the user’s to when performing a search. This can be any URL. If you want to refresh the page use the
current_urldynamic variable like the screenshot below. - Custom Input Name: This is the url parameter that will be used for the search terms. In the example below we used
_search, this means the page will refresh with?_search=termsadded at the end. It is very important to not use “search” or “s” because those are parameters reserved by WordPress core.
Customize the Post Cards Element
Now that we’ve set up our search bar, it’s time to update the Post Cards element to display the results. To do this, head to the Query tab, scroll down, and find the URL Search Parameter setting. In this field, enter the custom input name you’ve assigned to the Search Bar element.
Now, this element will “listen” for the parameter in the URL and if it exists it will return results based on that search.
By default, the Post Cards element will display recent posts when no search results are found. This is typically beneficial for SEO, as it prevents the page from appearing blank. While you could use custom code to hide posts when there are none, it might be better to create a separate page specifically for search results. This way, you can have one page with the search bar, which then redirects to another page displaying the results.
Why Not use Ajax?
Yes, it’s possible to also create an ajax search to filter that re-loads the Post Cards element only without refreshing the page (see the advanced ajax search docs) but here are some reasons why refreshing the page is better:
- SEO Benefits: With a page refresh, the filtered results are fully visible to search engines, meaning they can be indexed and ranked appropriately. AJAX-based filtering might not update the URL, which can limit SEO potential for specific filtered content.
- Compatibility with Browser Features: A page refresh ensures the search results are bookmarked or shared correctly with a URL. Users can easily share filtered results with others or return to them later without losing the context of the search.
- Reduced Server Load: Refreshing the page triggers the request only when necessary, while AJAX search constantly sends requests in the background as users type or filter, which can put unnecessary load on the server.
- Consistency with User Expectations: Many users expect page refreshes when applying filters or searching, as it’s a common behavior across many websites. It’s a familiar and intuitive way to show updated results.
- No Dependency on JavaScript: A page refresh works even if JavaScript is disabled in the browser. AJAX search, on the other hand, requires JavaScript to be enabled, limiting accessibility for some users and lowering page speed scores.
- Better Performance on Large Datasets: When dealing with a large number of posts or items, refreshing the page can be more efficient since the server can send the entire page with the updated content, rather than loading and manipulating smaller chunks of data via AJAX.