I often read that allowing the Divi footer to be editable is one of the most requested features in Divi. So much so that there are a number of tools and plugins that do this for you. However, I don’t think it’s that difficult to set up something by hand that is pretty useful.

Basically, we are going to create a page (that we can edit just like we can edit any pages with Divi Page Builder) then ‘inject’ that page into the footer. After we do this, anything we add to the page will appear in the new global footer.

So, create a page called footer (or somesuch).

Add the code below to either the footer.php in the Divi theme (not recommended) or to the footer.php in your child theme…

<?php
  /* CM Code to inject the editable footer page */
  $footer_page = get_post( get_page_by_path('footer') );
  $content = apply_filters( 'the_content', $footer_page->post_content );
  $content = str_replace( ']]>', ']]&gt;', $content );
  echo $content;
?>

Divi Visual Page Builder

If you are in the habit of using the new (V3.0) Visual Page Builder you will find that the above does not work. I think this is because the Visual Page Builder does not expect to find a page inside the footer! To get around this you could use this instead –

<?php
   if (! et_fb_is_enabled() ) {
      $footer_page = get_post( get_page_by_path('FOOTER') );
      $content = apply_filters( 'the_content', $footer_page->post_content );
      $content = str_replace( ']]>', ']]&gt;', $content );
      echo $content;
   }
?>

The idea of this is that it stops the footer from being displayed by the Visual Page Builder. It looks a bit odd, not having a footer but it’s not editable anyway when editing other pages, and displaying it breaks the visual editor so, on balance, though not perfect this does provide a solution. In any case, you can of course use the visual editor on your actual footer page.

Where to Insert the Code?

Now there are various places you can insert this code in footer.php depending on where you want your new footer to appear…. I usually insert this code immediately before the Divi footer is generated. Here is an example of a modified footer.php (using the Version 2.7.10 Divi file as a base). The new code is at line 17.  I put it before the call to get_sidebar so my new footer appears above the Divi default footer. In truth, when I make this change I don’t usually have anything in the Divi footer….

<?php if ( 'on' == et_get_option( 'divi_back_to_top', 'false' ) ) : ?>

  <span class="et_pb_scroll_top et-pb-icon"></span>

<?php endif;

if ( ! is_page_template( 'page-template-blank.php' ) ) : ?>

      <footer id="main-footer">
      
        <?php
          /* CM Code to inject the editable footer page */
          if (! et_fb_is_enabled() ) {
             $footer_page = get_post( get_page_by_path('footer') );
             $content = apply_filters( 'the_content', $footer_page->post_content );
             $content = str_replace( ']]>', ']]&gt;', $content );
             echo $content;
          }  
        ?>
        
        <?php get_sidebar( 'footer' ); ?>

    <?php
      if ( has_nav_menu( 'footer-menu' ) ) : ?>

        <div id="et-footer-nav">
          <div class="container">
            <?php
              wp_nav_menu( array(
                'theme_location' => 'footer-menu',
                'depth'          => '1',
                'menu_class'     => 'bottom-nav',
                'container'      => '',
                'fallback_cb'    => '',
              ) );
            ?>
          </div>
        </div> <!-- #et-footer-nav -->

      <?php endif; ?>

        <div id="footer-bottom">
          <div class="container clearfix">
        <?php
          if ( false !== et_get_option( 'show_footer_social_icons', true ) ) {
            get_template_part( 'includes/social_icons', 'footer' );
          }
        ?>

            <p id="footer-info"><?php printf( et_get_safe_localization( __( 'Designed by %1$s | Powered by %2$s', 'Divi' ) ), '<a href="http://www.elegantthemes.com" title="Premium WordPress Themes">Elegant Themes</a>', '<a href="http://www.wordpress.org">WordPress</a>' ); ?></p>
          </div>	<!-- .container -->
        </div>
      </footer> <!-- #main-footer -->
    </div> <!-- #et-main-area -->

<?php endif; // ! is_page_template( 'page-template-blank.php' ) ?>

  </div> <!-- #page-container -->

  <?php wp_footer(); ?>
</body>
</html>

Another thing I often do is just remove lines that generate the bottom footer (lines 42-52 in the above version of Divi). This is because there is no option to switch this off from Divi customisation or options. You can switch off the social buttons but not the ‘designed by’ on the left. Taking lines 40-50 out from the footer.php means that the bottom footer is not generated. Of course, if you want to add the equivalent to your new footer page this is easy and it will allow all of the footer elements to then be in the one place and easily edited.

Just bear in mind that there are a couple of interesting side effects of this approach…. First, because this is a page, it is NOT going to inherit any of the footer styling from the Divi Options panel and this will need to be applied by hand. Second, because this is done by using a page, you now have a page in your website called ‘footer’…. Lastly, you won;t be able to use plugins that automatically add items to the footer. This is because these will be added to the pages, and to the ‘footer page’ eh…. because it is a page…. thus anything added automatically to the footer will actually appear twice on each page – once at the bottom of the original page and once at the bottom of the ‘footer page’.

Here’s an example of what this ‘problem’ looks like. I’ve added Simple Share Buttons Adder and set it up to automatically appear at the bottom of the home page –

As you can see, it appears twice, once at the foot of the page and again at the footer of the ‘footer page’. As it happens, Simple Share Buttons can also be used as a widget so it is not that difficult to simply create a new Sidebar area (in Appearance-> Widgets) and then use the Divi Sidebar Module to add this plugin into the new footer (page) instead and avoid this problem.

Now, sometimes the above doesn’t work in all circumstances – the formatting of the new footer is off. Sometimes the footer width isn’t correct or images are the wrong size…. Sometimes it works on pages but not posts. Or it works on pages and posts but not on slightly more obscure items such as 404 error pages. Obviously, we are rendering a page in a place where pages don’t usually get rendered – inside the theme footer. When this goes wrong it’s as though there is missing css styling…. You might find that using the following instead will help…..

<div class="et_builder_outer_content" id="et_builder_outer_content">
<div class="et_builder_inner_content et_pb_gutters3">			
  <?php
    /* CM Code to inject the editable footer page */
    if (! et_fb_is_enabled() ) {
      $footer_page = get_post( get_page_by_path('footer') );
      $content = apply_filters( 'the_content', $footer_page->post_content );
      $content = str_replace( ']]>', ']]&gt;', $content );
      echo $content;
    }
  ?>
</div>
</div>

 

This version has some extra DIVs wrapped around the code, so the page is rendered inside the footer but inside these extra DIVs, picking up their CSS styling where appropriate. These are DIVs that are present when pages are rendered but missing, in some circumstances, in the footer, messing up the styling.

Subscribe To Our Blog

If you found our blog article useful, why not subscribe? Get all of our articles and tutorials delivered direct to your inbox!

You have Successfully Subscribed!