Search Button in Header Not Working with Adsense for Search

Just bought the Newspaper theme – great job!

Minor problem at http://www.dcextendedmultiverse.com/. Everything seems to work fine, except the search on the header. When you click on the magnifying glass so the Ajax search drops down, it works fine with the default theme settings. I had AdSense for Search in there so that the drop-down displays the Google Search Box, but it stopped working with the upgrade.

It looks fine, but when you click in the search field, it triggers something that makes the search box instantly vanish before a user can input their query.

The AdSense for Search works fine when I put it in the sidebar, so I’ve included one so you may see what the intended result is. I just don’t know why I’ve run into this problem all-of-a-sudden.

From “parts/header/header-menu.php”, I simply removed:

<input id="td-header-search" type="text" value="<?php echo get_search_query(); ?>" name="s" autocomplete="off" /><input class="wpb_button wpb_btn-inverse btn" type="submit" id="td-header-search-top" value="<?php _etd('Search', TD_THEME_NAME)?>" />

… and replaced it with:

<style type="text/css">
@import url(//www.google.com/cse/api/branding.css);
</style>
<div class="cse-branding-bottom" style="background-color:#FFFFFF;color:#000000">
<div class="cse-branding-form">
<form action="http://www.dcextendedmultiverse.com/search-results/" id="cse-search-box">
<div>
<input type="hidden" name="cx" value="partner-pub-XXXXXXXXXXXXX" />
<input type="hidden" name="cof" value="FORID:10" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="15" />
<input type="submit" name="sa" value="Search" />
</div>
</form>
</div>
<div class="cse-branding-logo">

</div>
<div class="cse-branding-text">
Custom Search
</div>
</div>

Any help would be enormously appreciated.

You can try this tutorial: http://www.getcooltricks.com/wordpress/google-cse-integration-to-newspaper-wordpress-theme/

I had created a code to work in the header. Use that instead of the code. For better result use the code created in Google CSE. You may loose the Ajax search function.
Thanks.

• This reply was modified 10 years by Pradeep Augustine.

The code works properly in the header now.
Check this now: http://www.getcooltricks.com/wordpress/google-cse-integration-to-newspaper-wordpress-theme/

Pradeep – this is really great, thank you. I’ve been wanting to do this…

BUT, I followed the initial instructions (changed header-menu.php in the Child Theme) but it made the search icon disappear from the main menu?

Here’s the code I used. Any thoughts?

<div class="header-search-wrap">
<div class="dropdown header-search">
<div class="td-drop-down-search" aria-labelledby="td-header-search-button">
<form role="search" method="get" class="td-search-form" action="/visitor-sitemap">
<div class="td-head-form-search-wrap">
<input id="td-header-search" type="text" value="Search" name="q" class="s search-input" onfocus="if (this.value == 'Search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search';}" /> <input type="submit" id="td-header-search-top" class="wpb_button wpb_btn-inverse btn" value="Search" />
</div>
</form>
</div>
</div>
</div>

Hello, If you have followed everything mentioned in the URL http://www.getcooltricks.com/wordpress/google-cse-integration-to-newspaper-wordpress-theme/ correctly, you will see the search box as expected. Please read the entire tutorial before proceeding. Clear the cache once done. Please leave a comment in the blog if you need more help.

Hellp Pradeep,

Thanks for this but quite curious but this seems to work for desktops only. DO you have a solution for the mobile search under the mobile plugin theme?

Thanks.