Improve your WordPress search results with a Google custom search engine

Default avatar.
July 17, 2012
Improve your WordPress searchThere’s no disputing the fact that WordPress is a fantastic piece of software, but one thing it’s never been very good at is search. WordPress has provided its own search functionality for years, but the sad truth is it just isn’t up to scratch; search results are sorted by date rather than relevance, which is practically useless in sites with a lot of content. So how can we improve the search results on a WordPress site? There are plugins you can install to get better results — Relevanssi is a good option if you want to go down this route. However, if you really want to provide the best possible search results on your site, who better to turn to than the king of search - Google.

Harness the power of Google's search technology

With a Google Custom Search Engine, you replace the substandard WordPress search with all the searching power of Google, but limited to your own website, so that your visitors will always get the best possible results when they perform a search on your site. Before you start, it’s worth noting that the free version of Custom Search shows Google sponsored results with your search results, so there will always be some ads on your search results page. This may not be a problem for you, as most searchers can easily distinguish the Google ads from the real search results and will ignore them. In addition, if you use Google AdSense, you can link the ads on your search results page to your AdSense account, so that you will still benefit even if someone clicks on one of the ads. However, if you really don’t want the risk of having people click on the Google ads and leave your site, you can pay from $100 per year for Google Site Search, which allows you to remove the ads, as well as giving you guaranteed support and greater customization options. Definitely worth considering if you run a high revenue site where search is very important.

Setting up your Custom Search Engine

To set up your Google Custom Search Engine, go to google.com/cse and click ‘Create a Custom Search Engine’. Create a custom search engine Setting up the Custom Search Engine is easy. All you have to do is give it a name, a description, and tell it which website you want it to search. Describe your search engine Choose whether you want the free or paid version, accept the terms, and click ‘Next’. On the next page, you can customize the appearance of your search results, so you can change the color of the search button, text, background and borders to make your results integrate seamlessly with the design of your site. Search controls You can also test out your new search engine to make sure it is showing results from your website only. If everything looks OK, click ‘Next’. On the next page, you get the code that you need to paste into your website. However, the code that Google gives you by default is for a single page search engine, with the search box at the top and the results below, much like Google’s own search results pages. This probably won’t be much use for most sites, as you’ll most likely want to have a search box on every page, say in the sidebar, and a separate page for the results. So scroll down to the ‘Next Steps’ section and click the link to ‘Change the look and feel’. Now you can choose from several different layouts. The one you want is ‘Two page’. Click the two-page layout and then scroll down and click ‘Save & Get Code’. Choose a layout Next you need to specify the URL of your search results page. Enter something like http://www.yoursite.com/search-results (you also need to create this page in your WordPress site with the same URL). Specify search results The query parameter is ‘q’ by default. You can leave it as that or change it to something else if you prefer. Now you need to integrate this code into your WordPress site. The easiest way to do that is to copy the first section of code (for the search box) and paste it into a text widget, which you can then simply drag into position in your WordPress sidebar. (If your theme doesn’t use widgets, you’ll need to edit the relevant template file and paste the code in wherever you want the search box to go.) Search box widget The second section of code (for the search results) needs to be applied to your search results page. You can’t just paste it into the page editor in WordPress however, as scripts are not allowed in the WordPress editor, and they won’t work. So you need to create a new page template for your search results page. In your text editor, create a new page template file called search-results.php and give it a template name of Search Results. It should be based on your standard page template, but you need to remove the WordPress loop, and replace it with the Google search results code. This may look different for you, depending on what theme you use. Search results template Upload this new template file to your theme directory, then when you edit your Search Results page in WordPress, you will be able to select the Search Results template from the page template dropdown. Update the page and your new search engine should be ready to go. Open up your site in a browser and test it out! If you want to further customize the design of the search box, you can download the CSS source file by clicking the link at the bottom of the ‘Look and feel’ page. Make your required changes to the CSS, and then copy and paste your new CSS styles into the style section of the search box code.

Tweaking your search engine

There are a few more things you can do to really make the most of your new Google custom search engine.

Remove certain pages from your results

Often there are pages in a WordPress site that you don’t want people to be able to find by searching your site. For example, a thank you page that visitors see after they subscribe to your mailing list. You can prevent Google from indexing these pages by clicking ‘Indexing’ in the left menu, then in the ‘Specific URLs’ section, enter each URL you don’t want to be indexed, preceded by a - symbol, like this: -http://www.yoursite.com/thankyou Specific URLs Of course, you can also use Google Webmaster Tools to request that your pages be removed from Google’s index.

Promote certain pages to the top of your results

There may be certain pages on your site that you would like to promote to the top of your search results for a particular query. For example, you might have a comprehensive guide to SEO that you would like people to find if they search for ‘optimization’ or ‘rankings’. To promote a page, click on 'Promotions' in the left menu, and then click ‘Add’. Enter the queries you want the page to be promoted for, separated by commas (you can also use regular expressions if you’re feeling really clever), then enter a custom title for your page, and the page URL. You can also enter a lifetime for the promotion if you want it to end after a certain date. Click OK. Create a promotion

Synonyms

By clicking the Synonyms link in the menu, you can specify words with the same meaning so that they will show the same results in a search. For example, you could specify that searches for ‘boss’ will return the same results for both ‘boss’ and ‘employer’.

Autocompletions

You can also set up autocompletions to help users search more quickly by suggesting terms for them when they start typing. You can enter specific terms that will be autocompleted or not, as well as specific promotions that will be autocompleted, to show the result as soon as the user starts typing.

Business settings

There are many more features available to you with a Google custom search engine if you pay for Google Site Search. You’ll be able to completely customize your search results, remove the Google branding, and get 24 x 7 email support. For small sites, it’s probably not necessary, but if you run a large site and you want full control over your site search, I’d definitely look into it.

Dan Johnson

Written exclusively for WDD by Dan Johnson. Dan is an artist and blogger, who helps inspire people to make a living from their creativity over at Right Brain Rockstar. Connect with him on Facebook, Twitter or Google+.

Read Next

3 Essential Design Trends, May 2024

Integrated navigation elements, interactive typography, and digital overprints are three website design trends making…

How to Write World-Beating Web Content

Writing for the web is different from all other formats. We typically do not read to any real depth on the web; we…

20 Best New Websites, April 2024

Welcome to our sites of the month for April. With some websites, the details make all the difference, while in others,…

Exciting New Tools for Designers, April 2024

Welcome to our April tools collection. There are no practical jokes here, just practical gadgets, services, and apps to…

How Web Designers Can Stay Relevant in the Age of AI

The digital landscape is evolving rapidly. With the advent of AI, every sector is witnessing a revolution, including…

14 Top UX Tools for Designers in 2024

User Experience (UX) is one of the most important fields of design, so it should come as no surprise that there are a…

What Negative Effects Does a Bad Website Design Have On My Business?

Consumer expectations for a responsive, immersive, and visually appealing website experience have never been higher. In…

10+ Best Resources & Tools for Web Designers (2024 update)

Is searching for the best web design tools to suit your needs akin to having a recurring bad dream? Does each…

3 Essential Design Trends, April 2024

Ready to jump into some amazing new design ideas for Spring? Our roundup has everything from UX to color trends…

How to Plan Your First Successful Website

Planning a new website can be exciting and — if you’re anything like me — a little daunting. Whether you’re an…

15 Best New Fonts, March 2024

Welcome to March’s edition of our roundup of the best new fonts for designers. This month’s compilation includes…

LimeWire Developer APIs Herald a New Era of AI Integration

Generative AI is a fascinating technology. Far from the design killer some people feared, it is an empowering and…