How to Use Divi’s Hooks

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:

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' );

 

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' );

 

 

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’ );

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.