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:

• Relevanssi replaces the WordPress search with a partial-match search that sorts the results based on relevance instead of date. It is a partial match search, so if user inputs several search terms, the search will find all documents that match even one term, ranking highest those documents that match all search terms. All in all this is a very smart search enhancement to use, and one that I choose to use on all CMS installs I build.
• Search Unleashed by Urban Giraffe is a more advanced search algorithm tool allowing for more customization in how your search engine works. It extends the standard WordPress search with customizable search algorithms, including MySQL’s full text and Zend’s Lucene. It includes a word highlighting feature along with the ability to search across posts, pages, comments, titles, URLs, and meta-data.
• Search Reloaded by Semiologic, as suggested by Yoast, will let you use Yahoo! to power your site’s search engine.
• Google Custom Search will use Google to power your WordPress search engine. The downside to this approach is the lack of design control you have over the output of results.
• Sphider for WordPress will use an entirely new search engine within WordPress. Sphider is a lightweight PHP/MySQL search engine / spider tool. Sphider supports all standard search options, but also includes a plethora of advanced features such as word auto-completion, spelling suggestions etc.

Design your search results like Google

Why 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

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

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

• Highlight Search Terms will highlight search terms within WordPress generated search results or when referrer is a Google, Yahoo or Lycos search engine within posts using jQuery.

Adding pagination

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

• WP-PageNavi adds a more advanced paging navigation your WordPress blog. Open source themes like Thematic have begun to accept this plugin as a pagination standard. You can see an example of it in action at Lester Chan’s demo page.
• Paginator will add the “paginator3000” paging navigation to your WordPress blog. A great example of how this pagination effect works can be seen on Made in England (scroll all the way to the bottom).

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 ?>






	
	

/* =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;
}