Add The Search Icon at Beaver Builder Header
Do you want the search icon on your Beaver Builder header? Toggle Search Form module is a good tools for it. You will drag&drop this module at your header and setup the colors, font size based on your site header design.
Here I am sharing the two methods below:
- Header with Beaver Builder Plugin (who have not themer yet)
- Header with Beaver Themer Addon
Install/Activate the Toggle Search Form Module
Toggle Search Form Module is a premium beaver builder custom module which is built by WP Beaver World. Hope that you already purchase and download it. Let’s install and activate the module:
- Login to Dashboard
- Navigate to Plugins->Add New
- Click on Upload Plugin button
- Choose the file
- Click on Install Now button
- Click on “Activate” link
Now “Toggle Search Form” module will appear under WP Beaver World category on your page builder panel.
Method 1: Creates the Header with Beaver Builder Plugin
Creating the site header with Beaver Builder’s Template post type. First you will enable the “Template” post type at Settings->Page Builder->Use Access Tab. After activating it you will get new menu “Builder” at left side of your dashboard.
Next navigates to Builder -> Templates page and creates the header clicking on the “Add New” button. See the live video at below for complete step:
Replaces Header of Beaver Builder Theme with BB
First disables the Beaver theme header.
- Navigate to Appearance->Customize page
- Click on Header -> Header Layout
- Select “None” from Layout drop down list
- Click on Save&Publish button and save the settings
Next open the functions.php of your BB child theme and add this PHP script at end of the file.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
add_action( 'fl_after_header', function(){ echo '<header class="fl-page-header fl-page-header-primary'; FLTheme::header_classes(); echo '"'; FLTheme::header_data_attrs(); echo ' itemscope="itemscope" itemtype="http://schema.org/WPHeader"> <div class="fl-page-header-wrap">'; FLBuilder::render_query(array( 'post_type' => 'fl-builder-template', 'p' => 761 )); echo '</div></header>'; }, 1 ); |
761 is my template ID. You will replace with your template ID.
Replaces Header of Genesis Child Theme with BB
Open the functions.php file of your Genesis child theme and add this PHP snippet at end of the file
|
1 2 3 4 5 6 7 |
remove_action( 'genesis_header', 'genesis_do_header' ); add_action( 'genesis_header', function(){ FLBuilder::render_query(array( 'post_type' => 'fl-builder-template', 'p' => 761 )); }); |
Line no 1: Removes the default Genesis header
Line no 2-7: Adds the Beaver Builder header. 761 is my template ID. You will replace with your template ID.
Replaces Header of GeneratePress Theme with BB
Open then functions.php file and just drop this PHP script at end of the file
|
1 2 3 4 5 6 7 |
function generate_header_items() { FLBuilder::render_query(array( 'post_type' => 'fl-builder-template', 'p' => 761 )); } |
Method 2: Creates Header with Beaver Themer
Beaver Builder team released a new product “Beaver Themer” which is saving your time and quickly build a site. If you have it then it would be 10-15 mins job. See a simple demo at below:
1 Comment
Leave a Comment
You must be logged in to post a comment.
I would like to have the search icon as a menu item, so on small devices it will appear after clicking the hamburger. Is there a shortcode or other method for this?