5 Easy Steps to Embed Google Custom Search into Wordpress

Wordpress is most popular blogging platform and Google is most popular search engine. Both are exceptionally good. There is no doubt in it. But the problem arise when Wordpress want to do the work of Google and vice versa. So let us keep things in order and let us make Google do its work and so as with wordpress. In a few minutes you are going to see how to implement Google custom search into your wordpress blog. Before we start let me discuss why we have to shift from Wordpress search to Google search.

Why Google?

• Google’s search algorithm is the best and till now no one defeated it.
• The results are quick and very accurate. Where as wordpress search is slow and search results are not very accurate as Google.
• $$$ Money money money $$$ : By integrating Adsense into Google custom search you can boost your income.

Step-by-step guide to add Google Custom Search into your Wordpress template :

1. Create account at Google Custom Search. After creating the account login to it and select Get code under Control Panel.
2. Select the second option, Host results on my website using an iframe. Specify the URL as below http://example.com/search/. Also specify the space where you want to place your Adsense ads.
3. You can see two codes, one for search box and other for search results. Copy the search box code and place it anywhere you like (Preferably in sidebar or navbar).
4. Now create a page with name Search and make sure the permalink is same as the above, i.e. http://example.com/search/
5. With Notepad create a file with name search.php and paste the following code in it.

<?php get_header(); ?>

Your search results code goes here

<?php get_footer(); ?>

Replace “Your search results code goes here” with the actual code. That’s it. Now do a sample search to test whether everything is fine or not.

Styling search results page :

1. Aligning search template to the center of the page :

Here is a Sample search results code :

<div id="cse-search-results"></div>
<script type="text/javascript">
var googleSearchIframeName = "cse-search-results";
var googleSearchFormName = "cse-search-box";
var googleSearchFrameWidth = 600;
var googleSearchDom = "www.google.com";
var googleSearchPath = "/cse";
</script>
<script type="text/javascript" src="http://www.google.com/afsonline/show_afs_search.js"></script>

To align the search results at center of the page just replace <div id="cse-search-results"> with <div id="cse-search-results" align="center" >.

2. Add space between header and search results :

If you saw the test search results, you can observe that the search results are touching the header and they look ugly. Make it look professional by adding <br> at the first of the code and </br> at last. See below :

<?php get_header(); ?>

<br><div id="cse-search-results" align="center" ></div>
<script type="text/javascript">
var googleSearchIframeName = "cse-search-results";
var googleSearchFormName = "cse-search-box";
var googleSearchFrameWidth = 600;
var googleSearchDom = "www.google.com";
var googleSearchPath = "/cse";
</script>
<script type="text/javascript" src="http://www.google.com/afsonline/show_afs_search.js"></script></br>

<?php get_footer(); ?>

3. Adding search form at the top of the search results :

By adding search form at the top of the search results page your visitors can search more without going back. form just add the search box code above the search results code.

<?php get_header(); ?>

<br>search box code goes here

<div id="cse-search-results" align="center" ></div>
<script type="text/javascript">
var googleSearchIframeName = "cse-search-results";
var googleSearchFormName = "cse-search-box";
var googleSearchFrameWidth = 600;
var googleSearchDom = "www.google.com";
var googleSearchPath = "/cse";
</script>
<script type="text/javascript" src="http://www.google.com/afsonline/show_afs_search.js"></script></br>

<?php get_footer(); ?>

You can also add align=”center” inside div (<div align="center">) of the search box code also to align search box along with search results in the middle.

This is the method I followed to integrate Google into Wordpress. You can take look on how it works by doing a sample search. If you have difficulties in following the above tutorial let me know, I’ll try to clarify the doubt.

P.S : The codes above are only sample ones

. They are just for reference to show how it should look like. Don’t directly copy and paste them in your blog. They won’t work. Please use your Google Custom Search Engine codes.

Like this post! you may want to subscribe to my RSS feed or through email. You can become our fan on Facebook. Follow us on Twitter. Thanks for visiting!