Install & Configure Site Search 360 in WordPress

Who is Site Search 360

Site Search 360 has been around for about three years and the WordPress plugin is just a few months old  (as of June 2018).  The parent company SEMKNOX GmbH is about 6 years old.

• WordPress Plugin Page: https://wordpress.org/plugins/site-search-360/
• Main Site: https://sitesearch360.com/

Why I like Site Search 360

Site Search 360 indexes your site from the outside the same way users, Google, Bing and other public search engines do.

By accessing the content this way Site search 360 has an advantage because it does not care if the content comes from a blog post, content page, widget, plugin or any other WordPress backend functionality. Site Search 360 views and indexes your websites the same way visitors do.

The alternative indexing method uses the core WordPress search or an installed plugin. This method indexes your site directly from the database.

While indexing directly from the database may seem better, the plugin will only index the main area of the post, excluding any plugins, widgets, or other elements that get applied to your page when it is finally presented to the end user.

I have worked with too many websites (WordPress, Magento, Joomla, etc) that have incomplete search results from performing the indexing directly from the database.  So when I have the opportunity to work with an internal search solution like Site Search 360 I typically use them.

Enough of the history and theory lets get Site Search 360 installed and delivering search results.

There are two ways to integrate Site Search 360 to your WordPress site:

1. Use the WP plugin and use the plugin to configure the settings.
2. Manually add the Site Search 360 code to WordPress.  Site Search 360 Install Document

Use one method or the other but not both. If you use both methods things get confusing, fast.

We will start by installing and configuring the WordPress plugin.

Go to WordPress plugins, click add new and search for Site Search 360 it will most likely be the only plugin displayed,  it is developed by SEMKNOX

Click install now and activate.

Now in the left tool bar click Site Search 360

You will be asked to create an account, even if you have an account it is easiest to fill out these two items and click the register button.

You will now be presented with your site id and password

You are now taken to the screen where you configure the appearance and behavior of Site Search 360

The first step will be to get site search 360 to replace the default WordPress search.

To do this you need to have a search box published on your site.

Locate this search box and use your favorite developer tools to locate the search field selector.

For my site StevenJohnson.me it is

From here I can extract

name=”s”

and add this to the Search Field Selector.

Once you have done this, do a test search on the front end to see if the search will autocomplete and then display the Site Search 360 results in a layover box.

If it does then, congratulations it is time to call it a day or continue working on the look and feel or improving the user experience.

Redirecting the search results to an existing WordPress Page

The goal is to get the results to display on a dedicated search page rather than an overlay which will improve the visitor’s experience.

Currently, this step can not be done in the WordPress plugin. You will need to manually add the Site Search 360 code with the appropriate Javascript Variables.

Follow these steps if you want to manually add the code to WordPress and redirect the results to a specific page.

Step 1 Create a page to display or embed the results.  For my personal blog, I created a page called search

https://stevenjohnson.me/search/

once you have the search page created you will need to create or locate the area of the page you want the results to display.

For this page I could use

<div class=”entry-content” itemprop=”mainContentOfPage“>

I wanted to get a little more specific so in WPBakery, I created a custom div with a unique CSS selector. The selector is “sitesearch360resultsskj” I am positive this CSS selector is not being used anywhere else on the site. This allows me to be 100% sure the results will display in the correct place.

<div class=”wpb_text_column wpb_content_element sitesearch360resultsskj” >

Now that I have the location where the results will display I can update the Site Search 360 code.

Option 1:

searchResults: {‘contentBlock’:’div[itemprop=”mainContentOfPage”]’, ‘url’:’/search/’}

Option 2:

searchResults: {‘contentBlock’:’div[class=”wpb_text_column wpb_content_element sitesearch360resultsskj”]’, ‘url’:’/search/’}

Now the results will be redirected to the search result page to the appropriate div/CSS selector

Bringing everything together here is the code I added to StevenJohnson.me search page.

For my search result page, I got a little fancy and added a dedicated search box to above where the results display, this way if the visitor needs to search a 2nd time the search box is already on the page.  Additionally, if they click on the search link in the footer and come to this page without performing a search first then they are presented with a search box to help them find what they are looking for.

I hope this has been helpful.

If you have any questions or suggestions please put them in the comments. This way I can either answer the question or use your suggestion to improve the page.