I’m fairly new to using Beaver Builder. Been trying out some things in the last couple of weeks.
What I’ve figured out so far is that I would really like to use a saved row as my header for all of the pages of the site I’ve just started on. It seems a lot easier to customise than the header part of the BB theme.
Do I understand that thread correctly in that it is a lot easier to implement a custom header and footer now ? That I don’t have to use a third party app like “insert pages” for my header and footer row to be the default of every page ?
At http://wip.larvikimp.no is what I’ve got so far. Right now the top most part is the header section of the theme with the menu_bottom underneath and then I’ve added a row that I’m thinking I want to use as the site’s header. It seems a lot easier to add content on the right side of this row using the builder instead of the theme.
For the menu I’m planning on using Ubermenu, so I guess that would have to be implemented the same way as the header row ? Since I have to set up a child theme for the Ubermenu, will that be the better approach to keep what I’m thinking of safe from future upgrades of the BB theme ?
I might be misunderstanding this pasting of shortcodes in text fields of the theme, that’s why I have to ask you smart people to help a newbie out
We had a similar just the other day and the best solution in my opinion is to use a action hook, instead of editing both the header.php and footer.php file.
To use the hooks, see my responses on the topic linked below:
Be sure to use the BB child theme if you plan to do this. If you’re not using the BB theme, you will need to review your theme’s documentation for the correct hook location.
Thanks for the great feedback, I’ll give that a try!
Does the “my header page” have to published to work?
Would you recommend doing the same thing with the top menu under the header row, or use the BB theme to handle the menu? I guess Ubermenu should have a lot of flexibility when it comes to how it looks.
Yes, the templates you’ll use needs to be updated for it to be available for non-logged in users.
Not really sure re your Ubermenu question as I haven’t seen the layout yet. You do have an option to display the Ubermenu menu via shortcode so you can do that in conjunction with the method above if that makes sense.
I’m yet to test Ubermenu myself, but I’m planning to in the next day or two.
I think I’ll try to put it right underneath my heading in the “My Global Header” page that I’ve created using the instructions that Danny linked to.
On to implementing the child theme and global heading and footer pages first!
I’m sure I’ll have more questions when I start building this, thanks for the great replies guys. Awesome feedback.
Ok. So I’ve managed to get the child theme working. That wasn’t a lot of trouble really. Tested a little bit with what I have so far and didn’t run into any problems except having to set header and footer layout to none in the child theme.
But when I try Danny’s suggestion on making those additions to the child theme’s functions.php, I can’t really get it to work.
I’ve made a “Global Footer Page” and “Global Header Page” and tried to put those slugs into the functions.php as “global-header-page” and “global-footer-page”.
When I try to load f.ex my front page (which only has a bunch of random text atm) the header and footer doesn’t show up, and if I try that front page in the builder I get a [fl_builder_insert_layout slug=“global-header-page”] on top and [fl_builder_insert_layout slug=“global-footer-page”] on the bottom.
Can you guys help me out here ? I’m sure it’s just one stupid little thing I’m not doing right. If you need access to my site, let me know. I’ll create a user with admin rights.
Here’s my functions.php
<?php
// Defines
define( 'FL_CHILD_THEME_DIR', get_stylesheet_directory() );
define( 'FL_CHILD_THEME_URL', get_stylesheet_directory_uri() );
// Classes
require_once 'classes/class-fl-child-theme.php';
// Actions
add_action( 'fl_head', 'FLChildTheme::stylesheet' );
/// Adds my global header module my header
add_action('fl_before_header', 'my_global_header');
function my_global_header(){
echo do_shortcode('[fl_builder_insert_layout slug="global-header-page"]');
};
// Add my global footer to my footer
add_action('fl_after_content', 'my_global_footer');
function my_global_footer(){
echo do_shortcode('[fl_builder_insert_layout slug="global-footer-page"]');
};
The code you have is correct, the issue is that you have version 1.6.4.6 installed. The shortcode functionality was added in Beaver Builder 1.7. So to use this method you will need to update to the latest version.
Once updated, your header and footer should display fine.
I do have to publish changes every now and then in “Global Header Page” and “Global Footer Page” to “save” things done with the Ubermenu and any other none-page related stuff. But not a huge problem since these will just be templates when they’re done.
The way I added Ubermenu to my design was to use these instructions. I just added a html-module underneath my top row in the Global Header Page and pasted the shortcode there.
So far, it looks to be working like it should.
Looks great on mobile device, so everything in regards to the responsiveness of the menu seems to be working.
Only thing bugging me is the background color of the full width row surrounding the html-module. I can’t change it to white for some reason, even though there’s no background color set for that row. It can be an Ubermenu thing, I have to test further.
Do you guys think it’s ok to use the menu the way I have it set up now ? Not in the actual theme, but as a part of my global header page that I’ll use throughout the site.
