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 code-free (although if you do want to add custom code, you still can).

In short, you will need to 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 smart and flexible 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.

Let's take a closer look at each step.

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. Navigate 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 at the 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 the the built-in WP search or a different search provider (e.g. Google Custom Search Engine) and you're happy to use the existing search field, 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. If necessary, you will also be able to manually update the selectors Search Designer > General > Search Bar of our plugin.

1. In the Site Search 360 plugin menu > Dashboard, scroll down to "Add Search Box" section and you can add a search box to the sections that are available, depending on the theme you use.

2. Add a search bar in Search Designer > General > Search Bar. You'll have to define the element selector of where you'd like inject the search bar, as shown in the below screenshot.

3. Go to the 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 should be able to drag and drop the widget to your header, footer, side bar, or a dedicated search page - wherever you want to display the search box.

   Here you can also add a widget title (e.g. "Best search ever") and customize your search button label (e.g. "Go!")

4. Another option is to use shortcodes which are small pieces of code indicated by [brackets] that perform a dedicated function on your website (search in our case).

   You can place a shortcode virtually anywhere you’d like, and it will add a nicely formatted search field to your page, post, or other content. When editing a page or a post, just click on the "Add Block" icon and look for the Shortcode widget. Here again 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.

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

     And here's what it looks like when you publish your changes:

     The cool thing is that the shortcodes as well as our search widgets are automatically connected 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, I'm adding an additional search box to my footer and assigning it 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

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:

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

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.

   Tip 1: you can add a Show All Results button to the dropdown as a call-to-action to trigger full results. To do so, go to the Search Designer > Suggestions > Append Search Button and import the new settings back into the plugin.

   Tip 2: Decide how strictly suggestions and results should be matching your user 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 and trigger the 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 allows you to take 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 blog site 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 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.

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.

Step 2 - Search Test

This is where you can 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.

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 would affect 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: thanks to Google everyone is used to browsing through lists of results, but if you have a Woocommerce site and you 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), 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.

4. 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.

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

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, 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 will be included (while category and admin pages will be skipped) so your searchers can quickly get to the final results avoiding extra clicks.

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 pages or blocks of information defined by WordPress - our crawler scans 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 with our Search Designer

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 the Site Search 360 WP plugin menu.

Play around with designer control to adjust colors, captions, suggestions, search result layout, and more. You can instantly preview the outcome on the right side of the settings.

Some settings are purely visual (General, Suggestions, etc.), while others (Results, Layouts) require some 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 allows you further customize the look and feel of the search to seamlessly integrate the search on your site.

Implementation options

The easiest way to implement our search is to display search results in an overlay, which is our default option. The overlay is triggered when the searcher presses Enter or the search button to submit the search query. The Search Engine Results Page (SERP) is then shown above your page so this almost never 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:

Tip: after you've made all necessary changes in the Search Designer, don't forget to "Save" them to the live site at the top right corner of the section.

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

You can read our article dedicated for the Search Designer, a.k.a. Design & Publish, for a more detailed introduction of all the styling options: https://docs.sitesearch360.com/search-designer

Take it to the next level

The Site Search 360 plugin was named one of the best WP plugins in 2022 by Ays-pro, the WP development team behind this WordPress Quiz Plugin, so don't wait and take your WP search to the limit!

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