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.
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.
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.
searchform.php, remove the name of the
s input element. Once you've done that, change the
id to be
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>
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.
</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.
Once you've made these two changes, the Swiftype search result overlay will be used instead of the WordPress search results page.