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:
|
1 2 3 4 5 6 |
function my_et_builder_post_types( $post_types ) { $post_types[] = 'recipes'; return $post_types; } add_filter( 'et_builder_post_types', 'my_et_builder_post_types' ); |
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:
|
1 2 3 4 5 6 7 |
function my_et_builder_post_types( $post_types ) { $post_types[] = 'recipes'; $post_types[] = 'YOUR-POST-TYPE'; return $post_types; } add_filter( 'et_builder_post_types', 'my_et_builder_post_types' ); |
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:
|
1 2 3 4 5 6 |
.et_pb_pagebuilder_layout.single-YOUR-POST-TYPE #page-container .et_pb_row { width: 100%; } .et_pb_pagebuilder_layout.single-YOUR-POST-TYPE #page-container .et_pb_with_background .et_pb_row { width: 80%; } |
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.
3 Comments
Thank you so much for this. It’s exactly what I needed (option 3) to get my custom posts full width, which is exactly what I was having an issue with.
October 10, 2018
thank you for your tutorial, just wanna ask you something about the option 3, are you sure that I don’t need to edit anything inside this file after I have placed inside my divi child? If I overview the file there are some variables categories and ref to project ID (about 4 or 5 entries). do you think I have to edit these IDs?
many thanks
October 18, 2018
Hey Vassilis,
for my case when I copied the single-project.php file and renamed it to single-product.php (product is my custom post type), I added a class to the ‘container’ div (product-container) and added the following css to my child theme stylesheet:
.container.product-container {
padding-top: 0 !important;
width: 100%;
max-width: none;
}
This made it full width, and removed some padding that came with the project template file.
Hope this helps!
Mark
November 18, 2018