%20logo.svg?alt=media&token=8a329413-2638-4c59-9fe9-0dac942ffa3c)
Wordpress
Add advanced search and discovery capabilities to any Wordpress site in minutes.
Get started
Follow the get started guide for websites. Once your collection is up and running, you are ready to install Search.io onto your Wordpress website.
Head over to the search interface builder in your console and customise the search interface to suits your needs.
For this demonstration we are going to be using the results page configuration. If you're looking to use the overlay configuration, we have a guide here you can checkout.
Click install and keep the two code snippets handy!
Installation
Header template
The two code snippets we generated before need to be added to our theme's template files.
The first snippet will be added to our global
header.php template file. This snippet will show the search input in the header area on every page of our site.Note that we are using a child theme for the Twenty Twenty Wordpress theme.
At the moment our header looks like this:
We're going to be replacing the default Wordpress search function with Search.io search.
In
header.php place the search input snippet you copied from before where you would like it. In our example we are removing all mentions of the default Wordpress site search and placing our search-input snippet after the has_nav_menu() function and before the </header>:Click to expand example
Take note of the redirect url in the above code snippet, as this will be important later.
Now we have the search input up and running in our global
header.php template file and on every page on our site:
Search results page template
Our next step is to install the search results on our results page. To do this we will create a new page in our Wordpress dashboard and call it 'search' so it has the slug /search.
We can then create a new template file in our theme directory for our search page and call it
page-search.php, following the Wordpress template hierarchy.We'll then take our second code snippet, and place it in the
page-search.php template file where we want the search results to render. In our example we are placing it right after the get_header() function in the main body of our page template.Click to expand example
Because we set the redirect url to /search in our
search-input code snippet any search from the site's header will take us to our new search page:
That's it! You now have powerful search up and running on your Wordpress site
🎉
Last modified 4mo ago
Copy link