Using Beaver Builder to replace theme headers & footers

This post is really an update. Previously I posted about a free plugin for the Beaver Builder theme.  This plugin made it easy to replace headers and footers with Beaver Builder saved templates.  Things have since moved on: there are additions, options for other themes and I thought we should also look at the considerations too.

Free Plugins

J7 Digital’s Header & Footer Templates

This works with the Beaver Builder theme only. I recorded a screencast of this plugin, but since then it has improved.  With version  2.0 there is a way to have a transparent header effect (either globally or on the home pages only).   This is where the header (usually  Logo and Navigation menu) appears as over Page content (usually an image – see image below). Additionally you can set a replacement header to be fixed or “sticky” so it stays in place when a visitor scrolls the page (on either the home page only or all).

It also allows you to “hook” in one other saved template globally. For example you could have a top bar, a header and a footer. If you need a visual guide to hooks in the Beaver Builder theme try this from Pro Beaver.

It also adds the proper HTML and Schema.org mark-up to the new headers and footers.

If you’re a Beaver Builder theme user only needing global headers and footers. This presently is probably the one to go for.   What I like is the settings are in the customizer so you get a visual feedback while setting it up and  the plugin has been looked after.

Beaver Builder Transparent-Header

Example of the mark-up added

<header id="djcustom-header" itemscope="itemscope" itemtype="http://schema.org/WPHeader"> </header>
<footer id="djcustom-footer" itemscope="itemscope" itemtype="http://schema.org/WPFooter"> </footer>
<div id="djcustom-content"></div>  (for the custom template)

 Update 22/01/2017:
On the day of this post the plugin was updated further and includes more options:

1.insert on all pages
2.Insert on home page (hide on others)
3.overlay all pages
4.overlay home (hide on others )
5.overlay home (insert on others)
6.fixed all pages
7. Fixed home (hide on others)
8.fixed home (insert on others)

Beaver Builder Header Footer

Works with these themes:  Beaver Builder, Genesis, GeneratePress. This plugin is from Brainstorm Force (the people behind the Ultimate Addons for Beaver Builder aff link). It can conveniently be downloaded from the WordPress repository.

Settings for this plugin is added to the Page Builder setting page. The plugin is simple enough to use and allows you to select any saved Beaver Builder template as a global Header and Footer.  It also shows all saved page templates, but I would suggest not using this as they are layout template.  It also allows you to set transparent header effect and automatically adds HTML and Schema.org.  Presently, this is great for Genesis and GeneratePress users. If I understand right it was a small side project of the Brainstorm Forces team. As such I expect it will not receive many updates, but also does not need them.

Example of the mark-up added

<header id="masthead" itemscope="itemscope" itemtype="http://schema.org/WPHeader"> </header>
<footer itemscope="itemscope" itemtype="http://schema.org/WPFooter"> </footer>

 

Schema.org Settings for Beaver Builder

Works on any themes where the Header or Footer can be removed.   This comes from the FireTree Design  (the people behind Beaver Tunnels).  It is different to the other two in that it does not add the row to the theme. What it does is allows us to add Header and Footer HTLM and Schema.org to any saved rows via tab in the Beaver Builder plugin. The settings are in a tab added to the Beaver Builder Row settings.  This has only recently been released and could be extended to other content schema.  I see a lot of potential with this and would probably use it for Landing pages where the theme’s header is typically replaced.

The obvious advantage is for Beaver Tunnels users who can conditionally add saved templates to any hookable areas of the theme it supports.  Beaver Tunnels is a very powerful plugin that previously did not add the lost mark-ups when the Headers and Footers were removed from the theme.

Of course, if you are comfortable with codes you can hook in headers yourself. Here for example is a snippet for doing this with the Beaver Builder theme, and if so I would guess you would just add the mark-up too and not need this plugin

add_action( 'fl_after_header', 'my_header' );
function my_header() {
 echo do_shortcode(''); 
}

Example of the mark-up added

<header itemscope itemtype="http://schema.org/WPHeader"> </header>
<footer itemscope itemtype="http://schema.org/WPFooter"> </footer>

Beaver Tunnels

Update 4th July 2018. I am not recommending Beaver Tunnels now as it is not being updated.

There is no need for me to go into detail here. I’ve set up a live demo site for Beaver Tunnels. There is also a video on the home page to cover the basics of the plugin.   As much as I like the J7 digital plugin (as a Beaver Builder theme user) I am now more likely to use Beaver Tunnels with the new schema.og plugin for header replacement. The only reason is because I use Beaver Tunnels already.

Is replacing headers a good idea?

One thing I realised after my first video is that “flexible headers”  implies it is easy work.  Sometimes that could be true, but replacing the default Navigation with the Menu Module well is rarely easy. Getting the aligning well for mobile devices is likely to need some CSS (see image below)

It also prevent us using new header additions that come with theme updates. For example the  Mega-Menu added to the Beaver Builder theme.

Beaver-Builder-Menu-Module

Personally I have mostly tried to adjust the theme’s default header rather than replace.  In part it has been an exercise getting to know the Beaver Builder theme better after years with Genesis….

But looking forward,  my main consideration now is what is the “Theme Builder” extension for Beaver Builder going to do for us. This is taken from the Beaver Builder Public road map:

“The theme builder (the unofficial name at this point) will be an add-on for Beaver Builder that allows you to build the different parts of any theme (post layouts, archive layouts, 404 pages, CPTs) with the page builder. We’re also exploring how best to implement Header and Footer building.”

And for the December 2016 blog update:

“Along with 2.0, we’re hoping to release an extension of our own in 2017. We haven’t ironed out the name yet, but as our new job listing implies, it’s going to be a “theme builder.” Imagine being able to build a blog post template in Beaver Builder, then apply it to all of your posts. Or, being able to create headers and footers, i.e. entire websites with Beaver Builder. It’s going to be BIG!”

We don’t know a release date or a cost for this. I am personally expecting a fairly long alpha and beta period starting soon, but it’s certainly making me think again about headers. One day headers will be easy!

DWcircle

I build websites at WP Corner Shop and travel. I also co-host a weekly WordPress podcast called WP Builds and make YouTube videos.

3 Comments

  1. Amanda Moore Amanda Moore on 10th February 2017 at 12:45 pm

    Hi David , from another Brit, thanks for all your great stuff. One question re Tunnels and the Header/Schema Markup, does it now handle that when you omit the theme header or dow e need to handle that separately. I will ask Beaver Tunnels as well but I saw you mentioned they were looking at it in an earlier post but can’t trace whether it is resolved?

    Thanks again for all you give out what a nice community the Beaver World seems to be!
    Thanks again, great stuff.
    Amanda

    • David Waumsley David Waumsley on 10th February 2017 at 1:47 pm

      Hello Amanda great to see you here. Thanks We Brits are really taking over!!

      This plugin https://wordpress.org/plugins/ft-bb-schema/ is the only way to add back the lost markup with Beaver Tunnels. This was my little crusade. Daniel gave me this plugin (his preferred approach) a while back, but did not officially release it. I think they got busy.

      Now of course, the new Beaver “Theme Builder” is changing things again. I’ve had a sneak try yesterday and it’s out in alpha next week.

      It has this ability to replace header and footer and with the mark-up (added back) and set conditions as like Beaver Tunnels does. Just BB theme and Genesis at the moment but I expect GeneratePress will get accommodated soon. I think this will be a long alpha. It’s exciting times, but hard to keep up with.

  2. Amanda Moore Amanda Moore on 10th February 2017 at 2:45 pm

    All very intriguing stuff, using Tunnels CPTs/Toolset and more, makes wire framing seem a bit old-hat!
    Thanks again, Dan from Tunnels just replied too, all nice guys. Cheers and all the best for the future and BB Alpha.

    Meanwhile for SMBs these provide a lot more flex than just a fixed theme, especially with API’s plugged in as well. Always something new to grapple with, love it.

Leave a Comment