Install Google Custom Search on WordPress blog’s Homepage

Installing Google Custom Search on WordPress Blog is a little bit tricky. Because of many unsuccessful attempt most of WordPress user doesn’t use it. Google custom search engine gives you the power of Google’s advance search algorithm and flexibility to search multiple sites (if you have). You can also increase your earnings by displaying ads in search results.
Here I’ll give you step by step guide for How to install it on your blog’s homepage. Access the search result in a url pattern like – homepageurl/?s=query or homepageurl/?q=query or homepageurl/?search=query or even homepageurl/search.php?q=query. Remember – to achieve the result you must have the authority to edit your theme files.

Step 1. Create a Google Custom Search Engine see Create and Customize Google Custom Search Engine easily for detailed instructions.
Once you have created your search engine click on Look and Feel (see Step 4 in tutorial above) to customize it for WordPress.

Step 2. Select Two Page Layout for your Search Engine. See image below.
customize google custom search for wordpress
Or you can even select the Result Only Layout. Result only option gives you the flexibility to create your own search form. You can design your Submit button or everything you want. The implementation is the same for both options. Click Save & Get Code to get your code.

Step 3. Enter the URL where you want the search result to appear and the query parameter (like s or q or query) that will trigger the search result.
google custom search implimentation in wordpress

whatever you enter in the query parameter field will appear in search URL. If you enter q then the search result URL will be siteurl/?q=searcheditem.

Modify WordPress search.php for Google Custom Search

By default WordPress automatically calls search.php page when ?s= is entered in the URL. So if you set your query parameter to s then it is very easy to implement.

Step 4. Copy the first search form code from the first box and paste it to your active theme’s searchform.php file. You may need to work with your stylesheet to make it look good.

Step 5. Copy and paste the search result code from the second box in your themes search.php page. That’s it! You just successfully installed Google Custom Search Engine in your blog. Link it with your Adsense account to earn more.

If you want any other search parameter for your site then follow this steps.

Using custom query parameter for Custom Search Engine

Step 4. Copy the Custom Search Element from the first box and paste it where you want your Search Box to appear. It is good practice to place this code on the same position in all of your pages otherwise users may get confused.

Step 5. Create a php file, name it cse.php, edit it like below and upload it to your active WordPress themes folder.

<?php get_header(); ?>
//Copy the Search Result Code from the second box and paste it here
<?php get_footer(); ?>

If you have sidebars or other things that you want in search result page then you are free to include them too.

Step 6. You are almost done! You have to edit the index.php page to get your result.
Paste this snippet in index.php page.

<?php
if (isset($_GET['q'])) {
 include (TEMPLATEPATH . '/cse.php');
} else {
//place your previous complete index.php code here
}
?>

That’s it! Save file and upload it. Now search using your newly created Search Engine to see results. Keep note that Google may take time to index your site if it is not already indexed.

Install Google Custom Search in search.php page

If you want to use Google Custom Search like yourblogurl/search.php/?q=query the follow upto Step 2.

Step 3. Change the search result page to yoursite/search.php/?q=.

Step 4. Click Save & Get Code.

Step 5. Copy search from first box and paste it where you want your Search Box to appear.

Step 6. Create php file named search.php. Add this code in the file and upload it to your WordPress site’s root directory.

<?php require('./wp-blog-header.php'); ?>

<?php get_header(); ?>	
//your search result code(second box) here
<?php get_footer(); ?>

Now check your results using the search box you just created.

2 Comments

Add a Comment

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

Notify me of followup comments via e-mail. You can also subscribe without commenting.