Enable Divi Builder on Custom Post Types

This post may contain referral links which may earn a commission for this site

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. There is not yet a built-in option to use the Divi Builder on custom post types. 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 Booster

The easiest way to enable Divi Builder on Custom Post Types is using my plugin, Divi Booster. 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.

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!

Hundreds of new features for Divi
in one easy-to-use plugin

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

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