Welcome to Day 4 of our Divi 100 Marathon. Keep tuning in for 100 days in a row of awesome Divi resources as we count down to the amazing release of Divi 3.0 on the final day of the series!


In today’s episode of Divi Nation we decided to tackle another big community request: adding the Divi Builder to Custom Post Types. This is by far one of the most asked for Divi tutorials and we’re excited to share with you a new way of using Divi to do more.

How to Add the Divi Builder to Custom Post Types and Third Party Plugins – Divi Nation Short

In the video above I’m going to show you how to add the Divi Builder to Custom Post Types and Third Party Plugins (that are using custom post types).

It’s important to note however, that this method will not work with every single custom post type out there. Or with every third party plugin using custom post types.

This is because we’ve made the Divi Builder to only work out of the box in environments where we know it will perform flawlessly.

Outside of those constraints, things begin to get more complex. And we can’t possibly account for every kind of custom post type variation in a single snippet.

So if you plan on following along with the video above, I want to stress a few points:

1. Back everything up.

2. Use a child theme.

3. Test this method on a staging or dev site. Not your live site.

4. If this method of adding the Divi Builder to your specific custom post type does not work as you see in this video—that likely indicates that your specific case will require custom development. Something we won’t be able to provide in the comments.

Ok, with all of our important notices and caveats behind us, let’s add the Divi Builder to some custom post types!

Subscribe To Our Youtube Channel

All Subscription Options:

Summary: Adding the PHP Snippet to Your Child Theme’s Functions.php File

php-snippet-paste

The first thing you need to do is copy the php code snippet below into your child theme’s functions.php file.

function my_et_builder_post_types( $post_types ) {
	$post_types[] = 'YOUR_CPT_HERE';
	$post_types[] = 'ANOTHER_CPT_HERE';
	
	return $post_types;
}
add_filter( 'et_builder_post_types', 'my_et_builder_post_types' );

Next, find the name of the post type you’d like to add the Divi Builder to and replace the placeholder text “YOUR_CPT_HERE” and “ANOTHER_CPT_HERE” as you can see in the image above.

If you don’t know what the name of your post type is, then simply create a new post with it and look at the url. It will tell you what the name of that post type is. As you can see in the image below.

post-type-name-1

Bonus: Adding CSS For CPT UI Post Types

If, as I show you in the video, you have created a new custom post type using the Custom Post Type UI plugin you will need the CSS below to paste into your custom CSS panel under Divi > Theme Options > Custom CSS. This will allow your new custom post type builder content to display properly.

/*Replace “POST_TYPE” with the slug for your new CPT created with CPTUI.
___________________________________________________________*/

.et_pb_pagebuilder_layout.single-POST_TYPE #page-container .et_pb_row { 
width: 100%; 
} 
.et_pb_pagebuilder_layout.single-POST_TYPE #page-container .et_pb_with_background .et_pb_row { 
width: 80%; 
}

What Should We Cover Next?

That’s all for this episode of Divi Nation, but there’s a lot more Divi content on the way in our Divi 100 series. If you have a request for a specific Divi tip or tutorial leave it for us in the comments section below!

divi-2-6-logo

Divi 100 Day 4

The Countdown To Divi 3.0

This post is part of our Divi 100 marathon. Follow along as we post free Divi resources for 100 days in a row! This 100-day countdown will end with the game-changing release of Divi 3.0, including our brand new visual editor built from the ground up using React. Divi 3.0 will change the way you build websites with the Divi Builder forever!
Let the countdown begin.

jQuery(document).ready(function(){jQuery(“#DIV_TO_PLACE_COUNTDOWN”).jCountdown({timeText:”2016/9/7 7:00:00″,timeZone:-8,style:”slide”,color:”black”,width:0,textGroupSpace:15,textSpace:0,reflection:false,reflectionOpacity:10,reflectionBlur:0,dayTextNumber:1,displayDay:true,displayHour:true,displayMinute:true,displaySecond:true,displayLabel:true});});Learn More About Divi 3.0

.section-header{width: 520px; padding: 50px 40px 20px; margin: 100px 0; text-align: center; color: #fff !important; position: relative; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: #6c2eb9; background-image: url(http://cdn.elegantthemes.com/blog/wp-content/uploads/2016/04/divi-100.jpg); background-repeat: no-repeat;}.section-header h2{margin-top: 0 !important; color: #fff;}.section-header strong{color:#fff;}.section-header img{margin-bottom: 10px;}.section-header:after{position: absolute; bottom: -16px; left: 50%; margin-left: -16px; width: 32px; height: 32px; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); content:”; background: #6c2eb9;}.divi-demo-link{border-bottom: 4px solid #00d5b5; margin-top: 15px; border-radius: 4px; transition: all.5s ease-in-out; display: block; width: 100%; padding: 10px 0; text-transform: uppercase; font-weight: bold; text-align: center; color: #1C695D; background-color: #00efcb;}.divi-demo-link:hover{text-decoration: none; background-color: #2CFFDF;}.divi-download-link{text-align: center; font-size: 18px; border-radius: 4px; padding: 20px; color: #fff; display: block; margin: 10px 0 10px; background-color: #7e3bd0; transition: background .5s; text-decoration: none; font-weight: bold;}.divi-download-link:hover{background-color: #C04BDE; text-decoration: none;}hr{border-style: solid; margin: 0 0 40px 0; border: 1px solid #EAEBEB;}
.divi_cta{background-color: #8f43ee; color: #fff; font-size: 20px; font-weight: bold; padding: 20px; text-align: center; display: block; text-decoration: none; border-radius: 4px;}.divi_cta:hover{text-decoration:none;background-color:#7d37d6;}.divi_cta_red{background-color:#db1c1c;}.divi_cta_red:hover{background-color:#c51a1a;}

The post How to Add the Divi Builder to Custom Post Types and Third Party Plugins – Divi Nation Short appeared first on Elegant Themes Blog.

View @ ElegantThemes

Leave a Reply