search mobile facets autocomplete spellcheck crawler rankings weights synonyms analytics engage api customize documentation install setup technology content domains user history info home business cart chart contact email activate analyticsalt analytics autocomplete cart contact content crawling custom documentation domains email engage faceted history info install mobile person querybuilder search setup spellcheck synonyms weights engage_search_term engage_related_content engage_next_results engage_personalized_results engage_recent_results success add arrow-down arrow-left arrow-right arrow-up caret-down caret-left caret-right caret-up check close content conversions-small conversions details edit grid help small-info error live magento minus move photo pin plus preview refresh search settings small-home stat subtract text trash unpin wordpress x alert case_deflection
Swiftype Documentation / tutorials: Using the Swiftype Search Results Overlay with WordPress

Using the Swiftype Search Results Overlay with WordPress

The Swiftype Search WordPress plugin replaces the standard WordPress search in a seamless way. It uses your WordPress theme's template to display search results as it normally would.

However, some people would rather use the Swiftype search overlay that is available for our web crawler-based search engines.

Example of a WordPress search engine using the search overlay

Fortunately, this is easy to do if you know how to edit your WordPress theme. Best of all, while search results will be displayed in an overlay, the indexing will still happen automatically when you save posts in WordPress.

First, make sure the Swiftype Search plugin is installed and working correctly.

Next, you'll need to "hide" the search element from the Swiftype Search plugin. This will allow you to use our JavaScript install code instead.

The Swiftype Search plugin locates the search box by the name of the field (it looks for input[name="s"]) so the easiest way to stop this is to remove the name of the field.

Your theme may or may not have a searchform.php file for rendering the search form. If it doesn't, you can add one as described here.

In searchform.php, remove the name of the s input element. Once you've done that, change the id to be st-search-input, which is the default value the JavaScript install code looks for.

If searchform.php looks like this:

<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
    <div><label class="screen-reader-text" for="s">Search for:</label>
        <input type="text" value="" name="s" id="s" />
        <input type="submit" id="searchsubmit" value="Search" />
    </div>
</form>

Your edit should make it look like this:

<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
    <div><label class="screen-reader-text" for="st-search-input">Search for:</label>
        <input type="text" value="" id="st-search-input" />
        <input type="submit" id="searchsubmit" value="Search" />
    </div>
</form>

Note: Modifying searchform.php will only work if your search box uses get_search_form to be rendered. If it's hard-coded in your theme, you'll need to find and modify it there.

Now that you've changed the search form, add the JavaScript install code to your site's footer, right before the </body> tag. Typically, footer.php is the right place for this code.

The install code should look like this. Be sure to replace the key with your search engine's key. You can find your engine's key on the home page of your Swiftype dashboard.

<div id="st-results-container"></div>
<script type="text/javascript">
  var Swiftype = window.Swiftype || {};
  (function() {
    Swiftype.key = 'YOUR_ENGINE_KEY';
    Swiftype.inputElement = '#st-search-input';
    Swiftype.resultContainingElement = '#st-results-container';
    Swiftype.attachElement = '#st-search-input';
    Swiftype.renderStyle = "overlay";

    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.async = true;
    script.src = "//s.swiftypecdn.com/embed.js";
    var entry = document.getElementsByTagName('script')[0];
    entry.parentNode.insertBefore(script, entry);
  }());
</script>

Once you've made these two changes, the Swiftype search result overlay will be used instead of the WordPress search results page.