Replacing Wordpress Search Bar

I'm trying to replace the wordpress search bar with a custom google adsense search bar on my website, PantrySpa.com. I think this is the code that is adding the search bar to the menu bar currently (from functions.php):

//* Add Search Bar to Nav Menu
add_filter( 'wp_nav_menu_items', 'theme_menu_extras', 10, 2 );
/**
* Filter menu items, appending either a search form or today's date.
*
* @param string $menu HTML string of list items.
* @param stdClass $args Menu arguments.
*
* @return string Amended HTML string of list items.
*/
function theme_menu_extras( $menu, $args ) {
//* Change 'primary' to 'secondary' to add extras to the secondary navigation menu
if ( 'primary' !== $args->theme_location )
return $menu;
//* Uncomment this block to add a search form to the navigation menu

ob_start();
get_search_form();
$search = ob_get_clean();
$menu .= '<li class="right search">' . $search . '</li>';

And this is the code from google for the custom google ads search box and button:

<form action="http://www.pantryspa.com/search" id="cse-search-box">
  <div>
    <input type="hidden" name="cx" value="partner-pub-7412812612421318:3138982839" />
    <input type="hidden" name="cof" value="FORID:10" />
    <input type="hidden" name="ie" value="UTF-8" />
    <input type="text" name="q" size="13" />
    <input type="submit" name="sa" value="Search" />
  </div>
</form>

<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=en"></script>

How do I place the google code within the code currently in functions.php? And how do I adjust the green navigation bar at the top of the website to be tall enough to fit the google search bar (as it is against google's terms of service to alter their search bar and button in any way)?

If it helps, I have granted support access via the wpmu plugin.

Thanks for your help!!!

    Aicee Taguilaso

    Hi d-invent,

    Could you kindly send in your FTP details so I can check your functions.php?
    Please go to https://premium.wpmudev.org/contact/
    Select "I have a different question" for the topic

    and kindly send in the following:

    Subject: "Attn: Aicee"
    -WordPress admin username
    -WordPress admin password
    -login url
    -FTP credentials (host/username/password)
    -link back to this thread for reference

    Looking forward to your response!
    Thanks!

    Regards,
    Aicee

    d-invent

    Not sure why this requires ftp access? You can see functions.php via wp-admin and I have granted support access via the wpmu plugin...

    Also, please be very careful, someone from wpmu must have changed something overnight in functions.php that brought the whole site down (there was an error on line 54 of functions.php which didn't allow the website to render, so just a white screen was showing)... Luckily, I had a backup from before I went to sleep, so I could revert back to erase whatever the changes were, but the site was down for hours (since I was asleep) which cost us dearly since we lost advertising revenue during that time...

    Timothy Bowers

    Hey there,

    We wouldn't make edits to php through the WP admin area, that's bad practice. One mistake and the site is offline. It's why we ask for FTP if we're going to make any code edits. CSS edits through the admin are fine, just not PHP ones.

    With FTP we can make quick changes, and if something was inadvertently broken it can be reverted quickly.

    Do you have a log of the full error please, I'd like to check with Aicee, she's currently in training with us. I'll also have her check back in once we have adequate access to make any code edits.

    Is the code in your original post complete?

    It's missing the closing curly brace.

    Take care.

    d-invent

    PHP Parse error: syntax error, unexpected T_STRING in /nas/wp/www/cluster-1484/pantryspa/wp-content/themes/metro-pro/functions.php on line 54

    That was the error I saw in the log first thing this morning when I woke up...

    The code snippet I shared above is not the complete code, it is just a segment that I copied from functions.php to give an idea of where the search bar is currently being inserted...

    Hope that helps clarify!

    Would you still like me to send you ftp details Timothy?

    Aicee Taguilaso

    Hi @d-invent,

    Apologies for the delay here.

    Can your check your theme folder if it has a searchform.php? If there isn't, just create a new file called searchform.php, and paste the following code:

    <form action="http://www.pantryspa.com/search" id="cse-search-box">
      <div>
        <input type="hidden" name="cx" value="partner-pub-7412812612421318:3138982839" />
        <input type="hidden" name="cof" value="FORID:10" />
        <input type="hidden" name="ie" value="UTF-8" />
        <input type="text" name="q" size="13" />
        <input type="submit" name="sa" value="Search" />
      </div>
    </form>

    Let me know if that changes your current search bar.

    And how do I adjust the green navigation bar at the top of the website to be tall enough to fit the google search bar (as it is against google's terms of service to alter their search bar and button in any way)?

    Try adding the following CSS code into your theme's style.css, or your child theme's style.css (if you have), or through this plugin:

    body.gppro-custom .nav-primary{
    	height: 60px;
    }
    body.gppro-custom .nav-primary .genesis-nav-menu > .menu-item > a {
    	  padding-top: 22px;
    }
    .nav-logo {
    	  margin-top: -4px;
    }

    Let me know if that works or if you have any further questions!
    Thank you!

    Regards,
    Aicee

    Aicee Taguilaso

    Hi d-invent,

    Please check it here: /wp-content/themes/metro-pro
    If there's no searchform.php, just create a new one with this updated code in it:

    <form action="http://www.pantryspa.com/search" id="cse-search-box">
      <div>
        <input type="hidden" name="cx" value="partner-pub-7412812612421318:3138982839" />
        <input type="hidden" name="cof" value="FORID:10" />
        <input type="hidden" name="ie" value="UTF-8" />
        <input type="text" name="q" size="13" id="pantryspa-searchbox" />
        <input type="submit" name="sa" value="Search" id="pantryspa-searchsubmit" />
      </div>
    </form>

    I have included an id to textbox and submit button, so we can easily call them when we need to do some CSS styling.

    The file path should be: /wp-content/themes/metro-pro/searchform.php

    Then, add this code to your functions.php (/wp-content/themes/metro-pro/functions.php):

    function search_form_no_filters() {
      // look for local searchform template
      $search_form_template = locate_template( 'searchform.php' );
      if ( '' !== $search_form_template ) {
        // searchform.php exists, remove all filters
        remove_all_filters('get_search_form');
      }
    }
    add_action('pre_get_search_form', 'search_form_no_filters');

    I've tried this on my site and it's working.
    Let me know if it works on your end, too! Thanks!

    Regards,
    Aicee

    d-invent

    Thanks Aicee, that seems to have worked, except that the colors / formatting are a problem...

    It is against the terms of service of google adsense to modify the look of their search box and search button, but both the search box and button are being modified somehow. For example, the search button should not be black, and the google watermark should be inside the search box.

    Here is a link to show you what they looked like, before this plugin modified how they looked: http://lh3.ggpht.com/_nHEt80wjI5c/TY8uda0qszI/AAAAAAAAB1A/MRUThGk8BPw/google%20custom%20search%20on%20navigation%20bar%5B5%5D.png?imgmax=800

    Please let me know how to remove the styling that is being done on the google ads custom search box and button.

    Thanks!

    Aicee Taguilaso

    Hey d-invent,

    Sorry, I forgot to add the script code from your original post.
    But I did modify it to make it work. Here's the updated code for your searchform.php:

    <form action="http://www.pantryspa.com/search" id="cse-search-box">
      <div>
        <input type="hidden" name="cx" value="partner-pub-7412812612421318:3138982839" />
        <input type="hidden" name="cof" value="FORID:10" />
        <input type="hidden" name="ie" value="UTF-8" />
        <input type="text" name="q" size="13" id="pantryspa-searchbox" />
        <input type="submit" name="sa" value="Search" id="pantryspa-searchsubmit" />
      </div>
    </form>
    <script type="text/javascript" src="http://cse.google.com/coop/cse/brand?form=cse-search-box&lang=en"></script>

    I changed the src="http://www.google.com/coop/cse/..." to src="http://cse.google.com/coop/cse/.."

    About the styling, the searchbox and search button are using the general input and input[type="submit"] code on your theme.

    You can try adding this code to restore browser's default style for the submit button:

    input#pantryspa-searchsubmit {
    	background: ButtonFace;
    	color: ButtonText;
    	border: 2px outset ButtonFace;
    }

    For the searchbox, once you updated the code in searchform.php, it will use the default styling.
    Let me know how it goes. Thanks!

    Regards,
    Aicee

    Aicee Taguilaso

    Hi d-invent!

    Can you try adding this CSS code:

    @media only screen and (min-width: 1024px){
    	input#pantryspa-searchbox {
    		width: 60%;
    	}
    	.genesis-nav-menu > .right {
    		float: none;
    		width: 24%;
    	}
    }
    
    @media only screen and (min-width: 1140px){
    	#menu-main-menu li#menu-item-4305 {
    		margin-left: 0px;
    	}
    	input#pantryspa-searchbox {
    		width: 75%;
    	}
    	.genesis-nav-menu > .right {
    		float: none;
    		width: 28%;
    	}
    }
    
    input#pantryspa-searchsubmit {
    	align-items: flex-start;
    	text-align: center;
    	cursor: default;
    	color: buttontext;
    	padding: 2px 6px 3px;
    	background-color: buttonface;
    	box-sizing: border-box;
    	text-transform: none;
     	border: 1px solid #666666;
    	background-color: #CECECE;
    }

    It should look like the attached screenshot.

    Looking forward to your response!
    Thanks for your patience on this!

    Regards,
    Aicee

    Aicee Taguilaso

    Hi there, d-invent!

    I think it's not appearing on mobile site even before. The search is set to display:none on mobile size.

    And it seems the search part is added as one of the menu items (Appearance > Menus) so it is aligning with the other menu items. See screenshot - http://prntscr.com/6rfd3t. There's no easy CSS way in moving it to the top.

    We can add it in your header.php under <div class="wrap">

    Appearance > Editor > header.php

    Look for <div class="wrap"> and paste this code under it:

    <div class="right search-m">
    <form action="http://www.pantryspa.com/search" id="cse-search-box-m">
      <div>
        <input type="hidden" name="cx" value="partner-pub-7412812612421318:3138982839">
        <input type="hidden" name="cof" value="FORID:10">
        <input type="hidden" name="ie" value="UTF-8">
        <input type="text" name="q" size="9" id="pantryspa-searchbox-m" style="border: 1px solid rgb(126, 157, 185); padding: 2px; background: url(http://cse.google.com/cse/intl/en/images/google_custom_search_watermark.gif) 0% 50% no-repeat rgb(255, 255, 255);">
        <input type="submit" name="sa" value="Search" id="pantryspa-searchsubmit-m">
      </div>
    </form>
    <script type="text/javascript" src="http://cse.google.com/coop/cse/brand?form=cse-search-box-m&lang=en"></script>
    </div>

    That's a different code with different class and id.

    Then, add this CSS code:

    @media only screen and (max-width: 767px){
    	.right.search-m {
    		float: right;
    		width: 55%;
    	}
    	input#pantryspa-searchsubmit-m {
    		align-items: flex-start;
    		text-align: center;
    		cursor: default;
    		color: buttontext;
    		padding: 2px 6px 3px;
    		background-color: buttonface;
    		box-sizing: border-box;
    		text-transform: none;
    		border: 1px solid #666666;
    		background-color: #CECECE;
    	}
    	input#pantryspa-searchbox-m {
    		width: 60%;
    	}
    	.nav-primary .wrap {
    		line-height: 3em;
    	}
    }
    
    @media only screen and (min-width: 1024px){
    	.right.search-m {
    		display: none;
    	}
    }
    
    @media only screen and (min-width: 768px) and (max-width: 1023px){
    	.genesis-nav-menu li.alignleft, .genesis-nav-menu li.right {
    		float: none;
    	}
    	body.gppro-custom .nav-primary .genesis-nav-menu > .menu-item > a{
    		font-size: 11px;
    	}
    	input#pantryspa-searchbox {
    		width: 60%;
    	}
    	.nav-logo {
    		margin-top: -16px;
    	}
    }

    This is for aligning the new search bar to right (for mobile) and hiding it (new search bar) on desktop.

    Let me know if you have problem implementing this, I could do it for you. Just grant support access. (See https://premium.wpmudev.org/manuals/wpmu-dev-dashboard-enabling-staff-login/)

    Thanks!

    Regards,
    Aicee

    d-invent

    There are a few problems with this though:

    1. We can't manually modify the google adsense search box code, as that is against the TOS of google (so we can't add that code to header.php).

    2. We plan to roll out this theme to a bunch of different websites, so want to keep custom code that needs to be modified (like the google adsense search box code) into separate modules (like we did with searchform.php (rather than modifying header.php directly).

    3. We would really love to figure out a way to have the search bar within the navigation bar... if we can't get it to appear to the right of the logo, can we place the search bar at the very bottom of the navigation menu that pops-down when you click on the hamburger menu (the icon with the three horizontal lines)?

    Thanks for your continued help!

    Aicee Taguilaso

    Hi Diana,

    I've added CSS codes into your Appearance > Edit CSS. But while working on this, I suddenly can't get in and I'm getting an invalid access token.

    Do you mind replacing the code I put there with this?
    The code I put is enclosed with /**added by Aicee-wpmudev**/ so you'll know.

    /**added by Aicee-wpmudev**/
    @media only screen and (max-width: 402px){
    	body.gppro-custom .nav-primary .genesis-nav-menu>.menu-item>a{
    		font-size: 12px;
    		margin-right: -14px !important;
    	}
    }
    
    @media only screen and (min-width: 561px) and (max-width: 768px){
    	li.right.search {
    		width: 50%;
    	}
    }
    
    @media only screen and (max-width: 768px){
    	li.right.search {
    		display: block;
    		clear: left;
    		margin-right: 5px;
    		width: 65%;
    		padding-bottom: 5px;
    	}
    	span.nav-logo {
    		display: none;
    	}
    	body.gppro-custom .nav-primary .genesis-nav-menu>.menu-item>a {
    		font-size: 14px;
    		font-size: 3.5vw;
    		margin-left: -8px;
    		margin-right: -5px;
    	}
    	.genesis-nav-menu.responsive-menu .menu-item{
    		float: left !important;
    	}
    	input#pantryspa-searchbox {
    		width: 65%;
    	}
    }
    
    @media only screen and (min-width: 769px) and (max-width: 1023px){
    	.genesis-nav-menu li.alignleft, .genesis-nav-menu li.right {
    		float: none;
    	}
    	body.gppro-custom .nav-primary .genesis-nav-menu > .menu-item > a{
    		font-size: 11px;
    	}
    	input#pantryspa-searchbox {
    		width: 70%;
    	}
    	.nav-logo {
    		margin-top: -16px;
    	}
    	li.right.search {
    		display: block;
    		width: 38%;
    		float: right;
    	}
    	li#menu-item-4305 {
     		margin-left: 28px;
    	}
    }
    /**added by Aicee-wpmudev**/

    Please clear browser cache first before checking the site again.
    Let me know if there are still issues on this. If there are, kindly revoke and regrant access so I can easily update your CSS.

    Thanks Diana!

    Regards,
    Aicee

    d-invent

    Thanks, Aicee! I have replace the css with the code you gave above, but there are a few issues...

    1. When you resize the browser window on a desktop computer, at some point (before the navigation bar becomes the "mobile-friendly" navigation bar) the layout gets messed up. I am attaching a screen shot to show you what I mean. How do we fix this?

    2. On the mobile navigation, when my phone is turned vertically (rather than horizontally), the last character of the categories is getting cut off. I attached a screenshot of that as well will blue circles marking where the letters are getting cut off. How do we fix this?

    3. How do we set the search bar in the mobile navigation to be centered (it looks out of place aligned to the right)?

    Thank you for your help!

    Aicee Taguilaso

    Hi Diana,

    Hope you're well today!

    I updated the code in Appearance > Custom CSS. The code I put is still enclosed with /**added by Aicee-wpmudev**/.

    By the way, I also centered the menu tabs. I think it's good that way. But let me know if that's not what you want.

    Here are some screenshots for different dimensions:
    http://prntscr.com/6sdke4
    http://prntscr.com/6sdkk9
    http://prntscr.com/6sdksc
    http://prntscr.com/6sdkyd

    You can also view the site here using some devices: http://mobiletest.me/

    Let me know if you have any further questions!

    Regards,
    Aicee

    d-invent

    I think it is definitely starting to look better! But it is a bit strange looking on mobile still I think... On mobile, could we make the list of categories / links vertical (instead of horizontal) and aligned to the left, and then keep the search bar centered at the bottom? That way the search bar could be wider and the search button could be to the right of the search bar... I saw an example of such a mobile navigation menu on a website called ViralNova.com that I think looks great (with the horizontal list of links and the wider search bar centered at the very bottom between two thin separator lines)...

    Thank you so much for all of your help to get this looking great!!!

    Aicee Taguilaso

    Hi Diana,

    I've updated the CSS code.

    See screenshot: http://prntscr.com/6ucpwr
    Please also check it on your mobile.

    You can then, adjust the height of the search textbox/button through updating the values of this code: (just find it on the code I've added and adjust the values)

    @media only screen and (max-width: 459px) {
    	input#pantryspa-searchbox {
    		height: 20px;
    	}
    	input#pantryspa-searchsubmit {
    		height: 34px;
    	}
    }

    Thanks, Diana!

    Regards,
    Aicee

    d-invent

    Great! Where are you making changes to the order in which the elements are appearing in the mobile navigation menu? I think the search box at the bottom of the menu is getting a little bit lost, so I would love to move it to the very top of the navigation bar and make the background for the menu around the search bar the same green color as the rest of the menu.

    Also, on the desktop version of the website, we have two "navigation bars" at the top (one is pink which links to my other sites and one is green which links to categories for PantrySpa.com)... I would love for both menus to appear on the mobile navigation menu as well. Can we set the Main Menu (Primary Navigation Menu) to show up first on the mobile menu (like it is now) and then for a title such as "Hot Topics" to be displayed in bold (so that it looks a little different than the clickable menu items), followed by the links in the second menu called Other Websites (Second Navigation Menu)?

    Thank you so much for your help in getting this to look great!!!

    Aicee Taguilaso

    Hi Diana,

    It seems that the support access has expired. Could you please grant access again, so I can check the order of the menu items and the search bar?

    Also regarding what you want with the second navigation, I can't picture out what it would look like on the navigation menu. I can't also find "Hot Topics" in your site. Could you please provide a draft of how you want it to look like on mobile view.

    Thanks, Diana!

    Regards,
    Aicee

    Aicee Taguilaso

    Hi Diana,

    Hope you had a great weekend!

    To make the search bar background-color green, look for this code that I added, and just removed the "background: #fff":

    @media only screen and (max-width: 770px)
    li.right.search {
      display: block;
      width: 100%;
      padding-bottom: 5px;
      background: #fff;
    }

    Although, I'm really glad that I could be of help here, I believed we already have fixed the original issue here which is to replace the wordpress search bar with your google custom search bar. Regarding the other CSS fixes that you need, would you mind creating a new thread for this?

    This is to help keep support tickets separate and this will help other members too when searching answers for specific issues, as I'm sure you understand.

    You can start a new thread here with the CSS-related issues:
    https://premium.wpmudev.org/forums/#question

    Have a great day, Diana!
    Thanks!

    Regards,
    Aicee

    d-invent

    Sure, I have re-granted support access!

    I looked for that bit of code to make the background area around the search bar the same shade of green, but I can't find it in the Edit CSS section, where did you place that css?

    Also, where are you making changes to the order in which the elements are appearing in the mobile navigation menu? I can raise another ticket, but would like to provide some information on where the code for the mobile navigation menu is located...

    I have just created and attached a screen shot of what I am trying to get the mobile nav bar to look like as well, in case that helps! I'd love to just finish this off

    Aicee Taguilaso

    Hi Diana,

    Hope you're well today!

    I looked for that bit of code to make the background area around the search bar the same shade of green, but I can't find it in the Edit CSS section, where did you place that css?"

    It's on line 603 on your Appearance > Edit CSS. See screenshot - http://prntscr.com/6wan2j

    Also, where are you making changes to the order in which the elements are appearing in the mobile navigation menu? I can raise another ticket, but would like to provide some information on where the code for the mobile navigation menu is located..."

    Just to clarify this, I haven't been making any changes to the order of the elements, this is the current order based from your setup on Menu > Main Menu. Regarding the searchbar, I think it's on your header.php. Though, I can't confirm it exactly as I have no access to that file. I'm only making CSS changes here.

    I have just created and attached a screen shot of what I am trying to get the mobile nav bar to look like as well, in case that helps!

    The second nav bar (pink nav) has been set to none for mobile view. See screenshot - http://prntscr.com/6wam2u
    By displaying the pink nav bar, it would be on top of the main nav bar (green nav) by default, since it's already been put that way, see desktop/tablet view. Putting it below the green nav bar requires custom development as well as the changes that you want with the search bar being on top of the other menu items, this can't be done just using CSS.

    This would require making a lot of modifications in the code which is beyond the scope of support that we provide. See here: https://premium.wpmudev.org/manuals/using-wpmu-dev/support-vs-custom-development

    You can post a job in our job board where you can hire a developer to assist you further: https://premium.wpmudev.org/wpmu-jobs/
    Please note that, no WPMU official staff is available in the job board.

    Thanks for understanding, Diana!

    Regards,
    Aicee