Add Google custom search API to your WordPress search

2. Activate Plugin

Activate the Exclude Pages plugin.

3. Modify Searchbox

We’re going to edit your WordPress default searchbox. Using your FTP software browse into your WordPress folder. It may varies to where you put it in.

Anyways, go to wp-content -> themes -> twentyeleven. Look for ‘searchform.php’ and open it with HTML editors. At this point, I suggest you back up the file first or rename it just in case you still need it.

<?php
/**
 * The template for displaying search forms in Twenty Eleven
 *
 * @package WordPress
 * @subpackage Twenty_Eleven
 * @since Twenty Eleven 1.0
 */
?>
    <form method="get" id="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>">
        <label for="s" class="assistive-text"><?php _e( 'Search', 'twentyeleven' ); ?></label>
        <input type="text" class="field" name="s" id="s" placeholder="<?php esc_attr_e( 'Search', 'twentyeleven' ); ?>" />
        <input type="submit" class="submit" name="submit" id="searchsubmit" value="<?php esc_attr_e( 'Search', 'twentyeleven' ); ?>" />
    </form>

Add your Google searchbox codes to it. Compare the difference. Look how I modify the codes.

<?php
/**
 * The template for displaying search forms in Twenty Eleven
 *
 * @package WordPress
 * @subpackage Twenty_Eleven
 * @since Twenty Eleven 1.0
 */
?>
    <form method="get" id="searchform" action="http://myblog.com/search">
        <label for="s" class="assistive-text"><?php _e( 'Search', 'twentyeleven' ); ?></label>
                <input type="hidden" name="cx" value="partner-pub-xxxxxxxxxxxxxxxx:xxxxxxxxxx" />
                <input type="hidden" name="cof" value="FORID:10" />
                <input type="hidden" name="ie" value="UTF-8" />
        <input type="text" class="field" name="q" id="s" placeholder="<?php esc_attr_e( 'Search', 'twentyeleven' ); ?>" />
        <input type="submit" class="submit" name="sa" id="searchsubmit" value="<?php esc_attr_e( 'Search', 'twentyeleven' ); ?>" />
    </form>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("elements", "1", {packages: "transliteration"});</script>
<script type="text/javascript" src="https://www.google.com/cse/t13n?form=cse-search-box&t13n_langs=en"></script>
<script type="text/javascript" src="https://www.google.com.my/coop/cse/brand?form=cse-search-box&amp;lang=en"></script>

4. Create Page Template

Before we create a new page for the search results, we’re going to create a page template by removing the sidebar. If your theme doesn’t have one, that is. Take note that TwentyEleven default template makes things easy for you because it’s a full width page with sidebar removed by default. You can skip this step but if you wish to learn how to create a no-sidebar template then read how I do it.

To create a page template with no sidebar. Go to your theme folder and look for ‘page.php’ file. Open and edit with notepad, wordpad or html editor. We need to rename the template in the ‘get_header’ section by adding comments to it. Refer to examples below:

<?php
/**
 * The template for displaying all pages.
 *
 * This is the template that displays all pages by default.
 * Please note that this is the WordPress construct of pages
 * and that other 'pages' on your WordPress site will use a
 * different template.
 *
 * @package WordPress
 * @subpackage Twenty_Eleven
 * @since Twenty Eleven 1.0
 */

get_header(); ?>

Add the comments ‘Template Name:No Sidebar’ to it. The title name is pretty standard and it worked perfectly. You can try other naming methods (lowercase, uppercase, etc) or name it to your liking. I can’t guarantee it will work though.

<?php
/**
 * Template Name:No Sidebar
 *
 * @package WordPress
 * @subpackage Twenty_Eleven
 * @since Twenty Eleven 1.0
 */

get_header(); ?>

We’re not done yet. Scroll further down the line of codes and look for ‘<?php get_sidebar(); ?>’. Remove that lines completely or just comment it out like so – ‘<?php //get_sidebar(); ?>’. Finally, save the file by using ‘save as’ to ‘no-sidebar.php’. Now you’re done and one new page template is created.

       
<div id="primary">
            <div id="content" role="main">

                <?php the_post(); ?>

                <?php get_template_part( 'content', 'page' ); ?>

                <?php comments_template( '', true ); ?>

            </div><!-- #content -->
        </div><!-- #primary -->
<?php //get_sidebar(); ?>
<?php get_footer(); ?>