In my wordpress theme I have search page designed properly for wordpress native search and this is my form design for searchform.php.
<form method="get" id="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>" role="search">
<label for="s" class="assistive-text"><?php _e( 'Search', 'checkout' ); ?></label>
<input type="text" class="field" name="s" placeholder="<?php _e( 'Search here...', 'checkout' ); ?>" value="<?php echo esc_attr( get_search_query() ); ?>" id="s" />
<input type="submit" class="submit" name="submit" id="searchsubmit" value="<?php esc_attr_e( 'Search', 'checkout' ); ?>" />
</form>
Now, for moths I've tring to use Google custom search functionality while keeping the same form design. But I really didn't find a way to use Google search with existing form element.
Example Google CSE code that I'm using -
<script>
(function() {
var cx = 'partner-pub-123456:78990125';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:search></gcse:search>
But the <gcse:search></gcse:search> is breaking everything. I'm actually trying to use the overlay design of custom search. Can anyone help me out about how I can keep my existing search form design while using Google Custom search?
