Adding Divi Builder to custom post types

I got a request for help adding Divi builder to a custom post type created with Toolset Types so I thought I’d just document the steps needed here.

You need to be using a child theme.  If you’r not already doing so, do that first.  You can easily install one using the One-click child theme plugin.

In all of the code below change the MYPOSTTYPE to your post type name and myposttypeslug to you post type’s slug.

Changes to functions.php

In your child theme’s functions.php file add this code:

// Add Divi Builder to the MYPOSTTYPE plugin
function my_et_builder_post_types( $post_types ) { 
  $post_types[] = 'myposttypeslug'; 
  return $post_types; 
} 
add_filter( 'et_builder_post_types', 'my_et_builder_post_types' );
// Add Divi post meta box to post types 
function my_et_add_post_meta_box() {
  add_meta_box( 'et_settings_meta_box', esc_html__( 'Divi MYPOSTTYPE Settings', 'Divi' ), 'et_single_settings_meta_box', 'myposttypeslug', 'side', 'high' ); 
} 
add_action( 'add_meta_boxes', 'my_et_add_post_meta_box' );

The first part of this code adds the Divi builder to the post editor page.

The second part adds the setting box.

Additional CSS

You will need to add the following to your custom css:

#left-area .et_pb_row { 
  width: 100%; 
}

By default any et_pb_row div has 80% width.  This is fine for a full width page but if you allow the Divi builder on a page with right sidebar the builder items in the left-area area too narrow.

Template file

Finally you need to add a template file for this particular post type.  Divi’s default template automatically puts the title, meta and featured image at the top of the post.  While you can turn this off using the Divi setting for a Page or a Post, you have no control over it for a custom post type.

Create a file called single-myposttypeslug.php and add this code:

<?php
get_header();
$is_page_builder_used = et_pb_is_pagebuilder_used( get_the_ID() );
$show_navigation = get_post_meta( get_the_ID(), '_et_pb_project_nav', true );
?>
<div id="main-content">
  <?php if ( ! $is_page_builder_used ) : ?>
  <div class="container">
    <div id="content-area" class="clearfix">
      <div id="left-area">
  <?php endif; ?>
        <?php while ( have_posts() ) : the_post(); ?>
        <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
          <div class="entry-content">
          <?php
            the_content();
            wp_link_pages( array( 'before' => '<div class="page-links">' . esc_html__( 'Pages:', 'Divi' ), 'after' => '</div>' ) ); wp_link_pages( array( 'before' => '<div class="page-links">' . esc_html__( 'Pages:', 'Divi' ), 'after' => '</div>' ) );
          ?>
          </div> <!-- .entry-content -->
        </article> <!-- .et_pb_post -->
        <?php endwhile; ?>
      <?php if ( ! $is_page_builder_used ) : ?>
      </div> <!-- #left-area -->
    <?php if ( 'et_full_width_page' === $page_layout ) et_pb_portfolio_meta_box(); ?>
    <?php get_sidebar(); ?>
    </div> <!-- #content-area -->
  </div> <!-- .container -->
  <?php endif; ?>
</div> <!-- #main-content -->
<?php get_footer(); ?>