Sniffle Valve - Beaver Builder

Beaver Builder Lite + GeneratePress – Topbar, Footer Widgets and Footer

Get the Latest from Sniffle Valve

Sniffle Valve logo

If you find this tutorial to be helpful and of use, consider buying Sniffle Valve a coffee  

For help with the content presented in this tutorial, book a one-on-one online training session

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.

Plugins

Beaver Builder Lite – https://wordpress.org/plugins/beaver-builder-lite-version

Simple CSS – https://wordpress.org/plugins/simple-css

Insert Pages – https://wordpress.org/plugins/insert-pages

Theme and Child Theme:

GeneratePress – https://wordpress.org/themes/generatepress

Generic GeneratePress Child Theme – http://generatepress.com/api/themes/generatepress_child.zip (Note: starts a download of the child theme)

Resources:

GeneratePress Hook Locations: – http://demo.generatepress.com/hook-locations

GeneratePress Available Hooks and Function code: – https://generatepress.com/knowledgebase/hook-list

Code: WARNING! Use a PLAIN TEXT EDITOR

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 }

CSS

.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 🙂

Enjoy!

Leave a Comment