DIVI: Divi Builder on Custom Post Types

by Sofian | Mar 14, 2016 | DIVI, Tricks, Wordpress | 15 comments

Yes, it is possible to use the DIVI Builder also on custom post types, but not out-of-the-box. This is valid also for custom post types that plugins created, so you can for example use the DIVI Builder even on your All-In-One-Event-Calendar Events or WooCommerce Products. This entry in functions.php of your child theme will do the trick, just replace custom-post-slug with the slug of your custom post. Add another such line if you have more custom post types to use the DIVI builder on. You can find out the slug names when clicking on the main menu item of the custom post type, in the URL as …/wp-admin/edit.php?post_type=ai1ec_event for All-In-One-Event-Calendar or …/wp-admin/edit.php?post_type=product for WooCommerce, just to name two.

// Add DIVI Builder to custom post types

function divi_add_new_custom_post_types( $post_types ) {
$new_post_types_slugs = array(
'custom-post-slug',
);
$post_types = array_merge( $post_types, $new_post_types_slugs );
return $post_types;
}
add_filter( 'et_builder_post_types', 'divi_add_new_custom_post_types' );

// Add DIVI Builder to custom post types

function divi_add_new_custom_post_types( $post_types ) {

$new_post_types_slugs = array(

'custom-post-slug',

);

$post_types = array_merge( $post_types, $new_post_types_slugs );

return $post_types;

}

add_filter( 'et_builder_post_types', 'divi_add_new_custom_post_types' );

Enjoy the DIVI Builder now on all custom post types as well. Isn’t this great? Made me jump in the air when I just found out about it.

UPDATE 2016-04-13: Bringing back the Meta Box

Integrating the DIVI Builder into Custom Post Types did not bring the DIVI Post Settings Meta Box by default. Andrei from the ET Support was extraordinary helpful in diving into a solution to finalize this amazing feature. A few steps are required though. The first is to bring back the Meta Box itself with this code into functions.php. Replace custom-post-slug with the slug of your custom post type:

// Add Meta Box to CPT - Replace custom-post-slug with the slug of your custom post type

function divi_add_post_meta_box() {
add_meta_box( 'et_settings_meta_box', esc_html__( 'Divi Post Settings', 'Divi' ), 'et_single_settings_meta_box', 'custom-post-slug', 'side', 'high' );
}
add_action( 'add_meta_boxes', 'divi_add_post_meta_box' );

// Add Meta Box to CPT - Replace custom-post-slug with the slug of your custom post type

function divi_add_post_meta_box() {

add_meta_box( 'et_settings_meta_box', esc_html__( 'Divi Post Settings', 'Divi' ), 'et_single_settings_meta_box', 'custom-post-slug', 'side', 'high' );

}

add_action( 'add_meta_boxes', 'divi_add_post_meta_box' );

Now the meta box is back, but Page Layout and Post Title were missing. This code brings back the Post Title setting (it is a bit clumsy because the whole function needs to be copied into functions.php and then a few lines need to be added for our custom post type. Also here replace custom-post-slug with the slug of your custom post type):

// Add Post Title to CPT Meta Box - replace custom-post-type with your slug

if ( ! function_exists( 'et_single_settings_meta_box' ) ) :
function et_single_settings_meta_box( $post ) {
	$post_id = get_the_ID();

	wp_nonce_field( basename( __FILE__ ), 'et_settings_nonce' );

	$page_layout = get_post_meta( $post_id, '_et_pb_page_layout', true );

	$side_nav = get_post_meta( $post_id, '_et_pb_side_nav', true );

	$project_nav = get_post_meta( $post_id, '_et_pb_project_nav', true );

	$post_hide_nav = get_post_meta( $post_id, '_et_pb_post_hide_nav', true );
	$post_hide_nav = $post_hide_nav && 'off' === $post_hide_nav ? 'default' : $post_hide_nav;

	$show_title = get_post_meta( $post_id, '_et_pb_show_title', true );

	$page_layouts = array(
		'et_right_sidebar'   => esc_html__( 'Right Sidebar', 'Divi' ),
		'et_left_sidebar'    => esc_html__( 'Left Sidebar', 'Divi' ),
		'et_full_width_page' => esc_html__( 'Full Width', 'Divi' ),
	);

	$layouts = array(
		'light' => esc_html__( 'Light', 'Divi' ),
		'dark'  => esc_html__( 'Dark', 'Divi' ),
	);
	$post_bg_color  = ( $bg_color = get_post_meta( $post_id, '_et_post_bg_color', true ) ) && '' !== $bg_color
		? $bg_color
		: '#ffffff';
	$post_use_bg_color = get_post_meta( $post_id, '_et_post_use_bg_color', true )
		? true
		: false;
	$post_bg_layout = ( $layout = get_post_meta( $post_id, '_et_post_bg_layout', true ) ) && '' !== $layout
		? $layout
		: 'light'; ?>

	<p class="et_pb_page_settings et_pb_page_layout_settings">
		<label for="et_pb_page_layout" style="display: block; font-weight: bold; margin-bottom: 5px;"><?php esc_html_e( 'Page Layout', 'Divi' ); ?>: </label>

		<select id="et_pb_page_layout" name="et_pb_page_layout">
		<?php
		foreach ( $page_layouts as $layout_value => $layout_name ) {
			printf( '<option value="%2$s"%3$s>%1$s</option>',
				esc_html( $layout_name ),
				esc_attr( $layout_value ),
				selected( $layout_value, $page_layout, false )
			);
		} ?>
		</select>
	</p>
	<p class="et_pb_page_settings et_pb_side_nav_settings" style="display: none;">
		<label for="et_pb_side_nav" style="display: block; font-weight: bold; margin-bottom: 5px;"><?php esc_html_e( 'Dot Navigation', 'Divi' ); ?>: </label>

		<select id="et_pb_side_nav" name="et_pb_side_nav">
			<option value="off" <?php selected( 'off', $side_nav ); ?>><?php esc_html_e( 'Off', 'Divi' ); ?></option>
			<option value="on" <?php selected( 'on', $side_nav ); ?>><?php esc_html_e( 'On', 'Divi' ); ?></option>
		</select>
	</p>
	<p class="et_pb_page_settings">
		<label for="et_pb_post_hide_nav" style="display: block; font-weight: bold; margin-bottom: 5px;"><?php esc_html_e( 'Hide Nav Before Scroll', 'Divi' ); ?>: </label>

		<select id="et_pb_post_hide_nav" name="et_pb_post_hide_nav">
			<option value="default" <?php selected( 'default', $post_hide_nav ); ?>><?php esc_html_e( 'Default', 'Divi' ); ?></option>
			<option value="no" <?php selected( 'no', $post_hide_nav ); ?>><?php esc_html_e( 'Off', 'Divi' ); ?></option>
			<option value="on" <?php selected( 'on', $post_hide_nav ); ?>><?php esc_html_e( 'On', 'Divi' ); ?></option>
		</select>
	</p>

<?php if ( 'custom-post-type' === $post->post_type) : ?>
<p class="et_pb_page_settings et_pb_single_title" style="display: none;">
<label for="et_single_title" style="display: block; font-weight: bold; margin-bottom: 5px;"><?php esc_html_e( 'Post Title', 'Divi' ); ?>: </label>

<select id="et_single_title" name="et_single_title">
<option value="on" <?php selected( 'on', $show_title ); ?>><?php esc_html_e( 'Show', 'Divi' ); ?></option>
<option value="off" <?php selected( 'off', $show_title ); ?>><?php esc_html_e( 'Hide', 'Divi' ); ?></option>
</select>
</p>
<?php endif; ?>


<?php if ( 'post' === $post->post_type ) : ?>
	<p class="et_pb_page_settings et_pb_single_title" style="display: none;">
		<label for="et_single_title" style="display: block; font-weight: bold; margin-bottom: 5px;"><?php esc_html_e( 'Post Title', 'Divi' ); ?>: </label>

		<select id="et_single_title" name="et_single_title">
			<option value="on" <?php selected( 'on', $show_title ); ?>><?php esc_html_e( 'Show', 'Divi' ); ?></option>
			<option value="off" <?php selected( 'off', $show_title ); ?>><?php esc_html_e( 'Hide', 'Divi' ); ?></option>
		</select>
	</p>

	<p class="et_divi_quote_settings et_divi_audio_settings et_divi_link_settings et_divi_format_setting et_pb_page_settings">
		<label for="et_post_use_bg_color" style="display: block; font-weight: bold; margin-bottom: 5px;"><?php esc_html_e( 'Use Background Color', 'Divi' ); ?></label>
		<input name="et_post_use_bg_color" type="checkbox" id="et_post_use_bg_color" <?php checked( $post_use_bg_color ); ?> />
	</p>

	<p class="et_post_bg_color_setting et_divi_format_setting et_pb_page_settings">
		<input id="et_post_bg_color" name="et_post_bg_color" class="color-picker-hex" type="text" maxlength="7" placeholder="<?php esc_attr_e( 'Hex Value', 'Divi' ); ?>" value="<?php echo esc_attr( $post_bg_color ); ?>" data-default-color="#ffffff" />
	</p>

	<p class="et_divi_quote_settings et_divi_audio_settings et_divi_link_settings et_divi_format_setting">
		<label for="et_post_bg_layout" style="font-weight: bold; margin-bottom: 5px;"><?php esc_html_e( 'Text Color', 'Divi' ); ?>: </label>
		<select id="et_post_bg_layout" name="et_post_bg_layout">
	<?php
		foreach ( $layouts as $layout_name => $layout_title )
			printf( '<option value="%s"%s>%s</option>',
				esc_attr( $layout_name ),
				selected( $layout_name, $post_bg_layout, false ),
				esc_html( $layout_title )
			);
	?>
		</select>
	</p>
<?php endif;

if ( 'project' === $post->post_type ) : ?>
	<p class="et_pb_page_settings et_pb_project_nav" style="display: none;">
		<label for="et_project_nav" style="display: block; font-weight: bold; margin-bottom: 5px;"><?php esc_html_e( 'Project Navigation', 'Divi' ); ?>: </label>

		<select id="et_project_nav" name="et_project_nav">
			<option value="off" <?php selected( 'off', $project_nav ); ?>><?php esc_html_e( 'Hide', 'Divi' ); ?></option>
			<option value="on" <?php selected( 'on', $project_nav ); ?>><?php esc_html_e( 'Show', 'Divi' ); ?></option>
		</select>
	</p>
<?php endif;
}
endif;

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

// Add Post Title to CPT Meta Box - replace custom-post-type with your slug

if ( ! function_exists( 'et_single_settings_meta_box' ) ) :

function et_single_settings_meta_box( $post ) {

$post_id = get_the_ID();

wp_nonce_field( basename( __FILE__ ), 'et_settings_nonce' );

$page_layout = get_post_meta( $post_id, '_et_pb_page_layout', true );

$side_nav = get_post_meta( $post_id, '_et_pb_side_nav', true );

$project_nav = get_post_meta( $post_id, '_et_pb_project_nav', true );

$post_hide_nav = get_post_meta( $post_id, '_et_pb_post_hide_nav', true );

$post_hide_nav = $post_hide_nav && 'off' === $post_hide_nav ? 'default' : $post_hide_nav;

$show_title = get_post_meta( $post_id, '_et_pb_show_title', true );

$page_layouts = array(

'et_right_sidebar' => esc_html__( 'Right Sidebar', 'Divi' ),

'et_left_sidebar' => esc_html__( 'Left Sidebar', 'Divi' ),

'et_full_width_page' => esc_html__( 'Full Width', 'Divi' ),

);

$layouts = array(

'light' => esc_html__( 'Light', 'Divi' ),

'dark' => esc_html__( 'Dark', 'Divi' ),

);

$post_bg_color = ( $bg_color = get_post_meta( $post_id, '_et_post_bg_color', true ) ) && '' !== $bg_color

? $bg_color

: '#ffffff';

$post_use_bg_color = get_post_meta( $post_id, '_et_post_use_bg_color', true )

? true

: false;

$post_bg_layout = ( $layout = get_post_meta( $post_id, '_et_post_bg_layout', true ) ) && '' !== $layout

? $layout

: 'light'; ?>

<?php

foreach ( $page_layouts as $layout_value => $layout_name ) {

printf( '<option value="%2$s"%3$s>%1$s</option>',

esc_html( $layout_name ),

esc_attr( $layout_value ),

selected( $layout_value, $page_layout, false )

);

} ?>

</select>

</p>

</select>

</p>

</select>

</p>

<?php if ( 'custom-post-type' === $post->post_type) : ?>

</select>

</p>

<?php endif; ?>

<?php if ( 'post' === $post->post_type ) : ?>

</select>

</p>

</p>

<input id="et_post_bg_color" name="et_post_bg_color" class="color-picker-hex" type="text" maxlength="7" placeholder="<?php esc_attr_e( 'Hex Value', 'Divi' ); ?>" value="<?php echo esc_attr( $post_bg_color ); ?>" data-default-color="#ffffff" />

</p>

<?php

foreach ( $layouts as $layout_name => $layout_title )

printf( '<option value="%s"%s>%s</option>',

esc_attr( $layout_name ),

selected( $layout_name, $post_bg_layout, false ),

esc_html( $layout_title )

);

</select>

</p>

<?php endif;

if ( 'project' === $post->post_type ) : ?>

</select>

</p>

<?php endif;

}

endif;

And a last thing to do to also bring the Page Layout Setting back requires even the creation of a custom_script.js file in our child-theme folder with the following content, but replace the word slug with your custom post type slug (in this case, leave post-type- in front of it):

(function($) {
$(document).ready(function() {
function toggle_dps() {
setTimeout(function(){
$('.et_pb_page_layout_settings' ).closest( '#et_settings_meta_box' ).find('.et_pb_page_layout_settings').show();
},150);
}
if ($('body').hasClass('post-type-slug')) {
toggle_dps();
$('#et_pb_toggle_builder').click(function(){
toggle_dps();
});
}
});
})(jQuery);

(function($) {

$(document).ready(function() {

function toggle_dps() {

setTimeout(function(){

$('.et_pb_page_layout_settings' ).closest( '#et_settings_meta_box' ).find('.et_pb_page_layout_settings').show();

},150);

}

if ($('body').hasClass('post-type-slug')) {

toggle_dps();

$('#et_pb_toggle_builder').click(function(){

toggle_dps();

});

}

});

})(jQuery);

And to enqueue the script with the following line into functions.php:

// Add Page Layout to CPT Meta Box

function divi_override_js() {
wp_enqueue_script( 'custom_script', get_stylesheet_directory_uri() .'/custom_script.js', array( 'jquery'), '1', true );
}
add_action('admin_enqueue_scripts','divi_override_js',1);

// Add Page Layout to CPT Meta Box

function divi_override_js() {

wp_enqueue_script( 'custom_script', get_stylesheet_directory_uri() .'/custom_script.js', array( 'jquery'), '1', true );

}

add_action('admin_enqueue_scripts','divi_override_js',1);

Yeah, a lot of customization, but I am so glad he took the time to figure it out, because using the DIVI Builder on Custom Post Types is an amazing feature, and I hope to see it onboard in one of the next updates. Until then, despite a bit of effort, this solution is not a core-hack but update-proof and complete, thanks to Andrei for his fabulous endurance.

15 Comments

Anita Soelver on April 26, 2016 at 1:33 pm

Awesome. I was just sobbing about my missing Divi Builder on my newly created custom content, and voila! Found this.

Still a long way to go on my site, since I’ve just moved it to a new host AND installed Divi on it for the first time. Lots and lots of work to do, but I’ll get there. This was definitely a great step in the right direction. So thank you so much!
Reply
- Sofian on May 9, 2016 at 12:29 pm
  
  I am glad it was helpful. Good luck with your new site.
  Reply
Douglas on June 16, 2016 at 3:42 pm

Thank you very much for this code, although it didn’t work for out of the box, it led me the right direction. The issue I ran into was the script at the end wasn’t targeting the right elements so it still wasn’t displaying. Again thank you very much!
Reply
- Douglas Morales on June 16, 2016 at 3:43 pm
  
  Actually, I got the fields to show but changing the option doesn’t save my settings
  Reply
  - Barry on October 2, 2016 at 5:47 pm
    
    Anyone ever get the page layout settings to save using this? I have hacked single-post_type.php files to get fullwidth, and even tried using page templates but never did get the settings to save.
    Reply
Kevin on September 11, 2016 at 6:50 pm

Does this tutorial help with adding custom posts as one of the available modules in DIVI builder?
Reply
- Sofian on December 16, 2016 at 9:46 pm
  
  Hi Kevin, no it is not for that. It will make the Builder available in your CPT, not your CPT available in the builder.
  Reply
Gareth Williams on September 25, 2016 at 5:29 pm

Hi,
This is fantastic and must have taken so much work.
I have several custom post types though and I don’t understand how to where to add the extra ones into the php and the js to get them to work as well.
I have entered the two slugs in the first original snippet as you indicated, but with the amended section of the article you do not say how to add multiple custom post types to the code. So I have just the one which is working perfectly, but on the other i have no page settings box at all, just the divi builder.

I hate to bother you with this, so I tried to do it a ton of ways, but as I am an amateur, I just can’t get the Divi Post Settings box to appear on the other.

If you have time I would love to know how.

Once again thanks so much for going to the trouble of doing this.
Reply
- Dave on April 4, 2017 at 8:12 pm
  
  Having the same issue here. Any tips on how to add the box to multiple post types? I have 5 post types that I need to add it to.
  Reply
  - Sofian on April 7, 2017 at 4:07 pm
    
    I looked again into the code (has been quite a while since I collected it together and it still runs flawless so I didn’t touch it in the meantime) and indeed only the first part can easily be extended to more CPTs, while for all the following I would need to ask the ET team as well. If you have a valid subscription, login there and ask them in the support forum, pointing to this post, maybe they can extend our code to become multiple. Let me know in case they figure it out so we can post it here as well.
    Reply
  - Jean THeurkauf on June 18, 2017 at 2:05 pm
    
    I did this successfully as follows, with 2 cpt’s: course and teacher:
    function divi_add_post_meta_box() {
    add_meta_box( ‘et_settings_meta_box’, esc_html__( ‘Divi Post Settings’, ‘Divi’ ), ‘et_single_settings_meta_box’, ‘course’, ‘side’, ‘high’ );
    add_meta_box( ‘et_settings_meta_box’, esc_html__( ‘Divi Post Settings’, ‘Divi’ ), ‘et_single_settings_meta_box’, ‘teacher’, ‘side’, ‘high’ );
    }
    add_action( ‘add_meta_boxes’, ‘divi_add_post_meta_box’ );
    
    However, the very strange thing is, that the metabox for CPT teacher automatically displays Page Layout, even without the custom jquery. But the metabox for CPT course does not display Page Layout without the custom jquery.
    
    As far as I can tell, the CPT attributes are identical (except for the names). So I am kind of mystified.
    Reply
Dan on December 1, 2016 at 9:27 am

Unfortunately this doesn’t work for the Extra theme. It loads the Divi builder correctly, but everything after the first step doesn’t work :(
Reply
Catherine on January 3, 2017 at 2:58 pm

Thanks a lot for this tutorial! Just amazing!
Reply
Jean on June 18, 2017 at 1:41 pm

This is great! Thank you very much for your hard work and for sharing :)
Reply
ryan on August 23, 2017 at 9:50 am

Thanks a lot it works for me
Reply

DIVI: Divi Builder on Custom Post Types

UPDATE 2016-04-13: Bringing back the Meta Box

15 Comments

Leave a Reply to Catherine Cancel reply

Recent Posts

Categories