Beaver Builder

Beaver Builder Lite- Topbar, Footer Widgets and Footer

Get the latest from
Sniffle Valve

Sniffle Valve

Consider buying Sniffle Valve a coffee  

Book a one-on-one online training session

Note: To copy any code presented in these tutorials, hover over the code and select the Toggle RAW Code icon raw code icon

With this method, you can place content created with the free, lite version of the Beaver Builder plugin into any of the hook locations provided in the GeneratePress theme.

This video shows you how to create a custom topbar, or banner, as well as footer widgets and a footer using the free, lite version of Beaver Builder which is available in the WordPress Plugin repository.


Beaver Builder Lite –

Simple CSS –

Insert Pages –

Theme and Child Theme:

GeneratePress –

Generic GeneratePress Child Theme – (Note: starts a download of the child theme)


GeneratePress Hook Locations: –

GeneratePress Available Hooks and Function code: –


PHP (insert into child theme’s functions.php)

add_action( 'generate_before_header', 'my_topbar' );
function my_topbar()
{ ?>
<?php echo do_shortcode( '[insert page=topbar display=content]' ); ?>
<?php }

add_action( 'generate_before_footer', 'my_footer' );
function my_footer()
{ ?>
<?php echo do_shortcode( '[insert page=footer display=content]' ); ?>
<?php }


.site-info {
display: none;

I would recommend trying this out on a local install or a staging site first, just to get the hang of it.

The key point is to be careful with the PHP code as one wrong quotation mark will bring the site down 🙂


Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top