WordPress Integration

If you run a WordPress site, you don't need to manually add any JavaScript code snippets to enable search. The Site Search 360 plugin for WordPress handles the integration without code (though you can still add custom code if you want).

Follow these 5 steps:

1. Install the Site Search 360 plugin for WordPress.
2. If you don't have a search box on your site yet, add a new one using our widgets or shortcodes.
3. Choose the best integration option:
   • Built-in or Built-in + live search modes — if you want to put our search engine behind your existing WP theme search layout.
   • 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).
     
4. Choose the suitable indexing mode: Database for cleaner results out of the box or Crawler to index multiple domains, PDF files, or other documents.
5. Style and fine-tune your search in the Site Search 360 Control Panel: reorder results for specific queries, change your search fuzziness, add featured results and custom synonyms, and more.

1. 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.
   
3. Go to the Site Search 360 plugin menu in your side panel.
   • If you don't have an account with us yet, fill in your email and site domain 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 matches the site domain provided during registration. You can also find your site ID in your Profile, or in our welcome email with the installation instructions.

---

2. Add a search box widget if you don't have one yet​

If you're already using WordPress's built-in search or a different search provider (e.g. Google Custom Search Engine) and want to keep the existing search field, skip ahead to connecting the engine.

Once you install and activate the plugin, it detects your search field and button by their CSS selectors and connects our search scripts to them automatically. If needed, you can also update the selectors manually in Search Designer > General > Search Bar.

1. In the Site Search 360 plugin menu > Dashboard, scroll down to the "Add Search Box" section. You can add a search box to the sections available for your theme.
   

2. Add a search bar in Search Designer > General > Search Bar. Define the element selector for where you want to inject the search bar, as shown in the screenshot below.
   

3. Go to Appearance > Widgets to find the Site Search 360 Search Form among the available options (make sure you've installed the plugin first).
   Depending on your theme, you can drag and drop the widget into your header, footer, sidebar, or a dedicated search page — wherever you want to display the search box.
   You can also add a widget title (e.g. "Best search ever") and customize the search button label (e.g. "Go!")
   

4. Another option is to use shortcodes — small pieces of code indicated by [brackets] that perform a dedicated function on your website (search, in this case).
   You can place a shortcode anywhere on your page, post, or other content to add a formatted search field. When editing a page or a post, click the "Add Block" icon and look for the Shortcode widget. No coding is necessary.
   
   We offer four types of shortcodes:

   • [ss360-searchbox] adds a simple search box and it doesn't need a closing tag.
   • [ss360-searchbutton]Go![/ss360-searchbutton] adds a search button. Specify your search button label (e.g. "Go!") between the opening and closing tags.
   • [ss360-form][ss360-searchbox][/ss360-form] or [ss360-form][ss360-searchbox][ss360-searchbutton]Go![/ss360-searchbutton][/ss360-form] In most cases, this is how you want to use our shortcodes.
     Wrapping them in [ss360-form] adds our default styling (e.g. makes the search box and button display inline and vertically centered). This format is also required if you opt for the built-in integration modes where the search results are rendered by your WP theme instead of our plugin.
   • [ss360-resultblock] — use this shortcode to embed search results into your page rather than show your SERP in an overlay modal.

   You can override default styles by adding the style attribute to any of the shortcode options above, e.g. [ss360-searchbox style="visibility:hidden;"]

   
   Here's what it looks like when you publish your changes:
   
   The shortcodes, like our search widgets, connect automatically to our search engine, so you can test your search results right away.

5. Finally, you can also use custom HTML blocks to manually add an <input> tag. You can find this option when you click "Add block" in the page edit mode.
   For example, you can paste the following code snippet:
   <input id="searchBox" type="text" placeholder="search">
   
   ... and publish your changes:
   
   The HTML code above adds a basic search box which you can style later on.
   Pay attention to the id of your <input> elements. When you add several search boxes, give them unique ids. In this example, an additional search box is added to the footer and assigned an id="searchBoxFooter":

---

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.

Step 1 - Integration​

Select one of the three available Integration modes:

1. Built-in mode
   This mode keeps your WP theme's result layout unchanged while replacing the underlying search engine, so you get faster, more relevant results than the default WP search algorithms.
   For example, the native WordPress search doesn't recognize this typo:
   
   While the Site Search 360 engine running behind the scenes handles the mistyped software without trouble:
   

2. Built-in mode + live search
   Enhance your default search widget with a dropdown showing quick as-you-type search suggestions. Your WP theme result layout is 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). Keep in mind that suggestions are not counted against your search quota, as they're generated differently from full search results.

   Add a Show All Results button to the dropdown as a call-to-action to trigger full results. Go to Search Designer > Suggestions > Append Search Button and import the new settings back into the plugin.

   

   Decide how strictly suggestions and results should match your search queries with the fuzziness settings in the Search Settings section.

3. Custom mode
   Connect our engine to any search box (or several) on your site to trigger Site Search 360-optimized SERPs (search result pages).
   By default, results are rendered in an overlay popup but you can also show a fullscreen overlay or embed them onto your site.
   
   Combined with Crawler indexing, this mode gives you full control over your search settings and styles. Go for Custom integration + Crawler mode if:

   1. You'd like to have full control over your search results: promote specific results, redirect searchers to best-matching pages and products skipping result lists altogether, hide unwanted pages and files.
   2. You want to search content across multiple sites or platforms (e.g. your main site is running on WordPress but your blog is powered by HubSpot).
   3. You want to index and search PDF, Word, Excel, or PowerPoint documents. Chances are that your WP theme doesn't allow displaying files and attachments in search results.
      This usually happens because WP built-in results are restricted to post type post, and post type attachment is not allowed. There might be a theme setting to change this, but if you're not sure, let our Custom mode override it.

If you're still unsure which mode works best for you, you'll be able to switch between integration modes later on.

Step 2 - Search Test​

This is where you check whether our plugin has located your search box correctly. Open your site and type 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.

Step 3 - Personalization​

Depending on the integration mode, you'll see a few quick customization options:

1. Change your search primary and secondary colors by selecting them from the palette or providing a 6-digit hex code. This affects the color of your search suggestions as well as headings and buttons on your search result page.
   Here's what our default search layout colors look like:
   
2. Specify your preferred search result layout: most searchers are used to browsing lists of results, but if you have a WooCommerce site and need to show a lot of products at once, you might opt for the grid layout to organize your search results as cards.
   
3. Choose the loading animation style: skeleton (grey shapes that mimic the search result page layout), a pulsing circle, or a flipping square. Not everyone has high-speed internet, so showing loading progress is an important part of the search experience.
4. You can also turn voice search on or off. If enabled, a microphone icon is added automatically to your search bar in browsers that support the speech recognition API.

Settings 2-4 above apply for the Custom mode only:

---

4. Specify how we should index your content​

Indexing means collecting the data that's later returned as search results. Building an index optimizes speed and performance in finding relevant pages, products, and documents for a search query. There are two ways to index your site: Database mode and Crawler mode.

Database mode​

Database mode reads all information directly from your WordPress and WooCommerce databases. It indexes all content pages, post types, ACF (Advanced Custom Fields) content, and products, as long as they are publicly published and not marked as excluded from search.

For example, only product pages or articles are included (category and admin pages are skipped), so your searchers can quickly get to the final results without extra clicks.

Crawler mode​

Crawler mode works similarly to Google's (and other search engines') crawlers: a page has to load before its content can be indexed. Indexing isn't limited to the pages or blocks of information defined by WordPress — our crawler scans the source code of each page, so everything visible (and even invisible) to your site visitors becomes searchable.

---

5. Style your search with the Search Designer​

If you've manually added a search box to your site and want to customize more than just the theme color, use Custom Integration mode, then go to the Search Designer section from the Site Search 360 WP plugin menu.

Use the designer controls to adjust colors, captions, suggestions, search result layout, and more. Preview the outcome instantly on the right side of the settings.

Some settings are purely visual (General, Suggestions, etc.), while others (Results, Layouts) require additional configuration in the Site Search 360 control panel (use the link from the plugin's Dashboard to access it). If you're familiar with CSS, callbacks, and templating, the "Advanced Configuration" section lets you further customize the look and feel of the search to integrate it into your site.

Implementation options​

The default way to implement our search is to display search results in an overlay. The overlay is triggered when the searcher presses Enter or the search button to submit the search query. The Search Engine Results Page (SERP) then appears above your page, so this rarely requires any further changes on your side.

If you want to display results within your site pages, choose the embed option and specify the CSS selector of the target block element. For example, if you have a dedicated search result page with something like <div id="search-results"></div>, use the #search-results selector to tell the crawler to render results within this HTML block.

You can specify the selector directly in the Search Designer > General > How to show results:

In this screenshot, search results appear as part of the site (and not in an overlay):

For a more detailed introduction to all the styling options, read our Search Designer (Design & Publish) article.

---

Manage your search in the Control Panel​

All three integration modes give you access to your Site Search 360 Control Panel. Here's what you can do there:

• Review your search stats: view the number of queries over a specific time range, recent queries, frequent queries, query traction for a specific query, and a detailed analytics table on the performance of each query (which results get clicked, the SERP bounce rate, the general query performance score, etc.). All reports can be exported as CSV for your records.
• 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 Result Mappings feature.
• Add custom synonyms to your Dictionary to enrich your content with virtual synonyms and influence the search result ranking.