{"id":125643,"date":"2014-02-10T11:30:00","date_gmt":"2014-02-10T16:30:00","guid":{"rendered":"http:\/\/premium.wpmudev.org\/blog\/?p=125643"},"modified":"2014-11-19T18:59:26","modified_gmt":"2014-11-19T23:59:26","slug":"dont-let-your-empty-search-page-drive-off-visitors","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/dont-let-your-empty-search-page-drive-off-visitors\/","title":{"rendered":"Don’t Let Your Empty Search Page Drive Off Visitors"},"content":{"rendered":"

Keeping visitors on your site is vitally important, so the last thing you want for those searching your site is a page with little more than the message “no results found”.<\/p>\n

That’s telling visitors to “move along, there’s nothing of interest to see here”.<\/p>\n

But you can change this message by making your search results page work much harder. Here’s how.
\n<\/p>\n

\"Screenshot
This is probably how your no results search page reads.<\/figcaption><\/figure>\n\n

A recent Alertbox<\/a> from UX gurus, Nielsen Norman Group, talked about search results and the consequences of having poorly designed or even empty search results pages.<\/p>\n

Whilst empty search results on the the major search engines are a rare occurrence, they are far more likely on the average WordPress site so are a potential huge turn-off for your visitors.<\/p>\n

The Alertbox made three recommendations for search results pages:<\/p>\n

    \n
  1. Make it obvious that there no results<\/li>\n
  2. Offer starting point for moving forward<\/li>\n
  3. Don’t mock the user<\/li>\n<\/ol>\n

    The first recommendation is really about the clarity of the page and making the message stand out.<\/p>\n

    The last recommendation is targeted at those sites that attempt to use humor when no results are found. In these cases, NNG says to be careful in case the visitor thinks you are poking fun at them.<\/p>\n

    We are going to focus on the second recommendation which NNG broke down to the following:<\/p>\n

      \n
    1. Restate the query, so the visitor knows what they searched for<\/li>\n
    2. Provide a search box pre-filled with the original query<\/li>\n
    3. Suggest similar queries that do return results<\/li>\n
    4. Suggest spelling corrections (as per Google’s “did you mean” functionality)<\/li>\n
    5. Provide advice about modifying queries<\/li>\n<\/ol>\n

      To meet as many of the above recommendations as possible and to try and keep visitors on our site, we are going to build a new search page to replace your theme’s current search page.<\/p>\n

      Overriding The Existing Template<\/h2>\n

      Each theme will have its own approach to displaying search result pages. TwentyFourteen, which I’ll be using in this article, has a search.php<\/em> template that uses the generic templates content.php<\/em> and content-none.php<\/em> to format the pages, depending on whether there are any results or not.<\/p>\n

      Regardless, we’ll create our own but you’ll need to ensure that it keeps to the style your theme uses. For this reason, we’ll be doing all the modifications in the theme rather than via a plugin.<\/p>\n

      So, first job is to add this small function to your theme’s functions.php<\/em> file:<\/p>\n

      Loading gist 8910606<\/a>

      Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n

      This code hooks into the template_redirect<\/em> action that gets called when WordPress is deciding which template to use to create the page.<\/p>\n

      We’ve got a check in there to make sure it’s the search page that’s being requested and if it is then we are going to use our own template, searchpage.php<\/em>.<\/p>\n\n

      Creating The New Search Template<\/h2>\n

      In your theme directory create a new file called searchpage.php<\/em>.<\/p>\n

      As I mentioned before, you need to ensure that you maintain your site’s look and feel. If you are just playing along on TwentyFourteen, then you’ll be fine.<\/p>\n

      If not, then one option is to copy the contents of a template such as page.php<\/em> and then replace the dynamic content – generally where the Loop starts – with everything below contained in the #content<\/em> div.<\/p>\n

      Loading gist 8910606<\/a>

      Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n

      Okay, so let’s walk through this code and see what it does.<\/p>\n

      Restating The Query<\/h3>\n

      The get_search_form<\/em> function from WordPress outputs the search form and automatically pre-fills the form with the search term.<\/p>\n

      Displaying Results<\/h3>\n
      \"Screenshot
      Visitors expect search results to look something like Google.<\/figcaption><\/figure>\n

      I’ve simplified the display of any results. NNG points out that virtually all visitors have a mental model of what a search results page looks like: it looks a lot like Google.<\/p>\n

      By using the content.php<\/em> template, TwentyFourteen\u00a0was displaying a lot of extra information, including metadata and comment counts, so I’ve stripped it down to just title and excerpt (another reason why explicit excerpts are so important).<\/p>\n

      When There’s No Matches<\/h3>\n

      So, the major differences are to be seen when there are no search results to display. TwentyFourteen’s default response is to display the search form with the message that there are no search results which means that it neglects most of the NNG recommendations.<\/p>\n

      Adding Did You Mean? Functionality<\/h4>\n

      We are all familiar with Google correcting our mistyped search queries or suggesting alternatives.<\/p>\n

      Whilst we are not going to do the former, we can quite easily do the later by utilising the Wikipedia API. I chose to implement this using client-side code as I don’t want it to hold up the display of the page if the API was slow in responding or not available.<\/p>\n

      You’ll notice that there is a placeholder #didyoumean<\/em> div: this is where any suggestion message will be displayed.<\/p>\n

      At the bottom of the template, before the list_posts<\/em> helper function, there are two script tags. The second is a direct call to the Wikipedia API with the search term being inserted using the get_search_query<\/em> WordPress function.<\/p>\n

      This creates a JSON formatted payload of suggested alternatives, if there are any, that is passed to the didyoumean<\/em> function courtesy of the callback=didyoumean<\/em> querystring parameter on the API call. This also allows us to get around cross-domain scripting errors.<\/p>\n

      The didyoumean<\/em> function simply checks the returned data and if there is a suggestion an appropriate message is inserted into the placeholder.<\/p>\n

      Providing Advice About Modifying Queries<\/h4>\n

      This is simply including content in the page. I’ve made it pretty short and sweet, so alter it to suit your needs.<\/p>\n

      Suggesting Similar Queries That Return Results<\/h4>\n

      Now, this is very sophisticated functionality and overkill for the majority of sites; but providing suggestions for alternative content strikes me as being important, so I’ve gone for a more lateral solution and listed the latest five posts and the five posts with the most comments.<\/p>\n

      This is achieved by setting up the arguments for calling WP_Query<\/em> and then calling the list_posts<\/em> function to run the query and output any results.<\/p>\n

      You can change this to whatever list of posts you think is appropriate. There are plugins that will count visits and provide a list of popular posts<\/a>.<\/p>\n

      Obviously, these lists will work better the longer you’ve been collecting statistics.<\/p>\n\n

      The End Result<\/h2>\n

      So, here’s the end result of our new search template.<\/p>\n

      \"Screenshot
      At least we are now trying to help the visitor stay on the site a bit longer<\/figcaption><\/figure>\n

      It’s certainly not as empty looking as its predecessor and, hopefully, with plenty of links available won’t immediately be moving your visitors on.<\/p>\n

      UPDATE: Automatically Performing The Suggestion Search<\/h2>\n

      If, like Paul (see comment below), you’d like to have the search results for a suggested term automatically displayed then add this code to your functions.php<\/em>:<\/p>\n

      Loading gist 8910606<\/a>

      Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n

      This adds a javascript function to the page that makes an ajax call to WordPress to execute the suggsearch function.<\/p>\n

      You also need to make a small change to searchpage.php<\/em> to replace<\/p>\n


      \nif (sugg) {
      \njQuery('#didyoumean').html('<p>Did you mean <a href=\"?s=' + sugg + '\">' + sugg + '?<\/a><\/p>');
      \n}
      \n<\/code><\/p>\n

      with<\/p>\n


      \nif (sugg) {
      \nsuggestion_search( sugg );
      \n}
      \n<\/code><\/p>\n

      The new javascript function now takes care of outputting the “Did you mean” message. It will only do so if search results are found for the suggestion as there’s not much point in suggesting an empty search.<\/p>\n

       <\/p>\n","protected":false},"excerpt":{"rendered":"

      Keeping visitors on your site is vitally important but an empty search page is akin to telling visitors to “move along, there’s nothing of interest to see here”. Your search results page can work harder than that. <\/p>\n","protected":false},"author":262394,"featured_media":125943,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"blog_reading_time":"","wds_primary_category":0,"wds_primary_tutorials_categories":0,"footnotes":""},"categories":[263],"tags":[186,9803],"tutorials_categories":[],"class_list":["post-125643","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-search","tag-time-on-site"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/125643","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/users\/262394"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=125643"}],"version-history":[{"count":1,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/125643\/revisions"}],"predecessor-version":[{"id":193607,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/125643\/revisions\/193607"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/125943"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=125643"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=125643"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=125643"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=125643"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}