Improving the ux of search in WP

Steven Jones

@stompweb

What is search?

Where should I put the search box?

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

https://wordpress.org/plugins/wp-search-suggest/screenshots/

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

https://wordpress.org/plugins/wp-search-keyword-redirect/

Hide pages

https://wordpress.org/plugins/search-exclude/

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

• Search Criteria
• Number of results
• Did you mean?
  • http://xspell.tk/

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?