Replacing GeneratePress Header with Beaver Builder Plugin

Replacing GeneratePress Header with BB

Do you want to replace the default GeneratePress header with custom header using Beaver Builder plugin? In this tutorial I am sharing the procedure.

Making Full Width Header Container

Make sure that you installed the GP premium add-on and activated it. Now follow this steps

  1. Login to Dashboard
  2. Navigate to Appearance -> Customize
  3. Click on Layout panel and expand the Header section
  4. Set Header Width “Full”
  5. Set Inner Header Width “Full”
  6. Header Padding “0”

Creating Custom Header with Beaver Builder

Make sure that you already installed and activated the Beaver Builder plugin (standard/pro/agency version). Now creates the custom header template using it.

  1. Navigate to Dashboard -> Builder -> Templates
  2. Click on “Add New” button
  3. Enter title and set type “Template”
  4. Click on Add Saved Template button
  5. Click on Launch Page Builder button
  6. Create the custom header row as per your mind
  7. Publish (Done -> Publish Changes)

Rendering Custom Header Template

Open the functions.php file of GeneratePress child theme and add this snippet at end of the file:

Render Custom Header

add_action( 'generate_header','generate_construct_header' );
function generate_construct_header() 
{
  ?>
  
>
> 'fl-builder-template', 'p' => 761 )); ?>

It will replace the default GeneratePress header with custom Beaver Builder Template. 761 is my BB template ID. You will change it with your own template ID.

How do you get the template ID?

  1. Login to Dashboard
  2. Navigate to Builder -> Templates
  3. Hover on the template title
  4. Click on “Edit” link
  5. You will get this kind of URL wp-admin/post.php?post=761&action=edit at address bar
  6. Here 761 is the template ID
Posted in