Use deafult WordPress/Genesis Search Box For Google Custom Search WordPress

Brad Dalton comments:

All this code?

<script>
(function() {
var cx = '016091704148407788467:gdnr4qsprcm';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//www.google.com/cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:search></gcse:search>


Daniel Yoen comments:

Yes, All :-)

Brad Dalton comments:

I do want to use the default search box, NOT the Google search box styling. Only the Google search function.

Brad Dalton comments:

It displays full width twice in I.E and uses the Google custom search styling.

Displays the correct width in FF but still double with Google styling.

It outputs in the correct location which is good but still needs some work.

Brad Dalton comments:

http://awesomescreenshot.com/07b14n9uf3

Daniel Yoen comments:

Sorry, remove that function, you need this :

<div id="cse" style="width: 100%;">Loading</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
function parseQueryFromUrl () {
var queryParamName = "q";
var search = window.location.search.substr(1);
var parts = search.split('&');
for (var i = 0; i < parts.length; i++) {
var keyvaluepair = parts[i].split('=');
if (decodeURIComponent(keyvaluepair[0]) == queryParamName) {
return decodeURIComponent(keyvaluepair[1].replace(/\+/g, ' '));
}
}
return '';
}

google.load('search', '1', {language : 'en', style : google.loader.themes.MINIMALIST});
google.setOnLoadCallback(function() {
var customSearchControl = new google.search.CustomSearchControl('YourKey');

customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
var options = new google.search.DrawOptions();
options.enableSearchResultsOnly();
customSearchControl.draw('cse', options);
var queryFromUrl = parseQueryFromUrl();
if (queryFromUrl) {
customSearchControl.execute(queryFromUrl);
}
}, true);
</script>

Put this line to loop in search.php

Between

<?php while ( have_posts() ) : the_post(); ?>

and

<?php endwhile; ?>

Hope this help :-)

Daniel Yoen comments:

Don't forget to replace "YourKey" with your own key from google :-)

Brad Dalton comments:

This is the code from the Genesis parent theme:

<?php
/*
WARNING: This file is part of the core Genesis framework. DO NOT edit
this file under any circumstances. Please do all modifications
in the form of a child theme.
*/

/**
* This file handles the search results page.
*
* This file is a core Genesis file and should not be edited.
*
* @category Genesis
* @package Templates
* @author StudioPress
* @license http://www.opensource.org/licenses/gpl-license.php GPL-2.0+
* @link http://www.studiopress.com/themes/genesis
*/

add_action( 'genesis_before_loop', 'genesis_do_search_title' );
/**
* Echo the title with the search term.
*
* @since 1.9.0
*/
function genesis_do_search_title() {

$title = sprintf( '<h1 class="archive-title">%s %s</h1>', apply_filters( 'genesis_search_title_text', __( 'Search Results for:', 'genesis' ) ), get_search_query() );

echo apply_filters( 'genesis_search_title_output', $title ) . "\n";

}

genesis();

//Which search.php file where you referring to? There is no search.php in the child theme.

Daniel Yoen comments:

Sorry, for genesis is a bit tricky, you can follow step by step here :

http://www.wpsyntax.com/wordpress/add-google-cse-to-genesis

hope this help :-)