Using Divi Template Hooks with Conditional Logic

Divi Freebies, Divi Tutorials | 15 comments

In my previous post I showed you how to display any layout saved in a Divi library as a global footer just by adding a function in the functions.php file. Let’s take this method one step further. In this tutorial, I’ll show you how to display different layouts on different pages using WordPress Conditional Tags. We’ll be able to create nice blog categories header section.

Divi Theme Builder

Elegant Themes have already announced they’re working on the “Theme Builder”, which will allow us to use the Divi Builder to design every pixel of our website. As soon as it’s available you won’t be needing this technique, but until then…

WordPress Conditional Tags

Conditional Tags are an awesome WordPress feature, which we can use to display different content on a given page, depending on the conditions that this page matches. A Conditional Tag simply checks if certain condition is met and returns either true or false. They usually work with PHP if /else Conditional Statements. You can find a list of all available tags in the WordPress Codex, and we’ll have a closer look at some of them in this tutorial.

Basic example:

<?php
if ( is_front_page() ) {
// do something
}
?>

Useful Conditional Tags examples:

  • is_home() – returns true if the main blog page is being displayed. If you choose to display a static page in Settings -> Reading, this tag will return true for the “Posts page”.
  • is_front_page() – returns true if the front of the website is displayed, it can be either a posts page or a static page.
  • is_single() – returns true for any type of single post.
  • is_page() – returns true if any Page (post type page) is being displayed.
  • is_page(99) – returns true if a page with the ID 99 is being displayed.
  • is_page(‘sample-page’) – returns true if a page with the slug “sample-page” is being displayed.
  • is_page(‘Sample Page’) – returns true if a page with the title “Sample Page” is being displayed.
  • is_category() – returns true if a category archive page is being displayed.
  • is_category(99) – returns true if a category with the ID 99 archive page is being displayed.
  • is_category(‘sample-category’) – returns true if a category with the slug “sample-category” archive page is being displayed.
  • is_category(‘Sample Category’) – returns true if a category called “Sample Category” archive page is being displayed.
  • is_tag() – returns true if a tag archive page is being displayed.
  • is_author() – returns true if an author archive page is being displayed.
  • is_search() – returns true when a search result page archive is being displayed

Sometimes we may need to do something on every page but one, or on every category except for one. The ! will help (exclamation mark is a PHP logical operator for “Not”). Take a look at this code:

<?php
if ( !is_page(99) ) {
// do something everywhere except for the page with the ID 99
}
?>

 

Editing Divi Blog Category Pages

If you have a Divi blog with multiple categories, you might want to display different headers for each category. Normally, we can’t edit that part of the page, but we can use et_before_main_content Divi template hook to display our layout right between the top navigation and blog posts list.

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

Setting Up the Layouts

We need to create separate header designs and save each one as a separate layout in the Divi Library. My example uses additional layout for the main blog page, which is the page you’d choose as “Posts Page” in your WordPress dashboard under Settings -> Reading. I have 5 categories on my sample blog and 6 layouts to be used saved in the Divi Library.

Display Divi Layouts with a Template Hook

Divi comes with a few template Hooks (Filter and Actions), which allow us to add custom code to different parts of the site without editing template files. You might want to read this guide by SJ James from Divi.Space explaining how the hooks work. You can check all the available template hooks in the Divi Documentation page.

In this example we’ll use the et_before_main_content action hook, which is triggered after the header, before the main content is output. That is the perfect moment to place some custom aheader design.

Add function to functions.php

We need to add a function to our child theme’s functions.php file. This is the code I used:

function dl_blog_headers() {
	if ( is_category('travel')) {
		echo do_shortcode('[et_pb_section global_module="13318"][/et_pb_section]');
	}
	elseif ( is_category('beauty')) {
		echo do_shortcode('[et_pb_section global_module="13355"][/et_pb_section]');
	}
	elseif ( is_category('health')) {
		echo do_shortcode('[et_pb_section global_module="13358"][/et_pb_section]');
	}
	elseif ( is_category('food')) {
		echo do_shortcode('[et_pb_section global_module="13359"][/et_pb_section]');
	}
	elseif ( is_category('fashion')) {
		echo do_shortcode('[et_pb_section global_module="13356"][/et_pb_section]');
	}
	elseif ( is_home()) {
		echo do_shortcode('[et_pb_section global_module="13359"][/et_pb_section]');
	}
}
add_action('et_before_main_content', 'dl_blog_headers');

That’s it!

What this function does is simply display different layouts on different category pages. Make sure you replace your layout IDs and category slugs (you can use slugs, category name, or category ID).
You can check the layout, category or page ID in the address bar of the browser when you’re editing that element (it is in this part of the URL: …/wp-admin/post.php?post=999… ).

If you’re our subscriber feel free to download the categories header layouts I use on my sample demo page.

Any other ideas?

Please share any other modifications to your Divi-based websites you were able to make using this method. I’d love to hear all about different ways you’re using Divi Hooks and conditional logic. And if you have any questions or would like me to create more similar tutorials with different use cases – let me know in the comments!

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!

15 Comments

  1. Walter Corredor

    Anya! You saved my day. Thanks a lot!

    Reply
    • Walter Corredor

      Anya, i guess that you’re busy. I’ve tested in localhost but in the live site, there are not changes. What could it be?

      Reply
  2. Guille

    Hey Ania, thank you so much for this tutorial,
    in additon to this i made hook for woo commerce in the shop and product category page

    if ( is_shop())
    if ( is_product_category())

    Reply
  3. minervewebstudio

    Thank you so much for this tutorial.
    Really nice php function for adding some new stuff in our pages.

    Reply
  4. mmromanc

    Hi, Ania.
    Loved this tutorial.
    One question: How can I use the same method, but for woocommerce product categories instead of blogcategories? And use the (is_home) for the Shop page?
    Thanks

    Reply
    • Ania Romańska

      Hi, Here‘s a list of all Woocommerce Template Hooks you can use. A quick Google search for “woocommerce hooks visual guide” will help as well 😉

      Reply
  5. Rambo Ruiz

    Wow thanks Ania! This is really great! I’m not really good with php just yet and so you showing the steps and “why” was really helpful!

    Reply
  6. Narwastu Nagoro

    Hi Ania, thanks for all your tutorials. It’s really help me a lot.

    Reply
  7. BOB

    Great tutorial, will bookmark and if neded will get back to it. Thank you.

    Reply
  8. Hurri

    Hi Ania,
    As an owner of one of your child themes I know just how great your work is and I always look forward to your snippets of code and layouts to help me tweak my own work.
    Thank you so much for your efforts and keep them coming we all look forward to and appreciate them!
    Cheers
    Hurri

    Reply
  9. Jason Paulo

    This is a very helpful tutorial! Now we’re being introduced to php.. Thank you Ania! 🙂

    Reply
  10. Admir Rosa

    Hello Ania!
    I’m brazilian. I was an Adobe Muse user and I currently signed with Blocsapp. Very good but only for Mac! Parallel I decided to invest in WordPress. On the way I found the Divi. I signed Elegant Themes. I study every day. It’s Extraordinary! In Youtube I found your video How to Add Global Footer Using Divi Template Hooks and I was in love with your work. It’s clean, creative, it’s perfect. Congratulations! Later this year I will be participating in your projects with template purchases or donations. Believe me, your work is great! Thank you, Health and Success for you!

    Reply
    • Ania Romańska

      Hi Admir,
      Thank you so much for your kind words! I really appreciate it. Wish you all the best on your new WordPress and Divi journey 😉

      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