How to add Google Custom Search Engine in WordPress Twenty Thirteen theme?

SHARE

Out of the box, WordPress is a great CMS solution. It has a ton of features which are awesome but one of the feature that I really found lacking was the default search capability of WordPress. Not that it is non-functional, but it is not very accurate. It gave me results which were less relevant to my search query. There are plugins available which can provide great search capabilities. But like me if you do not want to use a plugin, there is the option of using Google search capability. We can easily replace the default WordPress search capability and instead add Google Custom Search Engine on your blog.

Add Google Custom Search Engine on WordPress blog

The easiest way to place Google Custom Search Engine on your blog is by creating a search engine unit in AdSense. If you do not have an AdSense account, you can use Google Custom Search Engine to create a search engine unit. In this tutorial, I will use an AdSense for Search unit and show how you can customize it to replace the default WordPress search box. I am modifying the Twenty Thirteen theme that is applied to my blog but you can as easily adapt it and customize the theme that you are using.

Copy the Google Custom Search Engine code and paste it in a file named searchform.php . If this file does not exist in your theme folder, create it. Do not modify or create the file in your main theme, use a child theme instead. Enclose the code inside a <div> tag. Save the file.

The code should look like below,

<div>
<form action="http://www.google.com" id="cse-search-box" target="_blank">
<div>
<input type="hidden" name="cx" value="partner-pub-xxxxxxxxxxxxxxx:xxxxxxxxx" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="55" />
<input type="submit" name="sa" value="Search" />
</div>
</form>
</div>

Note: Ensure that you have removed the JavaScript line at the end of the snippet. This line is used to add the Google watermark background to the search box. We do not want to use this. Instead, we will add our blog name as the watermark.

At this point, if you navigate to your site, the Google Custom Search Engine bar will be visible but it is not properly aligned to the right. Instead, it is floating just below the navigation menu like shown below,

Google Custom Search Engine bar

To align it to the right like the default WordPress search bar, add the class search-form to the outer div. This will style the search bar to align to the right nicely.

If you notice, the search box does not have a watermark text. To implement it, we need to add couple of JavaScript lines to the search text box. These lines will basically set the value of the box to Search 1UpBlogger… when it is blank else to the value that a user has entered. We also set the default value of the textbox to Search 1UpBlogger… when our blog loads. You can set it to the name of your blog. The code to add is in the

At this point, the final code should look like below,

 <div class="search-form">
<form action="http://www.google.com" id="cse-search-box" target="_blank">
  <div>
    <input type="hidden" name="cx" value="partner-pub-5421783536796087:4691424035" />
    <input type="hidden" name="ie" value="UTF-8" />
    <input type="text" name="q" size="55" value="Search 1UpBlogger&hellip;" onblur="if ('' === this.value) {this.value = 'Search 1UpBlogger&hellip;';}" onfocus="if ('Search 1UpBlogger&hellip;' === this.value) {this.value = '';}"/>
    <input type="submit" name="sa" value="Search" />
  </div>
</form>
</div>

You can directly copy the entire code shown above and paste it in the searchform.php file and get it working.

If you navigate to your blog now, the search bar is nicely aligned to the right and the search box also has your watermark text in it.

I hope you found this post helpful. Please feel free to get in touch with me if you face any challenge in implementing the approach here, I will be more than happy to help you out.

Your turn?

  • Have you implement Google Custom Search Engine on your blog or are you still using the default WordPress search functionality?

Do share your inputs with me using the comments section below.

If you liked this post, please share it using the social media share buttons above.

2 thoughts on “How to add Google Custom Search Engine in WordPress Twenty Thirteen theme?

  1. Hey, Zubair.

    Why not put the search results on your site rather than redirecting them somewhere else ?

    And, do you have any good alternatives to google custom search that also makes money :)

    Regards,
    Jotpreet.

    1. Hi Jotpreet,

      The option is there to show the results on the same page but I’m opening them in a new window.

      AdSense search can make you money, there are other alternatives as well but they are not a good source and definitely not worth spending time on.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>