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: Dynamically changing the search result sort order with WordPress

Dynamically changing the search result sort order with WordPress

By default, Swiftype returns search results sorted by relevance. However, sometimes you would like to change the search result sort order, for example to return the most recent results first. With the Swiftype Search plugin, this can be accomplished with a few lines of code.

You can make user interface look however you like; if you follow the instructions in this guide, you'll get a tabbed user interface like this:

Example of a tabbed sort order selection UI

First, in your theme's functions.php file, create a swiftype_search_params filter. This filter lets you change the parameters submitted to the Swiftype API. The filter will check the order_by query parameter. If order_by is set to date, then the sort field will be set to timestamp and the sort direction will be set to desc so that newer posts will be sorted first. (The timestamp field stores the publication date of a WordPress post — see the WordPress customization guide for more details.)

Example - Changing the sort field and direction based on a URL parameter
function swiftype_sort_order_filter( $params ) {
  // Sort on the timestamp field if the order_by parameter is "date"
  // Sorting by _score is the default, so if "order_by" isn't equal to "date", it's ignored.
  if ( $_GET['order_by'] == 'date' ) {
    $params['sort_field[posts]'] = 'timestamp';
    $params['sort_direction[posts]'] = 'desc';
  }

  return $params;
}

add_filter( 'swiftype_search_params', 'swiftype_sort_order_filter' );
  

Once this function is added, you should be able to do a search, then add &order_by=date to the URL and see the result order change.

However, users aren't going to know about this great new functionality unless there's some way for them to change the sort order on the site. You can implement this however you like: just add a link or form that will add the order_by=date parameter value to the search URL.

One way would be to modify the search.php to add links for "Relevance" and "Date" relevance types. The WordPress functions remove_query_arg and add_query_arg are used to modify the current URL to remove or add the order_by parameter.

<header class="page-header">
  <h1 class="page-title"><?php printf( __( 'Search Results for: %s', 'twentytwelve' ), '<span>' . get_search_query() . '</span>' ); ?></h1>
  <ul>
    <li>
      <a href="<?php echo remove_query_arg( 'order_by' ); ?>" class="<?php echo (remove_query_arg( 'order_by' ) == $_SERVER["REQUEST_URI"] ? "current" : ""); ?>">Relevance</a>
    </li>
    <li>
      <a href="<?php echo add_query_arg( 'order_by', 'date' ); ?>" class="<?php echo (add_query_arg( 'order_by', 'date' ) == $_SERVER["REQUEST_URI"] ? "current" : ""); ?>">Date</a>
    </li>
  </ul>
</header>

Finally, add some CSS to make these links look like tabs. The currently active link will be highlighted.

ul.search_order {
  list-style: none;
  padding:0;
  margin:0;
}

ul.search_order li {
  display: inline;
  border: solid;
  border-width: 1px 1px 0 1px;
  margin: 0 0.5em 0 0;
  width: 400px;
}

ul.search_order li a {
  padding-right: 200px;
  padding-left: 20px;
  text-decoration: none;
}

ul.search_order li a.current {
  background: aliceblue;
}