Enable Divi Builder on Custom Post Types

Written by Dan Mossop

If you use the Divi Theme, you'll be familiar with the power and flexibility of the Divi Builder. However, when you start working on a custom post type you may find yourself missing the Divi Builder. If you'd like to enable the Divi Builder on your custom post types, here are a couple of options for doing so.

Enabling Divi Builder on CPTs using Divi

Divi now includes the option to enable Divi Builder on custom post types. While support for some custom post types is enabled by default, for most you need to manually enable the option. You can do so by going to:

Divi > Theme Options > Builder > Post Type Integration > Enable Divi Builder on Post Types

There, locate your custom post type and enable it. After that, the Divi Builder should be available on your custom post type. 

Enabling Divi Builder on CPTs using Divi Booster

Divi Booster also includes an option to enable Divi Builder on Custom Post Types. Once installed, go to the settings page and in the "Divi Builder > Standard Builder" section you'll find the following option:

The main option switches the Divi Builder on for custom post types. Once enabled, reload your custom post type's editor screen and you should see the familiar Divi Builder buttons.

The sub-option allows all the custom post types to share a single Divi library. By default Divi gives each custom post type its own library, which means that layouts created on one post type aren't available on others (and your page / post layouts wouldn't be available on the CPT). This option forces all custom post types to use the main page / post layout library, so your Divi layouts will be available to all your custom post types.

While the option is now somewhat superseded by the built-in Divi option, I've seen some cases where the Divi option doesn't offer the option to enable Divi Builder on a particular CPT. In these cases, the Divi Booster option can help out. The ability to bulk enable Divi Builder on post types and to use a shared library are also something not available in Divi itself.

Manually Enabling the Divi Builder on CPTs

If you prefer the DIY route, it's possible to enable Divi Builder for custom post types using PHP code.

You can do so by adding the following PHP to Divi (see here for my advice on adding PHP to Divi):

/* Enable Divi Builder on all post types with an editor box */
function myprefix_add_post_types($post_types) {
	foreach(get_post_types() as $pt) {
		if (!in_array($pt, $post_types) and post_type_supports($pt, 'editor')) {
			$post_types[] = $pt;
		}
	} 
	return $post_types;
}
add_filter('et_builder_post_types', 'myprefix_add_post_types');

/* Add Divi Custom Post Settings box */
function myprefix_add_meta_boxes() {
	foreach(get_post_types() as $pt) {
		if (post_type_supports($pt, 'editor') and function_exists('et_single_settings_meta_box')) {
			add_meta_box('et_settings_meta_box', __('Divi Custom Post Settings', 'Divi'), 'et_single_settings_meta_box', $pt, 'side', 'high');
		}
	} 
}
add_action('add_meta_boxes', 'myprefix_add_meta_boxes');

/* Ensure Divi Builder appears in correct location */
function myprefix_admin_js() { 
	$s = get_current_screen();
	if(!empty($s->post_type) and $s->post_type!='page' and $s->post_type!='post') { 
?>
<script>
jQuery(function($){
	$('#et_pb_layout').insertAfter($('#et_pb_main_editor_wrap'));
});
</script>
<style>
#et_pb_layout { margin-top:20px; margin-bottom:0px }
</style>
<?php
	}
}
add_action('admin_head', 'myprefix_admin_js');

// Ensure that Divi Builder framework is loaded - required for some post types when using Divi Builder plugin
add_filter('et_divi_role_editor_page', 'myprefix_load_builder_on_all_page_types');
function myprefix_load_builder_on_all_page_types($page) { 
	return isset($_GET['page'])?$_GET['page']:$page; 
}
It will look for any custom post types which support the editor box and add those to the list of posts types which can use the Divi Builder.

Using Layouts with Custom Post Types

If there you wish to use layouts with your custom post types, you may initially be disappointed – when you click on "Load From Library" you'll see that both the predefined layouts and the layouts library are empty. By default Divi maintains a separate set of layouts for each post type and so for custom post types there are initially no layouts at all. However, the layouts feature is actually working. While working on a custom post type, you'll be able to save layouts to the library, and reload them for that custom post type.

But what if you want to use a single library for all your layouts? It can be achieved with this bit of PHP code, which comes from Sean Barton:

add_filter( 'et_pb_show_all_layouts_built_for_post_type', 'myprefix_et_pb_show_all_layouts_built_for_post_type' );

function myprefix_et_pb_show_all_layouts_built_for_post_type() {
    return 'page';
}
With this code in place, all custom post types will share a common library. Note that any layouts you have saved into the custom post type's own library will not be accessible in this library. If you want to save any layouts from custom posts, I suggest using the Divi layout import / export functionality to import these layouts into the main library.

I've just released an update to Divi Booster (version 2.5.1) which includes an option to enable custom post types to use the main Divi library.

Will this work on my Custom Post Type?

Both Divi Booster and the PHP code above should enable the Divi Builder on any custom post type which uses the familiar post editor box (the one you edit the text of standard posts in). The content you enter in the Divi Builder should appear in the custom post type in the same place that normal (non-builder) text would.

However, there is a huge variety in custom post types and how they work, so it's possible that some custom post types won't work with my code. It may be that I can figure out how to solve this, so if you find it not working on a particular custom post type, please let me know.

The best way to work out if your custom post type is compatible is simply to try out the code above. If you want to try out Divi Booster and it doesn't work for you I'll be happy to fix / refund it for you.

Here are a few of the custom post types / plugins that it has been confirmed to work on*.

  • Custom Post Type UI
  • Extra
  • Event Espresso
  • IMPress Listings
  • LearnDash
  • LifterLMS
  • Pods
  • Types
  • WooCommerce

* This list is by no means an exhaustive list – it should work on thousands of others.

The Divi Builder layout shows up on my custom post type, but not where / how I want! Help!

While the positioning of the Divi Builder layout is determined by the custom post type itself (and may only occupy a small portion of the screen), it's possible to override this on a case-by-case basis. Here is (or will be) a collection of posts describing overrides for particular custom post types.

If there's a post type you'd like to see added, let me know in the comments. If you can provide me a description of how you'd like the layout to look (full-screen, etc) and a link to a sample page, that will be a big help. Thanks!

Effortlessly Enable Divi Builder on Custom Post Types

Enhance your Divi experience by seamlessly integrating the Divi Builder into your custom post types. With Divi Booster, you can easily enable the Divi Builder across all custom post types, allowing you to maintain a unified design across your site. This powerful tool also lets you use a single Divi library for all your custom layouts, simplifying your workflow and maximizing consistency.

About Dan Mossop

Dan is a Scottish-born web developer, now living in Brisbane with his wife and son. He has been sharing tips and helping users with Divi since 2014. He created Divi Booster, the first Divi plugin, and continues to develop it along with 20+ other Divi plugins. Dan has a PhD in Computer Science, a background in web security and likes a lot of stuff, 

44 Comments

  1. Hi Dan, I just purchased and installed Divi Booster. Any idea how to get this to work with WPjobboard custom post types? I don't see the Divi Builder when I select Add New Job.

    Reply
    • Hi John, I haven't tested it with WPjobboard specifically, but after installing Divi Booster you need to enable the custom post types feature at "Divi > Divi Booster > Divi Builder > Standard Builder > Enable Divi Builder on Custom Post Types", and then reloading the Add New Job page. As long as the WPjobboard custom post type normally uses the standard wordpress editor box, then Divi Builder should be enabled. If that doesn't help, let me know. Thanks!

      Reply
  2. Hi, after creating custom post types is there a way without too much custom coding to get CPTs to appear in Extra modules on the front end? Currently Extra modules only handle regular posts (filtered on category if required) and projects. Also is there a way to get the custom fields to display in the Extra modules on the front end?

    Reply
    • Hi Adrian, there are various third-party variants of the built-in modules which add the ability to display CPTs with the modules. One example is the KK Divi Modules bundle which includes CPT versions of the blog and feature post slider modules. Another is Portfolio Posts Pro which adds a CPT version of the portfolio module. While they mention Divi specifically on the download pages, I believe they should work with Extra as well.

      Getting the custom fields to display in the Extra modules may be tricky and will likely involve some custom coding, and will depend on how the custom fields are implemented (and where you want them to show up on the front end). If you're able to describe how you've created the CPTs and what you're hoping to show on the front end I'll try and offer some suggestions. Thanks!

      Reply
  3. Will this work on the Extra theme as well?

    Reply
    • Hey Dan, yes it will :)

      Reply
  4. THAAAAANNNKKKKSSSS!!!

    This is awesome! <3

    Reply
  5. I'm really glad I bought Divi Booster! It's so useful.
    Thanks!

    Reply

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

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

We may earn a commission when you visit links on our website.