Using Divi Template Hooks to Add Global Footer Layout

Divi Freebies, Quick Divi Tips | 29 comments

Oftentimes, when using the Divi theme, we find ourselves with the need to build our website footer using the Divi Builder rather than standard WordPress widgets. At first, you try playing with the global sections – you place your global section on each page and post manually. That approach works well to some extent, but if you’re using a blog, you might not want to use the Divi Builder on each post. Not to mention the pages like archives, blog categories, search results – all of these can’t be edited with the Divi Builder as of yet.

Divi Theme Builder

Elegant Themes have already announced they’re working on something they called the “Theme Builder”, which will allow us to use the Divi Builder to design every pixel of our website. There is no ETA on this feature yet, all we know is that it’s on the roadmap. So until then – there’s a pretty simple method to display any Divi layout as a global footer – without editing the footer.php file, so let’s dive in!

First – the Footer Layout

It doesn’t really matter what method you’ll use to create your footer layout. You can use one of Divi’s pre-made layouts, create one from scratch using the Builder, or (if you’re our subscriber) you can download the one I made for this tutorial:

All that matters is that your layout is saved in the Divi Library.

Free Resources for Divi Lovers

Join our newsletter to get the good stuff!

We’ll provide you with updates on new tutorials, webdesign assets and special offers. Get top quality Divi goodies straight into your inbox! Read our Privacy Policy to learn how we manage and protect your submitted information.

Sign up to download

Get access to this layout and all the free resources made exclusively for our subscribers!

Already subscribed?

Fill the signup form and if you’re on the list it’ll get you straight to the download page!


Can’t see the form? Click here

The Divi Library & Layout ID

For this method to work, we first need to know the ID of the layout we want to use. If you navigate to the Divi Library and choose to edit your layout, you’ll be able to see the ID in the browser address bar. You should see something like this:
…yourwebsite.com/wp-admin/post.php?post=787&action=edit

787 is the layout ID in this example.

Divi Template Hooks

Divi version 3.2 (the so-called Developer Edition ;-)) has introduced new template Hooks (Filter and Actions). You can read all about it in Elegant Themes Documentation page, but in this tutorial we will be focusing on one hook in particular.

The et_after_main_content is an action hook, and – just like any WP action hook – it is triggered at a specific time when WordPress is running and lets us take an action. We can read in the Divi documentation that it fires after the main content, before the footer is output. And that is a great time to insert our footer, right?

Add function to functions.php

We need to add a function to our child theme’s functions.php file. Remember not to edit the Divi theme directly as any changes made in the Divi template files will be lost with the next update. And if you’re using a premium Divi Child Theme and you don’t want to edit its files either – you can create a simple plugin and include this function inside.

This is the code we’ll need:

function dl_custom_footer() {
	echo do_shortcode('[et_pb_section global_module="787"][/et_pb_section]');
	}
add_action('et_after_main_content', 'dl_custom_footer');

That’s it

Just remember to change 787 to your own layout ID and you’re all set having a truly global footer.

In my next post, I’ll show you how to apply conditional logic to your function in order to display layouts on specific pages using WordPress conditional tags, so make sure you don’t miss that one!

Feeling generous?

If you like my tutorials and want to see more free resources like this, please consider making a donation.

Personal Info

Donation Total: €5.00

Have you seen our Divi Child Themes?

We offer a great selection of high-quality designs to speed up your work. Feel free to use a coupon code IREADBLOG at the checkout to get a 10% discount!

29 Comments

  1. steve prud'homme

    Hey great thanks glad I found this, how would I add it with a plugin?

    Reply
  2. Mark (DaPs)

    Thanks very much for easy to understand explanation Ania 🙂

    I came here from divi.space (more than once!) and just wanted to says thanks.

    Reply
  3. Murph

    Thank you for this Ania. I’m looking forward to the post on using this with conditional logic. Any idea when you will post it? 🙂

    Reply
    • Ania Romańska

      Thanks! It’ll ready after the weekend 🙂

      Reply
  4. John J.

    I want to hide this on just the landing page. How would I do that? Thank you!

    Reply
      • John J.

        Thank you! You’re wonderful, and very talented.

  5. Sheila McRae

    Love the global footer, but have a requirement to hide it on one page of a website. Is there an easy way to do this?

    Reply
    • Ania Romańska

      Yes, you’d need to wrap the echo part with a condition that says “if not this page..”, something like this:

      if (!is_page(999)) {
         echo ... the same shortcode as before....
      }

      Just replace 999 with this page ID.

      Reply
  6. Allan Anova

    i tried this and followed all instructions but the footer is not appearing.. is it because of my cache or plugins?

    Reply
    • Ania Romańska

      I don’t thinkg caching could be the issue. Make sure you you’re not using any custom footer.php in your child theme already.

      Reply
  7. Donal

    Great tutorial.

    Can this be done to replace the header/menu using the et_html_top_header hook?

    Reply
    • Ania Romańska

      The et_html_top_header and et_html_main_header are filter hooks, so it works a bit different – but yes, with that function you would replace the default content of #top-header or #main-header with your section.

      Reply
  8. Yari Bernardus

    We used to add the footer to all our pages. With this simple yet powerful option we have enabled a global footer on our Divi Resources website: http://www.divistream.com!

    Reply
  9. Gerard

    Thanks Ana for sharing quality content!

    Reply
  10. Joe

    Great post! I just did the same thing for another client using a slightly different method by making a footer.php file in the child theme and adding the following:

    Your way is more efficient but the above method allows you to place the layout anywhere in the footer.

    Thanks for all the great posts!

    Reply
  11. Tess

    No way! I was just looking for something like this when your email came through.

    Thank you, we got it working in no time 🙂

    Reply
  12. Xus

    Could work inserting the code through a code snippet plugin?

    Reply
  13. nordie

    i really like this. But something is missing

    you say: move the CSS from the Code Module.
    In the supplied json there is no Code Module

    Reply
  14. Dante

    Finally got it working, just a bit of user error on my end putting it in the functions.php file.

    Works beautifully! Awesome tutorial.

    Reply
  15. nordie

    strange this does not work with the Extra theme

    Reply
    • Ania Romańska

      I’d guess that Extra has different tamplate hooks (if any), but there is nothing in the documentation on that I’m afraid, so you’d need to go through the Extra template files to check if there are any hooks available.

      Reply
  16. Dante

    Trying this method it seems that the section that is saved to the library is losing all of its styling. Any idea how to make the style apply to the section you are trying to make the global footer or any idea what might be causing that issue?

    Reply
    • Ania Romańska

      Can you share your page URL and details what exactly seems to be missing? The settings you set within the Divi Builder options should apply normally, but if you are using some custom CSS that targets this section by its number (eg. et_pb_section_1 class) – this may not work and you would want to change it to some custom CSS class, as that number is added dynamically and can be different on different pages.

      Reply
      • Dante

        Could you give me an email to share it to, rather than in the comments here?

      • Ania Romańska

        Sure, it’s hello[at]divilover.com

  17. Daniel Stadeli

    Thanks Ania, good job explaining the global footer!!

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *


Sign up to our newsletter!


Shares

Sign up for the good stuff!

Free Resources for Divi Lovers!

Join our Newsletter!

We'll provide you with updates on new tutorials, webdesign assets and special offers. Get top quality Divi goodies straight into your inbox! Read our Privacy Policy to learn how we manage and protect your submitted information.

Pin It on Pinterest