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

<?php
  if ( has_nav_menu( 'primary' ) || ! has_nav_menu( 'expanded' ) ) {...
?>
<div data-widget="search-input">
	<script type="application/json">
		{
		"account": "1583472911415671216",
		"collection": "searchio-wordpress",
		"endpoint": "//jsonapi-us-valkyrie.sajari.net",
		"pipeline": "website",
		"preset": "website",
		"variables": {},
		"mode": "suggestions",
		"redirect": {
			"url": "/search"
		},
		"theme": {
			"color": {
			"primary": {
				"base": "#667eea",
				"text": "#ffffff",
				"active": "#5a67d8"
			    }
			}
		}
		}
	</script>
	<noscript>This page requires JavaScript</noscript>
</div>
<script async src="https://cdn.sajari.com/embed/1/loader.js"></script>
</div><!-- .header-navigation-wrapper -->
</div><!-- .header-inner -->
</header><!-- #site-header -->
<?php
// Output the menu modal.
get_template_part( 'template-parts/modal-menu' );

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

<?php
/**
 * The template for the /search page
 */
get_header();
?>
<main id="site-content" role="main">
	<div class="section-inner">
	<h2 style="text-align:center; margin-bottom: 2rem;">
	<?php global $post;
	echo get_the_title($post->ID);
	?>
	</h2>
	<div data-widget="search-results">
		<script type="application/json">
			{
			"account": "1583472911415671216",
				"collection": "searchio-wordpress",
				"endpoint": "//jsonapi-us-valkyrie.sajari.net",
				"pipeline": "website",
				"preset": "website",
				"variables": {},
				"filters": [],
				"options": {
					"sorting": {
					"options": [
						{
						"name": "Most relevant",
						"value": ""
						},
						{
						"name": "Alphabetical: A to Z",
						"value": "title"
						},
						{
						"name": "Alphabetical: Z to A",
						"value": "-title"
						},
						{
						"name": "Date: Oldest to Newest",
						"value": "created_at"
						},
						{
						"name": "Date: Newest to Oldest",
						"value": "-created_at"
						}
					]
					},
					"results": {
					"viewType": "list",
					"showVariantImage": false,
					"imageAspectRatio": {
						"grid": 0.563,
						"list": 1
					},
					"imageObjectFit": {
						"grid": "cover",
						"list": "cover"
					}
					},
					"showViewType": true,
					"input": {
					"hide": true,
					"position": "aside"
					}
				},
				"theme": {
					"color": {
					"primary": {
						"base": "#667eea",
						"text": "#ffffff",
						"active": "#5a67d8"
					}
					}
				},
				"customClassNames": {
					"results": {
					"template": {
						"container": "list"
					}
					}
				}
				}
			</script>
			<noscript>This page requires JavaScript</noscript>
		</div>
	</div>
</main><!-- #site-content -->
<?php get_template_part( 'template-parts/footer-menus-widgets' ); ?>
<?php get_footer(); ?>

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