Hello Pradeep,
Thanks for this tutorial. Can we have similar modification for the search bar of the new mobile plugin?
thanks and regards,
http://www.midronepro.com
Hey, just to update you all, in the new update, you need to modify a new header file called header-menu-h1.php for this solution to work.
Thank you Pradeep for this great tutorial by the way.
Thank you.
Thank you Nano for pointing out the file name. I will modify the tutorial accordingly.
Hi,
This doesn’t seem to work on the current version of the theme, 8.7. I’ve tried your tutorial but it doesn’t change the search function in the menu at all.
The code in the file parts/header-menu-2.php seems to need to be changed. I can get google custom search to show up in the menu by using the Google custom search code in this file, but when I click in the search box to type it disappears. Any ideas?
Hi jsupple05,
in the header-menu-2.php file replace the following:
—–code start here—-
<div class=”td-drop-down-search” aria-labelledby=”td-header-search-button”>
<form method=”get” class=”td-search-form” action=”<?php echo esc_url(home_url( ‘/’ )); ?>”>
<div role=”search” class=”td-head-form-search-wrap”>
<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)?>” />
</div>
</form>
<div id=”td-aj-search”></div>
</div>
</div>
—-code end here—-
With this code:
——————–CODE STARTS HERE——____
<div class=”td-drop-down-search” aria-labelledby=”td-header-search-button”>
<form role=”search” method=”get” class=”td-search-form” action=”YOUR SEARCH PAGE URL HERE”>
<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 = ‘Buscar’;}” /> <input type=”submit” id=”td-header-search-top” class=”wpb_button wpb_btn-inverse btn” value=”SEARCH” />
</div>
</form>
</div>
</div>
——————————
Update your search page url in the new code.
Let me know if this works.
Yes that worked, thank you!
Hello, I think these new headers are according to the header style you choose. That piece of code is there in all the files and it is a good idea to change all these files with the search code. Hope this helps. I’m updating the tutorial today with the updated information.Thank you everyone for the suggestions and feedback.
I have updated the tutorial in detail with the new codes and how the search box is rendered. The code to render the search form in Mobile is also updated. Consider checking it here https://www.getcooltricks.com/wordpress/google-cse-integration-to-newspaper-wordpress-theme/.
I have updated the tutorial in detail with the new codes and how the search box is rendered. The code to render the search form in Mobile is also updated. Consider checking it here https://www.getcooltricks.com/wordpress/google-cse-integration-to-newspaper-wordpress-theme/. It is fully Compatible with the latest version of the theme.
Thanks Pradeep – for keeping this updated! Just installed newspaper theme and was excited when I saw your most recent post saying that you were still updating the tutorial on how to implement Google CSE.
Hi Pradeep,
Thanks for the update. I tried the code for the mobile plugin but it is rendering empty page. just the search page title.
is there anything wrong?
thanks for your help
Hi all, this no longer works on version 11 (and I think version 10) of the theme, the code for the search functions has changed a lot with the new “header live search” element and looks far more complicated to edit it so it uses Google Custom Search.
I don’t know any php coding myself so the only way I could use Google Custom Search in the header was to simply use a Custom html block and paste the code from Google in there or do the same with a Widget element. It doesn’t look as good but works at least. If anyone works out how to edit the search elements properly please let us know.
You’ll also need to use some custom CSS in the Custom Code section of the theme panel to get it to look decent. I used the functions below:
.gsc-search-button svg {
vertical-align: middle;
}
.gsc-searchbox table, td {
border: none !important;
}
.gsc-control-cse {
border:none;
}
Thank you! This is just what I was looking for! Will implement this tomorrow!
