Learn exactly how to makeBETTER WEBSITES RIDICULOUSLY FAST

Get exclusive tips that'll help you master WordPress, Beaver Builder and lots more.

Create a footer with Beaver Builder that you can easily edit using Beaver Builder

By default (and depending on the WordPress Theme you’re using) you will usually design your Footer under Appearance > Widgets by dragging WordPress widgets into the Footer Widget Areas.

Something similar the below animation.

create-a-footer-with-beaver-builder-add-widgets

The default WordPress way to create your Footer is to go to Appearance > Widgets and drag WordPress Widgets into your Footer Widget areas, as is demonstrated in this animation.

But this is restrictive because you can only used the WordPress Widgets available to you on this interface and you’re NOT able to use any of the great Beaver Builder modules.

Wouldn’t you rather edit your Footer with Beaver Builder’s drag-and-drop capabilities?

Of course you want to edit your Footer with Beaver Builder! You want to edit everything with Beaver Builder and so do your clients!

In this post we’ll show you the exact steps you need to follow to do this.

Also, because your footer will be built using Beaver Builder, your website clients will be able to edit their own Footer in the same way they edit the Pages on their website using Beaver Builder. This means your clients can maintain their own website in a more consistent way AND that means less support questions directed at you!

THE TECHNIQUE THAT WE’LL TEACH YOU IN THIS TUTORIAL WILL ALLOW YOUR CLIENTS TO VERY EASILY MANGE THEIR OWN FOOTER WITHOUT ACCESSING THE DASHBOARD

Something that we do for our website clients here in-house at BeyondBeaver.com is allow them to edit the footer on the home page and then it automatically updates at the bottom of every page. Sure, you could create a Global Saved Row in Beaver Builder and manually add it to every page, but that is repetitive and you will not be able to add the footer to Custom Post Types or your Blog.

The method you’ll learn in this post will be full-proof and will ensure these two things:

  1. The footer will be very easy to edit for you and your website clients.
  2. The footer will be added to the bottom of ALL pages, no matter the Post Type. NOTE: You can, however, exclude post type using WordPress Conditional Tags.

Step 1: Create your new Footer rows in Beaver Builder and save them as Global Saved Rows

Create a new Page in WordPress named Footer or something similar (don’t worry, we’ll delete this later), edit it with Beaver Builder and design the footer that you’d like to have at the bottom of each page using Beaver Builder just like you would any other rows.

Below is the footer we’ll be added to the bottom of our website in this tutorial.

The below footer that we’re using in this example is made up of two rows:

  1. The black row: We’ll refer to this row from herein as the Footer Widgets row.
  2. The grey row: We’ll refer to this row from hereon as the Footer row.

Footer with Beaver Builder

Now, save each of the rows as Global Saved Rows by doing the following.

HOW TO SAVE ROWS AS GLOBAL SAVED ROWS

Firstly, edit the row by hovering on the row and clicking on the wrench icon – just how you would normally edit a row.

create-a-beaver-builder-footer-edit-row

Then, click on Save As… button.

create-a-beaver-builder-footer-save-as

Give your Saved Row a Name. (If you have two rows like we have above we suggest you name the first row Footer Widgets as we have done so you can follow this tutorial and name the second row Footer.)

Next, ensure you set Global: Yes in the drop-down, as per below. The key thing here (and why Beaver Builder is so damn powerful) is that by selecting Global: Yes you are making it so that you can update this row in one place and it automatically updates throughout your website. It’s incredibly awesome, as you’ll see!

create-a-beaver-builder-footer-save-row-name-global

So that’s the first row saved.

If you have a second row like us (i.e. the grey row at the bottom in our example) then repeat this step and save the second row as a Global Saved Row.

Now, after you’ve saved these Rows as Saved Rows, they are now in your website’s database, so you can go ahead and delete this page you’ve created to build the Footer rows with Beaver Builder.

Step 2: Hook the Saved Rows you want to use as your footer to the bottom of your WordPress website using the appropriate action hook in your WordPress theme

Now that you’ve created the Global Saved Rows you’d like to add to the bottom of your website, let’s do some magic and actually insert them at the bottom of each Page and Post.

To do this, we need to write a quick snippet of PHP.

It’ll be easy!

In your FTP editor (or however else you access your WordPress files), navigate to your theme files and edit the functions.php file inside your WordPress theme.

In your functions.php file, copy and paste the below code.

THINGS TO NOTE WITH THE ABOVE PHP SNIPPET

  1. In the above example, we are adding our saved footer rows to the bottom of each page using the fl_after_content action hook which is in the Beaver Builder Theme. If you are using a different theme to the Beaver Builder Theme you will need to work out which action hook you should use.
  2. We have added if(!is_front_page()): which is a WordPress conditional tag. Basically, this code checks to see if the page that is loading is the front page of your website, and if it IS NOT the front page of your WordPress website, it will output the saved rows. Why aren’t we outputting our saved footer rows on the front page? Because we will add the saved rows to the front page manually. When we want to edit the footer rows in the future, we can simply edit our home page and then click the wrench on these footer rows to edit them. More on this below, but this simple technique is extremely useful when your clients need to be able to edit their footers as it doesn’t require them having to edit the rows by going to the WordPress Dashboard and then Templates.
  3. The Beaver Builder Shortcode: This shortcode comes built-in to the Beaver Builder Plugin and it outputs a saved row. The slug will be the name you gave the Saved Row above in lowercase letters and with hyphens where the spaces are. For example, we named our first row to be included at the bottom of each Post and Page Footer Widgets so our slug for this is footer-widgets. Now, if you used a different name for your Saved Rows, you will need to update the above code to have the slug of your Saved Rows as they will be different to the slugs used in our example.

Once you complete adding this PHP code correctly into your functions.php file, the Saved Rows you have added using the function should now show down the bottom of all pages EXCEPT the front page of your website, as per below.

On the left in the screenshot below is the front page where the Saved Rows we’re outputting for the footer are not showing on the front page and on the right is a screenshot of another page where the footer rows are being output at the bottom.

Again, these saved rows are not showing on the front page because of the if(!is_front_page()): we wrapped the shortcodes in (which only outputs them on the front page).

create-a-beaver-builder-footer-not-showing-on-the-homepage

So, why are we intentionally NOT outputting them on the front page of our website?

Because we want our clients to be able to easily edit them WITHOUT having to access the backend Templates section. If this doesn’t make sense, please keep reading.

Step 3: Add the Saved Rows you’ve created for your footer to the bottom of the home page of your website

Edit your home page with Beaver Builder and, on the right under the Saved Rows section, drag the two saved rows that will make up the footer into the bottom of the page, as per the animation below.

create-a-footer-you-can-easily-edit-beaver-builder

Now, when you or your client want to edit the Footer Rows, you can simply edit the Home page of your website and access the Saved Rows used for the footer here.

When you edit one of the saved rows in the Footer on the home page, they’ll update at the bottom of all pages on your website.

How cool is that!

Step 4: (optional) Show Admin Templates in your WordPress Dashboard so you can easily edit your saved rows

Saved Rows in Beaver Builder are actually their own post type (the post type is called fl-builder-template) and you can edit them individually from the WordPress Dashboard if you’d like.

To do this, go to your WordPress Dashboard > Settings > Page Builder > Templates and CHECK Enable Templates Admin, as per below.

femiblogger-enable-templates-admin

Once done, you’ll see a new WordPress Admin menu item named Templates, as per below. When you click on this new menu item Templates you’ll see your Saved Rows that you saved in the previous steps. This is another way you can edit the Saved Rows and can be useful in some cases.

templates-admin-menu-item

EXAMPLES OF WHEN ACCESSING TEMPLATES VIA THIS MENU ITEM CAN BE USEFUL

  1. If you don’t want to allow your clients to edit the footer on their website. You’d follow the exact steps discussed in this tutorial but you’d remove the if(!is_front_page()): and endif; from the PHP code snippet above so that the Saved Rows for the Footer are output on all pages (including the front page / home page of your website) and then you would SKIP Step 3 of this post.
  2. Changing the slug of a Saved Row is possible via this interface. To do this, click on Quick Edit and edit the value in the slug field, as per the below screenshot. NOTE: If you update the slug you ALSO need to update the PHP function above with the new slug of the Saved Row otherwise it won’t show.
    templates-change-edit-slug

Wrapping up this post on creating a footer with Beaver Builder

This is an incredibly powerful way to build your footer. By harnessing the power of Beaver Builder you’re able to build your footer using the drag-and-drop capabilities of Beaver Builder and you also have access to the Beaver Builder modules that come with the plugin and any other third-party addons for Beaver Builder that you’ve purchased (like the extremely useful UABB addon for Beaver Builder we discuss here that we recommend) .

Comment below

Please share examples of where you’re using Saved Rows and hooks to make your life easier for both you and your clients. Your comment could go on to help another member of the Beaver Builder community – something we strongly encourage.

8 Comments

  1. douglasmelo on December 24, 2016 at 3:49 am

    Hi!

    Can I choose what pages the footer will load?

    For example…

    Is it possible to load woocommerce pages without the custom footer?

    Amazing tutorial… Thank you so much!!

    • Grant Ambrose on December 24, 2016 at 9:59 am

      yep sure!

      in the above PHP code where I wrote if(!is_front_page()): you could also do something like

      if( !is_front_page() && !is_woocommerce() && !is_cart() && !is_checkout() ):

  2. KrispDesign on January 16, 2017 at 2:57 pm

    Heya

    Great Tutorial – just what I was looking for…

    How do I get rid of the default footer widgets and / or footer with copyright info?

    The rest has worked fine for me . Cheers!

    • Grant Ambrose on January 20, 2017 at 11:32 am

      Hi there! Are you using the Beaver Builder Theme? If so, go to Appearance > Customize > Footer and disable it from there 🙂

  3. John-M on February 23, 2017 at 7:29 am

    Hi Grant, this worked out pretty well. Good implementation. The only thing I see is that this method will load the custom footers on all pages, such as the custom 404 page where it’s not really needed. How would one go about excluding the footers loading on a custom 404 page? I checked WordPress for this but still left unsure about the Beaver Builder method!

    • Grant Ambrose on February 27, 2017 at 9:16 am

      Hi mate, so you can just add new WordPress conditional tags to the PHP code.

      Currently, in this tutorial we do not load it on the home page by doing if(!is_front_page()): which says “as long as it isnt the front page, output our footer”.

      We can add to this

      if(!is_front_page() && !is_404()): which also does’nt output it on 404 pages. Here’s the 404 documentation from the WordPress codex 🙂 https://codex.wordpress.org/Function_Reference/is_404

      • John-M on February 28, 2017 at 5:14 am

        Thanks mate, I get that conditional use now!

  4. Jenc on June 11, 2018 at 3:30 pm

    I’ve followed the tutorial but the social media icons I have in the footer aren’t loading on the mobile version of all of the pages except the homepage. Any ideas what I can do to fix this? Thanks!

Leave a Comment

You must be logged in to post a comment.