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.

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.

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!