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.

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.