You can inject a custom Divi layout from your Divi Library underneath your Default Divi Header using the new Divi Hooks. All we have to do is add a simple snippet of PHP to your functions.php file.
I use this snippet here on Quiroz.co so that my search header and secondary fullwidth menu displays on each primary page and only the fullwidth menu appears on the single post pages. I also included a section for banner ads which makes it easy to edit (or remove) the banner ads from within the Divi Library.
So in this tutorial, I will show you how to inject a custom Divi layout underneath your Default Divi Header. To do this you will need a basic child theme with a functions.php file.
UPDATE: If you are using a child theme that with an older version of Divi’s header.php and footer.php, before they added the hooks, then you will need to update those files.
Let’s Get Started Setting up the Divi Header Section.
Adding the layout
1. Go to your Divi Library and add a new layout.
2. Give it a name and choose Layout as the the Layout Type.
3. In my demo I am creating a section for my logo, a title, and search module. I am also adding a fullwidth section for a fullwidth menu below it.
Adding The PHP
4. Go to Appearance>Editor and open your functions.php file and you are going to insert the two functions below. Unfortunately my Syntax plugin does not know how to read the shortcode without messing up this page so you will have to write the code yourself or grab the snippet from the txt file below.
5. Your functions.php page should look like this after you have copied and pasted the snippet above.
Inserting the Divi Library Section into the PHP snippet
Now we are going to grab the layout shortcode and insert it into the PHP snippet above.
6. Go to your Divi Library and open up the layout you just created. Once you have the layout open, check out the URL and you will see a sequence of characters and numbers. You are going to want to grab the numbers as we will need that for the next steps. For example in my case, the number sequence that I want to grab is 27339. This is the URL in my example: https://montereydev.com/demos/divi/add-divi-layout-under-header/wp-admin/post.php?post=27339&action=edit
7. Go back to Appearance> Editor and open the functions.php where you added the snippet above and in this shortcode, replace the number with your own.
Adding The Custom CSS
For this tutorial, I am not using any custom CSS. But in the snippet above, I am adding a custom ID you can use to target the whole layout. The ID I am creating for it in the PHP is #header-below-menu
And that’s it.
If you used this on one of your projects, please share a link below so we can see how you used it.
Well, that’s all for now. I hope you find this article useful.
Great little tutorial – thanks! Hopefully, the Elegantthemes team will come up with the theme builder soon!
Just a question, what is the difference between the hook you used here and the other one mentioned in the linked Divi developer overview, (et_before_main_content)? It states that the hook you chose is a filter hook, while the other one I mentioned is an action hook, (‘Fires after the header, before the main content is output.’) but I am not sure what the difference is in practice. Could you elaborate on that please?
Bottom Line: “To summarize, WordPress hooks are a great way to extend the WordPress functionality efficiently without worrying about WordPress upgrades and not to scratch your head around the core code. I always recommend placing hooks into Plugins and Themes, As WordPress developers will be very grateful if they find that your plugin is already shipped with actions and filters. This will give your WordPress product more scalability and publicity.” -WASEEM, Founder and Lead Developer of WPRuby. https://wpruby.com/wordpress-what-is-the-difference-between-actions-and-filters/
Great Tutorial Geno! Is there a way this be injected above the default header/menu bar instead of below?
For sure: https://quiroz.co/inject-a-divi-layout-from-your-divi-library-above-the-default-main-header/
Awesome, Thanks Geno!
My pleasure 🙂
Geno, is it possible to have the added section stay attached to the fixed navigation upon scroll? Looking for a method to add a news ticker to a clients menu header.
I just released a tutorial for adding it above the main header here: https://quiroz.co/inject-a-divi-layout-from-your-divi-library-above-the-default-main-header/
I am working on a new tutorial for using it with the fixed header settings enabled.
Thanks for the information
Great tutorial! Question, is there a way to add the post or page title to a full width header image section with a hook?
I followed the steps and added the full width image on the website https://mannahouseacademy.com for single post. But I would like the title to be in the image like I manually added in all the pages including the homepage.
Thanks for your expert advice and help.
You could create a shortcode that returns the page title similar to the way I created a shortcode to return the search query in search results pages in this tutorial. https://quiroz.co/add-a-divi-header-layout-from-your-divi-library-to-the-search-results-pages-using-divi-hooks/
You will have to do a little research to modify the shortcode function to pull the page title instead of the search query.