Improving the ux of search in WP

Steven Jones

@stompweb

What is search?

Where should I put the search box?

Where should I put the search box?

Do I need a search?

Do I need a search?

  • How much content do I have?
  • Are searches yielding sufficient results?
  • Are searches providing relevant results?
  • Can you improve navigation on the site instead?

Keyword search

  • Make labels/placeholder clear
  • Search button label
  • Suggestive Search

Suggestive Search

Advanced Search

  • Visibility
  • Use correct UIs
  • Using the correct data
  • Faceted search

Use Correct UI

  • Text
  • Select
  • Checkboxes
  • Radio Buttons
  • Number

Use Correct Data

  • Post title
  • Post Content
  • Dates
  • Taxonomies
  • Meta

Faceted Search

Pre-determined, dependant taxonomies

 

Example

https://facetwp.com/demo/cars/

Search Query

  • Change post types
  • Use 'built-in' URL parameters
  • Custom Queries
  • Order of the results
  • Redirect to landing page
  • Hide pages
  • Pagination
  • Keyword Stemming

Change post types

function sj_change_post_type_for_search($query) {

    if ( !is_admin() && $query->is_main_query() ) {
    	
    	if ($query->is_search) {
      	 
            $query->set('post_type', array('events', 'post'));
    	}

    }
}

add_action('pre_get_posts','sj_change_post_type_for_search');
<input type="hidden" name="post_type" value="events" />

Built in url Parameters - Categories

http://www.example.com/?cat=castles
<form action="<?php echo esc_url( home_url( '/' ) ); ?>">
    <select name="cat">
        <option value="houses">Houses</option>
        <option value="flats">Flats</option>
        <option value="castles">Castles</option>
    </select>
</form>

BUILT IN URL PARAMETERS - Taxonomies

http://www.example.com/?cms=wordpress
<form action="<?php echo esc_url( home_url( '/' ) ); ?>">
    <input type="radio" name="cms" value="wordpress">WordPress<br/>
    <input type="radio" name="cms" value="drupal">Drupal<br/>
    <input type="radio" name="cms" value="magento">Magento
</form>

Complex queries

'meta_query' => array(
        'relation' => 'OR',
        array(
            'relation' => 'AND',
            array(
                'key' => 'colour',
                'value' => 'Black',
            ),
            array(
                'key' => 'animal',
                'value' => 'Cat',
            ),
 
        ),
        array(
            'relation' => 'AND',
            array(
                'key' => 'colour',
                'value' => 'Brown',
            ),
            array(
                'key' => 'animal',
                'value' => 'Dog',
            ),
 
        ),
    ),

Order of results

function sj_change_order_of_search_results($query) {

    if ( !is_admin() && $query->is_main_query() ) {
    	
    	if ($query->is_search) {
      	 
            $query->set('orderby', 'name');
            $query->set('order', 'ASC');
    	}

    }
}

add_action('pre_get_posts','sj_change_order_of_search_results');
  • News - by date DESC
  • Events by date ASC (meta)
  • Directory - by name ASC
  • Products - by price (meta)

 

function sj_redirect_keywords($query) {

    if ( !is_admin() && $query->is_main_query() ) {
    	
    	if ($query->is_search) {
      	 
            if ('dyson' == santitize_text_field($_GET['s']) {

                wp_redirect( home_url('dyson') ); exit;

            }
    	}

    }
}

add_action('pre_get_posts','sj_redirect_keywords');

Redirect to landing page

Hide pages

function sj_hide_pages($query) {

    if ( !is_admin() && $query->is_main_query() ) {
    	
    	if ($query->is_search) {
      	 
            $wp_query->set('post__not_in', array( 28 ) );

    	}

    }
}

add_action('pre_get_posts','sj_redirect_keywords');

Pagination

function sj_change_number_of_results_per_page($query) {

    if ( !is_admin() && $query->is_main_query() ) {
    	
    	if ($query->is_search) {
            $query->set('posts_per_page', 50);
    	}

    }
}

add_action('pre_get_posts','sj_change_number_of_results_per_page');

Keyword stemming

Running = Runner = Run

Search results

  • Show information about your search
  • Separate post types
  • Style per post type, category, taxonomy
  • Information not links
  • No results

Show information about the search

 

Seperate Post Types

<?php 
/* Separate the pages and documents into two, separate arrays */
$documents = wp_filter_object_list( $wp_query->posts, array('post_type' => 'documents')); 
$pages = wp_filter_object_list( $wp_query->posts, array('post_type' => 'page'));


/* If they exist, print out the documents */
if (!empty($documents)) : ?>    
    <h2>Documents</h2>
    <ul>
        <?php foreach($documents as $post) : setup_postdata( $post ); ?>
            <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
        <?php endforeach; wp_reset_postdata(); ?>
    </ul>
endif;

/* If they exist, print out the pages */
if (!empty($pages)) : ?>    
    <h2>Pages</h2>
    <?php foreach($pages as $post) : setup_postdata( $post ); ?>
        <div class="page">
            <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
            <?php the excerpt(); ?>
        </div>
    <?php endforeach; wp_reset_postdata();
endif; ?>

Styles by post types, category taxonomy

  • Use post_class()
    • post-type
    • category-hotels
    • tax-wordpress 
  • Use conditionals
    • get_post_type()
    • has_category
    • has_term

Information, not links

No results

  • Show instructions
  • Show sitemap

Analysis

  • Add to Google Analytics
  • Analysis data
  • Improve site

Add to google analytics

Analyse

 

  • What are people searching for?
  • Bounce rate
  • Conversion rate

Improve

 

  • Make popular search items more visible
  • Add new content based on demand
  • Reduce 'no results found'

Impove the search

  • Search WP
  • Swifttype
  • Elasticsearch

 

Questions?