How to Use Divi’s Hooks

Some time ago now, Elegant Themes made huge strides in helping developers extend Divi in new and exciting ways.

While lots of kudos were given for the create-divi-extension command line interface that makes the development of modules much easier, one of the best features in recent times flew under the radar in the same release.

I’m talking about Divi’s template hooks, which you can read more about here.

If you’re not too familiar with hooks, let me explain them a little bit.

A hook allows you to add your own code to a template file without ever having to touch the file itself. Divi now has a bunch of these hooks placed throughout its template files so if we wanted to, we could change the way Divi looks or behaves from a plugin or a child theme’s functions.php without ever touching Elegant Theme’s files.

Let’s look at an example:

Divi header menu
  • Google+
  • Facebook
  • Twitter

Say you wanted to add a button to the header. Before template hooks, you might have copied the header.php into a child theme just to make that small adjustment, and now you have to ensure that header is manually updated every time you update your parent theme… urgh.

Or maybe you used jQuery to create the button and move it into the header. Slightly less urgh, but still, DOM manipulation after the page has loaded should be avoided where possible.

With hooks this becomes easy, you simply grab the html you want to insert…

<a class="et_pb_button header_button" href="#">New Button</a>

And then pop this into a function…

function et_header_top_hook_example() {
 echo '<a class="et_pb_button header_button" href="#">New Button</a>';
}
add_action( 'et_header_top', 'et_header_top_hook_example' );

The function name doesn’t matter as long as it’s unique, the important part here is that the action is tied to the et_header_top hook. That hook is placed just before the closing tag of the et-top-navigation element, so that’s where this code runs.

I think you’ll agree, that of the three ways of doing this that we’ve discussed, that this is by far the cleanest and easiest.

So we’ve covered off et_header_top, there are a few more places you can add actions using ET’s hooks, the rest of this post is dedicated to listing them and giving you practical examples of code you could easily run using them.

Hook: “et_after_main_content”

This hook is great for adding a global footer to your blog using a pre-built Divi library item. As a community, we’ve been using the echo do_ shortcode(‘[et_ pb_ section global_module=”##”]’); trick to push library items to various places using various wp hooks, now we can use ET’s.

This fires straight after the main-content div right before the standard footer would appear if you were using it.

function et_header_top_hook_example() {
 echo '<a class="et_pb_button header_button" href="#">New Button</a>';
}
add_action( 'et_after_main_content', 'et_header_top_hook_example' );

This is a fairly basic demonstration of this implementation, if you would like something a bit more step-by-step, check out this blog by Divi Lover.

 

Hook: “et_head_meta”

This hook is great for adding meta or scripts that you need to load before anything else. Just look at the example and screenshot to see where the hook fires.

function et_header_top_hook_example() {
 echo '<!--This is a great place to add meta, it is above eveything!!-->';
}
add_action( 'et_head_meta', 'et_header_top_hook_example' );

Chrome inspect element
  • Google+
  • Facebook
  • Twitter

 

Hook: “et_before_main_content”

Fairly self-explanatory after the example of et_after_main_content. This hook fires before the main-content element and can be used for dropping in extra content. Check out this example where we grab the page title:

function et_before_main_content_hook_example() {?>

<!-- Example of getting the title and placing it above content -->
<div class="title-block">
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a>
</div>

<style>
.title-block {
   background: #ed4441;
   padding: 60px 20px;
   text-align: center;
 }
.title-block a {
   color: #fff;
   font-size: 2em;
 }
</style>
<?php
}

add_action( 'et_before_main_content', 'et_before_main_content_hook_example' );

 

Divi header
  • Google+
  • Facebook
  • Twitter

 

Hook: “et_before_content”

As you’ve probably figured out by now the et hooks are very well named and it’s pretty obvious where they fire off.

The et_before_content is no exception and it is run, you guessed it, just before the content on posts in single.php. In this example, we’re going to look at how we can add some author info to the top of our posts.

function et_before_content_hook_example() {?>
<div class="author-box">
<?php echo get_avatar( get_the_author_meta('email'), '80' ); ?>
<h2><?php the_author_posts_link(); ?></h2>
<p><?php the_author_meta('description'); ?></p>
</div>

<style>
.author-box {
   display: block;
   position: relative;
   width: 100%;
   background: #f1f1f1;
   text-align: center;
   padding: 30px 20px;
   margin-bottom: 30px;
}

.author-box img {
   margin-top: -70px;
   border-radius: 50%;
}

.et_pb_post .entry-content {
   padding-top: 0;
}

</style>
<?php
}

add_action( ‘et_before_content’, ‘et_before_content_hook_example’ );

Add author bio to blog posts in Divi
  • Google+
  • Facebook
  • Twitter

There you go, simple and effective use of Divi’s built-in template hooks. For a full list of available hooks, be sure to check out the Elegant Themes Developer Documentation.

If you’ve used the hooks in an imaginative way, be sure to share it in the comments!

We want to hear from you!

Have you worked with Divi’s hooks? What has your experience been like? Share your thoughts in the comments section below! We love recieving your feedback.

Thanks for reading!

Stephen James

SJ is a web developer living in the coastal town of Southsea, England. He is a Divi and WordPress advocate and the founder of Divi Space.

Previous post
Next post

18 Comments

  1. Aaron Biby

    This is fantastic! I’ve heard you all discussing this functionality for a little while but this is a very helpful demonstration of how easily it can be used. I definitely see myself implementing this to help “automate” design for clients who should only be touching content, not layout. Thanks!

    Reply
    • Stephen James

      Thanks Aaron. Yes its a great way to add those things you need on each page without training clients.

  2. Flo Nelson

    Thanks for this! Very helpful.

    Reply
  3. Mark (DaPs)

    This is really cool Stephen! Thanks very much for sharing.

    As with any function, can we now use php then and not just restricted to html?

    Time to remove that shortcode from my footer.php 🙂

    Reply
    • Stephen James

      Thats correct 🙂 you can use php just as you would in any other function, just make sure youre opening and closing it off properly.

  4. Zach w

    Hi SJ,

    Thanks for the informative article. Quick question: Where would you insert your the functions??

    Reply
    • Terry Hale

      You can put code for the hooks into a plugin or your child theme’s functions.php file! 🙂

    • Stephen James

      Hi Zach, in a child theme’s functions php is best but it’d be just as at home in a functionality plugin 🙂

  5. Logan Ramirez

    This is really great, SJ! Thank you for posting this! I had been wanting to read about it for awhile, but not taking the effort on my own…so you’re write-up (with examples) was helpful and an eye opener. Thank you, again.

    Reply
    • Stephen James

      My pleasure Logan 🙂

  6. Sandy

    Is a hook available for the click event of the email form submit button? A client wants to do AdWords tracking to try to measure conversions. My temporary solution is to redirect to a new thank you page. I really dislike this approach though. If no hook is available, do you have any possible solutions? I’ve searched and don’t find anyone writing about this with Divi. Thank you!

    Reply
    • Stephen James

      Hi Sandy, this sounds like a job better suited to google tag manager. If you’re not using it then I would suggest checking it out.

  7. Justin

    Hi Stephen, great article and nice read! Definitely one of the best ways to create custom Divi functionality for clients. Quick note, looks like the 2nd and 3rd Codeboxes were repeated. I figure you were just going to example the echo do_ shortcode(‘[et_ pb_ section global_module=”##”]’); trick that you mentioned, but it got me curious just what you might use in your hook function after you mentioned using ET’s solution.

    Anyway, thanks for the well written info and Best Regards,
    Justin from wpAppDev

    Reply
    • Stephen James

      Hi Justin, thanks for reading. I’m not sure I’ve fully understood your Q. Could you give me some more info and I’ll try to help. Cheers.

  8. Olivier Bourgain

    Hi Stephen,
    Thanks for pointing out the use of Divi’s hooks. I didn’t know that before your post.

    I’d like to use et-html_top_header hook to replace the ugly upper phone and telephone bar.
    But it echoes as if it were et_before_main_content hook.
    Did you notice that ?

    Kind regards,
    OlivierB.

    Reply
    • Stephen James

      Hi Olivier, you’re right, the header elements in Divi have fixed positioning, so they sit outside of the standard dom structure. What you could do is echo the shortcode using the nearest hook and then use jQuery to replace the top header container with the new element? I think that’s about the cleanest way to go. Thanks for reading the blog 🙂

  9. Vassilis

    Hi thank you for your info these are very usefull and open new divi implemantions!
    can you please tell me if there is a filter hook or a way to add content inside the

    this is the container for main menu, search icon and main menu mobile.

    I used the “et_html_logo_container” filter hook but this will place the code outside of the et-top-navigation div. I even have tried with the generic wordpress filter hook “wp_nav_menu_items” but this will place the code inside the top-menu-nav. I’m asking this cause I want to place a little flag after the search icon, if the code is placed inside the top-menu-nav then the icon will be part of the menu and will disappear in mobile version cause will be inside the hamburger, I want this flag to be always visible. If you open my site you will notice a SEARCH text on top left, this is obtained trough the “et_html_logo_container” but if you inspect you will notice that is outside of the et-top-navigation div.

    Reply
  10. Jared K

    Hey James, nice article. I’m using action hooks pretty comfortably, but want to append something to the end of main content instead of after main content.

    Any ideas on how to accomplish this?

    Reply

Submit a Comment

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


Receive notifications about our new blog posts.


Don’t leave before entering to win an iPad Pro! It’s Free!

You may be too early for our Black Friday specials, but you can still enter our competition! Leave your details below and you could win an iPad Pro!

Great you've entered our giveaway! Only one step remaining! Please check your email and confirm it.