Add Google Custom Search to Genesis Framework Theme

If you would like to replace the default WordPress search with Google custom search here is the method I use. This implementation of Google custom search is reliant on using the Genesis Framework.

1. Create a Google custom search engine

Go to http://www.google.com/cse and create a custom search engine for your site. Make sure that the look and feel layout setting is set to Results only as shown in the image below.

Google Custom Search

2. Add the following 2 code sections to your genesis child theme functions.php

Customize the search form text

add_filter( 'genesis_search_text', 'wpselect_search_text');
function wpselect_search_text() {
return esc_attr__( 'Google Search ...', 'genesis' );
}

Customize the search form

add_filter( 'genesis_search_form', 'wpselect_search_form', 10, 4);
function wpselect_search_form( $form, $search_text, $button_text, $label ) {
$onfocus = " onfocus="if (this.value == '$search_text') {this.value = '';}"";
$onblur = " onblur="if (this.value == '') {this.value = '$search_text';}"";
$form = '
<form method="get" class="searchform search-form" action="' . home_url() . '/google-cse/" >
' . $label . '
<input type="text" value="' . esc_attr( $search_text ) . '" name="q" class="s search-input"' . $onfocus . $onblur . ' />
<input type="submit" class="searchsubmit search-submit" value="' . esc_attr( $button_text ) . '" />
</form>
';
return $form;
}

3. Create a WordPress Page Template

This page template needs to be created in a new php file in your genesis framework child theme directory. This php file can have any file name, but I use page_google_search.php

You will need to insert the JavaScript code provided by your Google custom search engine in the code below where it says INSERT GOOGLE CUSTOM SEARCH JAVASCRIPT CODE HERE.

<?php
/**
* Template Name: Google Custom Search
* Description: Google Custom Search
*/
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );
remove_action( 'genesis_post_content', 'genesis_do_post_content' );
add_action( 'genesis_post_content', 'wpselect_google_cse_content' );
function wpselect_google_cse_content() { ?>
INSERT GOOGLE CUSTOM SEARCH JAVASCRIPT CODE HERE
<?php
}
genesis();

4. Create WordPress page using the Google Custom Search template

Finally you need to create a new WordPress page using the Google Custom Search template. This WordPress page needs to have a permalink of google-cse. If you would like to use a different permalink you can change the code in Customize the search form above.

You should now be able to use the standard WordPress search widget and the search will be forward to the Google custom search results page created above.

18 thoughts on “Add Google Custom Search to Genesis Framework Theme

  1. Hi,

    I have tried your guide, but I can’t get it to work.

    I have putted the page_google_search.php in my child theme news. I also went to google custom search and picked results only.

    I pasted the javascript function….. where it said INSERT GOOGLE CUSTOM SEARCH JAVASCRIPT CODE HERE

    And I have added the step 1 and 2 to news functions.php file.

    Is there anything I’m missing?

    Like

      1. Anton

        I did this, so when I make a search now i get redirected to the page where the results should be, but there isn’t anything. Only the title of the page i made, it doesn’t even say “No results for bla bla”

        Should i also add something to the page itself?

        Like

      2. Did you select the google custom search template for the results page? The template was created in step 3 and you should have substituted the javascript code provided to you from the google custom search engine you created.

        Like

      3. Anton

        Great, thought it was more of a technical workaround – but that was surely easy. Thank you! 😀

        However, why is the search result both showing on the page, but also as above the header?

        Like

      4. You probably have the “<gcse:searchresults-only></gcse:searchresults-only>” code listed twice in your template. Where it says “INSERT GOOGLE CUSTOM SEARCH JAVASCRIPT CODE HERE” you should paste everything except the above section of code. Sorry for the confusion, I will update the instructions to clarify this. This should solve your issue.

        Like

    1. It looks like your site has a different permalink structure that adds .html to your permalinks. You need to change the code in step 2 above to customize the search form and on line 6 change /google-cse/ to /google-cse.html That should work.

      Like

      1. Thank you so much for your help. It seems to work. Does Google have to index the site in order for the search to work? I searched for a word that I know exists on the site but it says No Results. My site is not indexed on Google yet.

        Thank you,

        Lobsang

        Like

  2. User

    I am using genesis theme and eleven40 as child theme for my website. I tried that code, it worked on Chrome and Firefox for me but not on IE and safari.

    Like

    1. Karen

      Well, I thought it worked perfectly but now I’m getting redirects:

      Redirect Notice

      The previous page is sending you to an invalid url ().

      If you do not want to visit that page, you can return to the previous page.

      Any thoughts?

      Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.