WordPress Integration

How to add Site Search 360 to a WordPress site

If you're running a WordPress site, there's no need to manually add any JavaScipt code snippets to enable our search. The Site Search 360 plugin for WordPress makes the integration seamless and codeless (although if you do want to add custom code, you still can). In short, you will need to follow these 5 steps:

  1. Make sure you have a search box widget or add a new one.
  2. Install the Site Search 360 Plugin.
  3. Choose the best integration option:
    • Built-in or Built-in+live search modes if you want to put a smart and flexible engine behind the default WordPress search interface.
    • Custom mode if you want to trigger mobile-ready and accessibility-conscious Site Search 360 results (which you can also style to fit your website's look and feel).

    • select Site Search 360 integration mode in WordPress
  4. Choose the suitable indexing mode: Database for cleaner results out of the box or Crawler to index custom fields, multiple sites, PDF files or other documents.
  5. Style and fine-tune your search from the Site Search 360 Control Panel: e.g. reorder results for specific queries, change the search fuzziness, add custom synonyms, and more.

Let's take a closer look at each step.

 

1. Use your default search box widget or add a new one

If you're already using the the built-in WP search or a different search provider (e.g. Google Custom Search Engine), you can go straight into the plugin installation. Once you install and activate it, we will detect your search field and button by their CSS selectors and automatically connect our search scripts to them.

How do I add a new search box?

  • First, go to the Appearance > Widgets to check if your WordPress theme already offers a pre-styled search widget. Depending on your theme, you should be able to add it to your header, footer, side bar, or a dedicated search page - wherever you want to display the search box. Next, proceed with the plugin installation.
  • If your theme doesn't have any search widgets available or you want to add a custom one, go to the Editor and manually add an tag. This tag would specify a field for your site users to enter their search queries. To do so:
    1. Navigate to your Theme customization menu or the page of your choice
    2. Select and add a custom HTML code block
    3. Paste the following code:
    4. adding custom html block in wp
    5. Publish your changes:
      manually added search bar

    The HTML code above adds a basic search box which you can style later on. Pay attention to the id of your elements. When you add several search boxes, give them unique ids. In this example, I'm adding an additional search box to my footer and assigning it an id="searchBoxFooter":
    add custom search bar to wordpress footer

    Please note: interacting with the search box at this point will not yield any results because it doesn't have the search power behind it yet. That's where the plugin enters the game.

 

2. Install the plugin

  1. Go to the Plugins menu from your WordPress administration menu, click Add New, and search for Site Search 360.
  2. Click Install Now, and then Activate.
    install ss360 wordpress plugin
  3. Navigate to the Site Search 360 menu in your side panel.
    • If you don't have an account with us yet, check whether your pre-filled email and site domain are correct and press Start Now.
    • If you have signed up for the Site Search 360 free trial version before, click Log me in. A site ID is assigned to every account and usually corresponds to the site domain that you provided at the registration. You can also find your site ID at the upper left corner of the Control Panel, in your Profile, or in our welcome email with the installation instructions. log in to existing ss360 account
 

3. Connect the Site Search 360 engine to your site

When setting up the plugin for the first time, you will see a quick configuration guide. To begin with, select one of the 3 available Integration modes:

  1. Built-in mode

    As its tagline "Keep the car - replace the engine" suggests, with this mode your search results wouldn't look any different but will feel different providing faster and smarter results compared to default WP search algorithms. It can be a small but a powerful change: check how the native WordPress search doesn't recognize the typo: WP shows no results for mistyped words

    While the mistyped software is no-brainer for the Site Search 360 engine running behind:

    ss360 results with defaut wp result layout
  2. Built-in mode + live search

    Enhance your default search widget with a drop-down showing quick search suggestions as you type. Your theme visuals (default search widget and result layout) are kept intact while the search result order and relevance are determined by Site Search 360. You can specify when the suggestion drop-down should appear (it's after 3 typed characters by default).autocomplete search suggestions
    Keep in mind that suggestions are not counted asgainst your search quota as they're generated differently from actual search results. You can add a Show All Results button to the dropdown as a call-to-action to trigger the full result output. To do so, go to the Search Designer > Suggestions > Append Search Button and import the new settings back into the plugin. add show all results button to suggestions Decide how strictly suggestions and results should be matching the search queries under the Search Settings section.
  3. Custom mode

    Connect our engine to any search box on your site (default or custom, or both) and trigger the Site Search 360-optimized SERPs (search result pages). By default, results are rendered in a layover popup but you can also show a fullscreen layover or embed them onto your site.
    Combined with the Crawler indexing, this mode allows you to take full control over your search settings and styles. Opt for the Custom and Crawler mode combination if:
    • You'd like to fully control the search result output: promote specific results, redirect searchers to best matching pages and products skipping result lists altogether, hide unwanted pages and files.
    • You want to search content across multiple sites or platforms (e.g. your blog is running on WordPrss but your main site is on HubSpot)
    • You want to index PDF, Word, Excel, or PowerPoint documents. Chances are that your WP theme doesn't allow displaying files and attachements in search results. This usually happens because WP built-in results are restricted by post type "post" and post type "attachment" is not allowed. There might be a simple theme setting to change this but if you're not sure, just let our Custom mode override it.
    custom site search 360 results

If you're still unsure which mode works better for you, no worries - you'll be able to switch between different integration modes later on.

Test your search right away

The next step is to check whether our plugin has located your search box correctly. Simply open your site and try typing something into your search box to complete the test. Depending on your choice of integration, you will see instant search suggestions and, after pressing Enter, full search results. The plugin waits until it detects a search. You can also skip this step if you'd like. test any search query

Personalization

Depending on your choice of the Integration mode, you'll see a few quick customization options:

  1. Change your search theme color by selecting it from the palette or providing a 6-digit hex code. This would affect the color of your search suggestions as well as headings and buttons on your search result page. Here's what our default theme color looks like:
  2. default ss360 theme color
  3. The following settings apply for the Custom mode only:
    Specify your preferred search result layout: showing results in a grid makes sense for a Woocommerce site when you need to show a lot of products at once. Otherwise, thanks to Google everyone is used to browsing through lists of results.
  4. Choose the loading animation style: skeleton (grey shapes that mimic the search result page layout), pulsing circle, or a flipping square. Not everyone has high-speed internet but no one likes waiting so showing the loading progress is an important aspect of your search user experience.
  5. Finally, here you can easily turn the voice search on or off. If enabled, a microphone icon will be automatically added to your search bar in all browsers that already support the speech recognition API.quick visual customization
 

4. Specify how we should index your content

Indexing means collecting the necessary data which will be later returned as search results. Building an index allows us to optimize speed and performance in finding relevant pages, products, and documents in response to a search query. There are 2 drastically different ways to index your site.

  1. With the Database mode all information is read directly from your WordPress and Woocommerce databases. We index all content pages, post types, and products as long as they are publicly published and not marked as excluded from search. For example, only the product pages or articles will be included (and not category lisitings) so your searchers could quickly get to the final results shorten avoiding extra navigation steps.
  2. The Crawler mode operates similarly to Google (and other search engines') crawlers: for the information to get indexed, the page has to be loaded first. So in this case the indexing isn’t reserved to blocks of information defined by WordPress - we can see the source code of each page so everything that is visible and even invisible to your site visitors is made searchable.
 

5. Style your search in a few clicks

If you've manually added a search box to your site and it looks a bit too boring or you'd like to customize more than just the theme color, make sure to use the Custom Integration mode and then go to the Search Designer section from your SS360 plugin menu. Choose one of the preset styles or play around by adjusting colors, text size, border radius, padding, captions, search result layout, and more. You can instantly preview the outcome both on desktop and mobile with our demo recipe database:


styling search bar with Search Designer

Some settings are purely visual (General, Search Box, Suggestions), while others (Results, Filters, Navigation) require some additional condfiguration in your Control Panel. The easiest way to implement our search is to display search results in a layover (as shown in the gif above). The layover is triggered when the user presses Enter or the search button (if you have one) to submit the search query. The SERP is then shown above your page so this almost never requires any further CSS tweaks.

If you want to display results directly on your site, choose the embed option and specify the CSS selector of the HTML element. If, for example, you have something like , use to tell the crawler to render results within this element. You can do that either from the plugin menu > Search Results > Content Block or directly in the Search Designer: choose Results > Embed, then scroll down the page to get the corresponding code snippet:

specify CSS selectors to render search results

Tip: when using our WP plugin, you do not need to manually copy and paste any code. Once you're happy with your Search Designer preview, go back to the Search Designer section of the plugin and simply press "Import Settings":

import search designer settings into wordpress

In this screenshot search results are embedded on the page (as opposed to showing them in a layover):

embed search results to your wp site  

Take it to the next level

All 3 modes give you access to your Site Search 360 Control Panel. Here's a sneak peek of what you can do there:

  • Dive into your search stats: view the number of queries over a specific time range, recent queries, frequent queries, query traction of a specific query and a detailed analytics table on the performance of each query (which results get clicked, what's the SERP bounce rate, what's the general query performance score, etc.). All reports can be exports as CSV for your record.
  • Track down 0-result queries to get new content ideas or transform them into search terms that would bring up the right results using our Query Mapping feature.
  • Add custom synonyms to your Dictionary.
https://docs.sitesearch360.com/images/ss360-add-wp-plugin.png
This guide explains how to add Site Search 360 to a WordPress site