How to add a header/footer to a blog page.

Beaver Builder
1

Hello

I’ll post the link below (as the site is in development) - but I have created my own header/footer using the BB plugin - but I am totally stuck at how I apply these /create to the header/footer of the blog. I am not using the customiser as it doesn’t let me set a header with 3 columns or a footer with 3 columns. These work perfectly on all my pages - its just my blog page I am stuck as to how to this in (have looked at the knowledge base - but apologies if I have missed this)

Thanks as always

2

Doh! forgot I have this set to being under maintenance

so the site/url is useless to view right now as you can’t see anything!.

I can provide a login or screen grabs to help - but all my pages are spot on - its just my blog pages simply has posts stacked up - I need to add a header/footer on to this page.

Thanks in advance

3

Hi Kiaran,

Can you follow the instructions on this topic, as I believe this is what you’re trying to achieve.

Thanks,
Danny

4

Hi Danny

I’ll give that a shot this afternoon - thank you! (and sorry for not finding that when I searched!!) - just a daft question - but I have added this already to most of the pages by just using the page builder and my own created layouts - this won;t ovewrite these or cause a double header/footer to appear will it? (kinda daft as I’ll soon find out when I try).

Again just to say thanks - beaverbuilder is brilliant and if you ever need any beta testers give me a shout!

5

Hello

I’ve just followed those - created a page called “my global header” added my header template and saved.

Then created a page called my global footer and added my footer template to the page.

Then added this to my child function php file

<?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 global footer to footer
add_action(‘fl_after_content’, ‘my_global_footer’);
function my_global_footer(){
echo do_shortcode(’[fl_builder_insert_layout slug=“my_global_footer”]’);
};

But no header or footer is showing up on my blog page or on any of the posts (blog is the page that shows all my posts)

I am obviously missing something obvious!!

These are just the last issue to complete this site change

6

[Content Hidden]

7

Hey Kiaran,

Sorry, but it looks like you missed the URL of the site in question. :slight_smile:

Ben

8

[Content Hidden]

9

[Content Hidden]

10

Hi Kiaran,

The issue I believe is caused by you not using the correct slug in both hooks. For example, you have this:

// 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-header-page"]');
 };

However, none of your global rows i.e. header or footer have those slugs (global-header-page). If you replace the code using the following, it should resolve your issue.

// 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="header-2"]');
 };
// 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="footer"]');
 };

To find the correct slugs for your saved rows, modules. Visit your WordPress Admin Dashboard > Templates and click the Quick Edit link beneath your saved row/module. In the slug option that is the name you need to use.

Cloudup

Let me know if this resolves your issue or not.

Thanks,
Danny

11

Hi Danny

doh! - I can see exactly where I went wrong - the only problem is that I now have a double header & footer appearing on all my normal pages - I just need the header & footer to be added to my posts.

Any ideas?

I’ll go do a bit of googling/wordpress searching to see if I can find what to add so this just appears on my posts (as I have a page layout I created that I added for all my pages)

Thanks again for helping with me with teh super obvious - just need the pages not to have a double header and my blog posts to have a header/footer

12

Found this on the forum

http://forum.wpbeaverbuilder.com/support/q/use-saved-row-or-template-as-headerfooter/page/2/#post-104209

Which helped me see how to set a condition for the header/footer and set the header & footer to only appear on a certain page

so by doing this I could set my page i.e blog with page id 953

( i set and then used the advanced post module to pull the posts in to a page - rather than a category showing posts)

to show the global header & footer - buy using slug & my header & footer names.

<?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
 function my_global_header(){
   if ( is_page( 953 ) || is_single() ) {
     echo do_shortcode('[fl_builder_insert_layout slug="header-2"]');
   }
 };
add_action('fl_before_header', 'my_global_header');
 // Add my global footer to my footer
 function my_global_footer(){
   if ( is_page( 953 ) || is_single() ) {
     echo do_shortcode('[fl_builder_insert_layout slug="footer"]');
   }
 };
add_action('fl_after_content', 'my_global_footer');

Issue now sorted!

Thank you for your help and I hope this helps someone else.

13

Hi Kiaran,

Happy to hear your issue has been resolved and thanks for informing us. We appreciate it.

Thanks,
Danny