Creating a Better WordPress Search  Solution

/

It’s great that WordPress has a search feature built in, but it’s not the most powerful engine and has various usability issues. Here’s a few suggested improvements you can do to improve your WordPress sites searchability.

Sort results by relevance instead of date

The pre-packaged WordPress search will order it’s results by date rather than relevance. Normal search engines sort their results by relevance, as you would expect. To change this I recommend using one of following plugins:

Design your search results like Google

nextup search resultsWhy re-invent the wheel when you can follow the leader? Google has carefully planned out the placement of everything on their search results page. Using this to our advantage we can create similar search results page designs in WordPress. Using a little CSS and PHP/XHTML you can easily transform your search results to look similar. Here’s what I’ve used for the NextUp Careers example just mentioned:

PHP/XHTML

<div id="post-<?php the_ID(); ?>" class="result">
    <h3><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h3>
    <div class="result-entry">
        <?php if (function_exists('relevanssi_the_excerpt')) { relevanssi_the_excerpt(); } else { the_excerpt(); } ?>
    </div>
    <span class="permalink"><?php the_permalink() ?></span>
</div>

CSS

span.relevanssi-query-term {
    background:yellow;
}
.result {
    margin:0 0 20px 0;
}
.result h3 {
    font-size:15px;
    border-bottom:none;
    margin:0 0 4px 0;
}
.result .result-entry {
    line-height:1.5em;
}
.result .permalink {
    font-size:12px;
    color:#86B443;
    margin-top:6px 0 0 0;
    display:block;
    line-height:1.5em;
}

By displaying results like this it makes it much easier to scan the page, allowing people to get where they want faster. Keep in mind that I set the search terms to be highlighted with a class of relevanssi-query-term on the Relevanssi plugin settings page.

Highlight search terms in the results

relevanssi wordpress searchIf you’re using Relevanssi or Search Unleashed, this feature is built in under the plug-in settings page. If your not, then check out:

Adding pagination

wordpress paginator 3000There are a few ways to do this. I would recommend using the following plugins:

I’ve been using Thematic to drive many of my CMS installations, so WP-PageNavi has become my pagination plugin of choice. Below is the PHP, XHTML and CSS code I use to implement it on my sites.

PHP/XHTML

 if(function_exists('wp_pagenavi')) { // if PageNavi is activated ?>

<?php wp_pagenavi(); // Use PageNavi ?>

<?php } else { // Otherwise, use traditional Navigation ?>

<div class="navigation">
    <span class="older"><?php next_posts_link('&laquo; Older Entries') ?></span>
    <span class="newer"><?php previous_posts_link('Newer Entries &raquo;') ?></span>
</div>

<?php } // End if-else statement

CSS

/* =PageNavi
-------------------------------------------------------------- */
/* Using specificity to override PageNavi CSS */
#wrapper .wp-pagenavi {
    margin:0;
    padding:0.5em 0;    
}
#wrapper .wp-pagenavi a, 
#wrapper .wp-pagenavi span {
    border:1px solid #ccc;
    color:#666;
    font-style:normal;
    margin:0 .375em;
    padding:0.5em 0.75em;
}
#wrapper .wp-pagenavi a:visited {
    border:1px solid #ccc;
    color:#666;
}
#wrapper .wp-pagenavi a:hover {
    border:1px solid #FCB701;
    background:#FCB701;
}
#wrapper .wp-pagenavi a:active {
    border:1px solid #ccc;
    color:#FCB701;
}
#wrapper .wp-pagenavi span.pages {
    border:none;
    color:#666;
    margin:0 .375em 0 0;
    padding:0;
}
#wrapper .wp-pagenavi span.current {
    color:#fff;
    font-weight:bold;
    background:#ccc;
    border:1px solid #ccc;
    font-weight:normal;
    margin:0 .375em;
    padding:0.5em 0.75em;
}
#wrapper .wp-pagenavi span.extend {
    background-color:#FFFFFF;
    border:1px solid #000000;
    color:#000000;
    margin:2px;
    padding:2px 4px;
}

Add spelling suggestions

Similar to the way Google works, it often helps to provide people with corrections to common spelling mistakes. To add this handy feature check out the following plug-ins:

Record what people are searching for

If you actively track what people search for on your site you can begin to improve the way you title and tag your articles. When you start to do this for your site your general search engine rankings will likely improve as well. To start tracking your search queries checkout the following plugins:

Other great articles about search enhancements and improvements

What do you do to improve the search on your WordPress website?

Let me know and I’ll add your suggestions to this article, with a shout out and link to your site.