Design Firm
Freelance Jobs
We're Social!
Resources

Adding Google SiteSearch to WordPress

By: Kimberly Clark at Via Studio

Submitted on Fri, Jan 13th, 2012 12:28 pm

WordPress is one of the world’s most popular blog/CMS platform, powering 14.7 percent of the web. This comes as no surprise since WordPress has many great features. But built in search feature is not one them. The main drawback of WordPress’s search is that it returns results sorted by date in descending order instead of by relevancy — the way users expect results. Not a great web design solution. There are a multitude of WordPress plugins that help alleviate this issue. However, a better alternative is Google SiteSearch.

With Google SiteSearch you can have all the power of the Google search engine on your website. Google SiteSearch allows you to configure a custom search index for your site. You’re even able to index multiple sites, which is handy if you run an e-commerce site alongside your WordPress site and you want users to be able to search both – something that the WordPress plugins cannot do.

To fully customize the search request and the way the search results are displayed, you’ll have to use the Google WebSearch service along with your custom SiteSearch. I’ll be explaining the process of incorporating Google SiteSearch using the WebSearch service into a WordPress theme.

 

Setting Up Your Search Engine.

The first step is signing up for Google SiteSearch and configuring your search engine. During this process you can define which sites will be indexed, which pages, if any, should be excluded, define synonyms, etc. After the search engine is configured, Google will provide you with a unique id for your search engine. You’ll be using this id in the call to the WebSearch service.

 

Creating a Search Results Page

You will need to create a custom page template in your WordPress theme to handle the WebSearch call and process the XML returned by Google to display your results. You will then need to create a page on your site that uses this template. First, let’s create the template in your theme.

/** * Template Name: Search Results */ 
get_header();
?>



get_footer(); ?>

Modifying searchform.php

We need to modify the default WordPress search form to submit to our new page we just created. If your theme does not have searchform.php, create the file now. Be sure the action of the form is set to the url of the new page.







Google WebSearch service

To retrieve Google WebSearch results, our custom page template will send Google a simple HTTP request. Google then returns search results in XML format. XML-formatted results give you the ability to customize the way search results are displayed. Let’s begin by setting up some parameters that will be used in our request.

// the search term
$q = $_GET['q'];
// the unique id for your custom search index
$cx = '005535192658302783238:0xa3fpdhzuq';
// number of results to display $num = '10';
// for correct pagination, set the start parameter
$start = isset($_GET['start']) ? $_GET['start'] : '0';
// required settings $client = 'google-csbe';
$output = 'xml_no_dtd';
?>

We’ll be using PHP’s DomDocument to load in the XML from Google.

//create a new DomDocument object
$results = new DOMDocument();
// Read in XML from Google using the parameters we set up earlier
$results->load('http://www.google.com/search?client=' . $client . '&
output=' . $output . '&cx=' . $cx . '&num=' . $num . '
&start=' . $start . '&q=' . $q . $sort);
?>

Finally, we’ll use DOMDocument once again to load in our XSL which will transform the XML from Google into HTML, using PHP’s XSLTProcessor.

//load our xslt $xsl = new DOMDocument;
$xsl->load(get_bloginfo('template_directory') . '/google.xslt');
// Configure a transformer
$proc = new XSLTProcessor();
// attach the xsl rules
$proc->importStyleSheet($xsl);
// transform our XML results into HTML and output to the screen
echo $proc->transformToXML($results );
?>

The Google XSL I’ve referenced in the example is the default XSLT file from Google. I’ve modified the HTML that it outputs to match the HTML that is used in the WordPress theme to display an archive of posts. That way you get the styles for search results for free.

 

Joel Jacob designs websites at VIA Studio and Tweets at  @_viastudio_

Joel uses his mastery of XHTML and CSS to ensure our client’s websites are cross-browser compatible, accessible and adhere to all the latest web standards. His exceptional JavaScript skills allow him to create rich and responsive User Interfaces. He’s a little sensitive about the name though; so you may just want to call him Joel Jacob…it’s for your own safety…we assure you.

About the Author

Kimberly Clark
Via Studio
Kim Clark joined VIA Studio in 2008, and quickly became the go-to-gal for Project Management and Content Strategy. Kim helps clients navigate the trials and tribulations of web development projects with the experience of a seasoned professional. From pre-development goal specification to post development content implementation, she has a deep understanding of the tools of the trade -social media, website analytic trend data and search engine marketing strategies. Kimberly loves data and statistics, and she uses that information to guide the development of unique, original and interesting web content that keeps visitors engaged and interacting. She also holds a Master's degree in Public Health from the University of Louisville. For more information, please visit Via Studio's Website

Elite Firms

Premier Agency's

Top Design Firms

Directory Sponsors

Write for Us

Are you a creative genius? Do you want to share your gift with others and enjoy recognition as an industry leading author? Write for us and get your voice heard.

Premiere Agencies - Highly Recommended by DesignFirms
Quick Links
Site Sponsors
Recent Echos!

FEATURED WEB AND MOBILE AGENCY OF THE WEEK
Learn more about Hudson Integrated Web Agency and the design services they provide. Browse...

Submit Your Best Work to the DesignFirms Awards Program
Since 2003, we've been hand selecting only the very best in design out of thousands of submissions...

Web Award Winner: Axeela
The Official website for the singer Axeela. View more award winners and submit your design to see...

View the Top 100 Design Firms
Everyone has a list. However, DesignFirms feels that only real customers should be able to decide...

Popular Cities
Hudson Web Design Agency

©2003-2020 DesignFirms, All Rights Reserved.
A professional web design, mobile development and marketing company directory.

Directory | Get a Quote | Leads | Jobs | Reviews | Portfolios | Design Awards | Blogs | Articles | Echo | Advertise

Page Generated in 0.25 seconds