How to Output Divi Builder Code in the Header
I have always wondered how to make use of the Divi modules and place them on my header.php file, since there is a ‘Blurb’ module I would like to have placed under my site’s header.
You must take note that if you cannot make use of the Divi ‘Global’ feature, then the following post is your next best solution.
So I’ve created this guide on how to output any Divi builder code into your Theme’s PHP template files.
How to output Divi shortcode in the Header
- Go to Pages, and choose your Page to extract Divi builder code from
- (Or if you’re building your page, press Publish to save the page) (you can set this to Private if needed)
- Go to Revisions of that Page
- Copy the portion of shortcode you wish to use
- Visit your desired template file
- Since we just copied a shortcode, we will have to make use the following code:
<?php echo do_shortcode( '[shortcode_goes_here]' ); ?>
- And viola!
How can I update the Divi shortcode in the future?
First of all, we want clean, organised code within your shortcode. So use CSS classes and ID selectors where you place most of your Custom CSS, like in Divi > Theme Options, as found in your Dashboard.
Next is for the future! To update this Divi shortcode:
- Visit your new Divi module in the page that contains it
- Edit/Modify this new Divi module as found in your Divi builder
- After Saving page (click Publish)
- Copy the portion of the short code you’d like to use
- Paste this in your PHP file where you need it to be
- Make sure you use the shortcode function
<?php echo do_shortcode( '[divi_builder_shortcode_here]' ); ?>
Advantages
- Divi shortcode can be placed into your theme’s PHP files
- You can output the Divi module anywhere, and you are not restricted to the page content where the Divi builder is found. You are completely free!
Disadvantages
- Any changes you wish to make will have to go through using the Divi Builder, and copying the shortcode of the module as found in your Revisions, after clicking Publish for it to update the code
- This requires that you use the Divi Theme (please use a child theme of Divi, as best practice)
Video Tutorial
Conclusion
I have personally found this to be a very useful solution when you simply exhaust all methods to get the Divi modules around your website, but you couldn’t as you were restricted to the Divi builder and where it is limited to, like in your page content for most modules. Now that I can place 4 Blurbs in my Header, I can style it as much as I like. But the only disadvantage to this is that if I want to edit this, then I will have to get right back to the Divi builder and make the changes, then visit Revisions, copy the shortcode, and update this in my child theme file. Best part is that there is a way!
If you’ve found any solutions less painstaking than this, please let me know! ⚡️
Also, if you were interested in the video on how I quickly created divi.dev on Localhost, you can check out the Free WordPress Development Environment called ‘Local’ by Flywheel.