Displaying search button when inserting Search widget in Template

Beaver Builder
1

Hello,

I’ve recently started using Wordpress to build a new website. I have no existing coding knowledge so have decided to use Beaver Builder. To give greater flexibility in designing the header and footer of my pages I’ve disabled the header and footer from my theme (Beaver Builder Theme) by going to Customizer > Header > Header Layout > Layout set to None. I am now in the process of building a Template will act as the header and footer of all of my pages:

http://www.holivity.co.uk/fl-builder-template/template-main/

I have inserted a search box at the top-middle by using Wordpress Widgets >> Search. I want the search function to have a “Search” button after the text box, but can’t for the life of my figure out how to include this.

I’ve tried the recommendations from some other forum posts but these have not worked, I think because I’m trying to edit the search box as a widget inserted into a template page, not in the theme itself.

Other forum posts suggest I need to find and remove this:

.aside #searchsubmit {
display:none;
}

but I’ve Inspected my code and don’t find this anywhere.

I assume there should by an easy way to fix this but I’ve been looking around at the different options and playing around for ages and still stuck. Please help!

Thanks,
Luke

2

Hey Luke,

Welcome to the BB forums! :slight_smile:

Unfortunately, the Search widget that comes with the BB theme doesn’t have a search button. We can add one but then we’ll have to change a few of the theme’s codes. Let us know if you want to go through with that.

Ben

3

Thanks. Yes that would be good - please let me know what I need to do. Luke

4

Hey Luke,

Okay, so you’ll need to use the child theme as we’re going to be making changes to the theme files. Just download it from your Accounts page, install it to your site, and activate it.

Once done, you’ll need to copy the searchform.php file from your parent theme to your child theme. Open up the file, then add the following code before the closing</form> tag.
<button type=“submit” class=“search-submit”><?php echo ‘Search’; ?></button>

Let us know how it goes!

Ben

5

Great - thanks Ben. Have followed instructions above and the search button is now displaying and working, but not quite in the way I had hoped.

http://www.holivity.co.uk/fl-builder-template/global-header/

Could you help with the following:

  1. the “Search” button is appearing below the search text box. How do I get the search button directly alongside the search box? This may be more of a styling/size/position point, linked to qu 3 below.
  2. I’ve downloaded and activated the Relevanssi Plugin as I understand the standard Wordpress search function isn’t great. Do I need to do anything else to “link up” my search function to use Relevanssi rather than the standard WP search function?
  3. Styling - I want the ability to change the colour of the search button. Search is currently inserted as a widget into my Global Header template page. I’ve gone to Widget Settings > Advanced and set the CSS ID to “search-box”. I’ve then loaded CSS Hero, made “search-box” a custom CSS selector, gone into it an an ebitable segment and tried to adjust the button colour etc, but none of the styling is changing. Appreciate this question overlaps with CSS Hero but if you could tell me if I’m doing anything wrong on the BB part that would be great.

Thanks,
Luke

6

Hi Luke,

  1. Try using the following CSS.
.fl-widget .widget_search input.fl-search-input {
  display: inline;
  margin-right: 10px;
  width: 70%;
}

  1. Unfortunately, I have no experience with that plugin. However, it is my understanding that it should just replace the default WordPress search. Unless, I am mistaken.

  2. Not sure why CSS Hero isn’t able to style the button. However, you can use custom CSS:

.fl-widget .widget_search button.search-submit {
  background: #FF0;
  border: 1px solid #F00;
  color: #000;
}
/* Hover state */
.fl-widget .widget_search button.search-submit:hover {
  background: #008000;
  color: #F00;
}

You will want to change the color values to your preference.

Thanks,
Danny

7

Great - all working - thanks.