Adding the Divi Page Builder to Custom Post Types

If you find this tweak helpful:

Beginners

Tweaking Elegant Themes involves creating a child theme and editing PHP and CSS files within a text editor. If you have never done this you may want to read our guide on creating a child theme. All tweaks are written with the assumption that you have a default installation of your theme.  Any tweaks or changes you may have previously made to your theme could affect the outcome of the tweaks on this site. All tweaks should be tested before applying to a live site. 

If you missed my tutorial on how to easily create a custom post type, you might want to read that first. I provide all of the code necessary to create a CPT in WordPress and package it up in a free plugin for you to download. I also comment all of the code for you to review so you can easily replicate the process and create any CPT you like.

Shortly after posting this tutorial, Elegant Themes released a great tutorial on adding the Divi Page Builder to any custom post type! For anyone who would like to add this to their site, here is the code provided by Nathan from Elegant Themes:

Replace ‘recipes’ with your CPT name and you’re all set. If you would like to add the builder to multiple CPTs, you can do so like this:

You can add the code above to your functions.php file in your child theme or follow my tutorial mentioned at the top of the post and simply add the code above to the plugin created in that tutorial.

By default, the layout created from the page builder in your new CPT will be displayed in a template with a sidebar. And the content will not take up the entire width of the container. To fix this, you can do one of three things (option 3 will also enable fullwidth layouts).

Option 1. Download my free plugin as I have already added the CSS from Option 2 (you’ll need to modify the plugin CSS to work with your CPT name).

Option 2. Add the following CSS to your stylesheet, replacing POST_TYPE with your CPT name:

Option 3. Copy the single-project.php template from the Divi folder into your child theme folder. Then rename it single-YOUR-POST-TYPE.php. This will not only fix the content not stretching all the way but will also remove the sidebar and give you a fullwidth page to work with.

Post a Reply

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