Sometimes, the default footer is just not enough and you need something more advanced for your project. We made it easy with Page Builder Framework to display your custom Footer – built with your favorite page builder – throughout your entire website. Once you’ve saved your footer as a global row/template, there are 2 ways to do this:

Theme Hook Method

Paste one of the code snippets below to your child-theme’s functions.php and replace the id in the shortcode with the one of your saved row/template. We assume you’re using Elementor or Beaver Builder in this example:

Example (Elementor Pro):

add_action('wpbf_before_footer', 'my_custom_footer');
function my_custom_footer() { ?>
<footer role="contentinfo" itemscope itemtype="">
    <?php echo do_shortcode('[elementor-template id="xxx"]'); ?>
<?php }

Example (Beaver Builder):

add_action('wpbf_before_footer', 'my_custom_footer');
function my_custom_footer() { ?>
<footer role="contentinfo" itemscope itemtype="">
    <?php echo do_shortcode('[fl_builder_insert_layout id="xxx"]'); ?>
<?php }

Shortcode Method Premium

Most Page Builders give you the ability to display a saved row/template with a shortcode. Here are 2 examples:

Elementor Pro[elementor-template id="xxx"]
Beaver Builder[fl_builder_insert_layout id="xxx"]

Make sure to replace xxx with the actual id of your saved row/template. Now, all you need to do is paste your shortcode in the Custom Footer area under Footer -> Footer Settings in the WordPress customizer.

Custom Footer Shortcode area

Et Voilà! Your custom footer gets displayed on every page of your website.

Custom Footer Text

To customize the text in the footer of Page builder Framework without using the Premium Add-On, you can use the following filters. Simply copy the code snippet below to your child-theme’s functions.php to get started.

function custom_footer_left() {
    return "Copyright";
add_filter( 'footer-column-left', 'custom_footer_left' );

function custom_footer_right() {
    return "Powered by";
add_filter( 'footer-column-right', 'custom_footer_right' );

Remove Footer Text

In some cases you may want to remove the default footer text, for instance if you’re using a menu in the footer. To remove the footer text use the filters above and replace return "Copyright"; and return "Powered by"; with return false;.

Related articles

Page Builder Framework

A Page Builder’s best friend.

Sign up for the Newsletter

Get notified about the latest features and updates.

Join the Community