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.

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 );

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

remove_action( 'genesis_header', 'genesis_do_header' );
add_action( 'genesis_header', function(){
	FLBuilder::render_query(array(
		'post_type' 	=> 'fl-builder-template',
		'p' 			=> 761
	));
});

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

function generate_header_items() 
{
	FLBuilder::render_query(array(
		'post_type' => 'fl-builder-template',
		'p' 		=> 761
	));
}

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 Cancel Reply

Newsletter