Enable Divi Builder on Custom Post Types

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!

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

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

44 Comments

  1. After adding divi builder to custom post type, pre-defined layouts are not showing

    Anything I'm missing ?

    Reply
    • Hey Tarun, did you try adding the code given in the "Using Layouts with Custom Post Types" section? By default Divi will use create a separate layout "library" for each custom post type. Adding the code given there will make all custom post types use the same library as regular posts and pages, and so the pre-defined layouts should become accessible (after refreshing the edit screen).

      Reply
  2. Dan,

    Looking for support for Pods using Divi, I recently came across this code from Sean Barton under the title "How to add the Divi Builder AND Divi Library to ANY CPT"

    The original code to enable the builder on the post type is as follows:

    `function sb_et_builder_post_types( $post_types ) {
    $post_types[] = 'your-cpt';

    return $post_types;
    }
    add_filter( 'et_builder_post_types', 'sb_et_builder_post_types' );`

    And the code to make the Divi Library ‘work’ is this:

    `add_filter( 'et_pb_show_all_layouts_built_for_post_type', 'sb_et_pb_show_all_layouts_built_for_post_type' );

    function sb_et_pb_show_all_layouts_built_for_post_type() {
    return 'page';
    }`

    I just read your code here ~ https://divibooster.com/enable-divi-builder-on-custom-post-types/ ~ and I wondered, not being a coder, which would you think would provide the best support for Pods?

    Many thanks,

    Terence.

    Reply
    • Hi Terence,

      The code I give in the post is basically a more advanced version of the first block of Sean's code. Mine does some nice stuff like automatically adding to any suitable custom post types, avoiding trying to add itself on posts types where it wouldn't work, and has some additions that improve the range of custom post types it works on. Sean's is more basic, and must be manually updated for each new CPT you add (including each new CPT you create in Pods). But fundamentally they are doing the same thing. I tested my code and it looks like it works with Pods – I haven't tested Sean's, but it wouldn't surprise me if it worked too. Note that each will require your custom post type to have support the post "editor" box, but this is true by default when you create a new Pods CPT.

      The second bit of code Sean gives is nice. It lets all custom post types use the same library so layouts from your main posts / pages will be available to your CPTs and vice versa (normally they'd have their own separate libraries). You could use this bit of code alongside my code for adding the CPTs if you like.

      You've got Divi Booster, right? I've just released an update (2.5.1) to add that second bit of code as a feature. So if you update and go to "Divi > Divi Booster > Divi Builder > Standard Builder" you should the existing "Enable Divi Builder on Custom Post Types" feature, option along with a new "Use main layout library" sub-option.

      Enable both of these and you'll get the full benefit of the combination of my code and Sean's. Like I say, it looks like it works on Pods.

      Hope that helps,
      Dan

      Reply
      • I am just testing 2.5.1 with the additional code on Pods. Awesome support. Thank you Dan.

        P.S. By the way, it's "Pods" not "Pod".

        Reply
        • Ha ha, yes, it's "Pods" – just corrected my error. Thanks, Terence!

          Reply
  3. Any idea how to get this to work with Event Espresso custom post types? all I get is an error Fatal error: Class 'ET_Builder_Element' not found in /xxxx/xxxx/public_html/wp-content/plugins/divi-builder/includes/builder/functions.php on line 2304

    Reply
    • Hi omar, it looks like the problem is that the Divi Builder framework code isn't being loaded on the Event Espresso post type. I've come up with a fix that'll be in the next version of Divi Booster (2.4.4), which I'll hopefully have out in the next few days. If you want to get it working in the meantime, you can should be able to do so by adding this code into your functions.php file:

      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; 
      }
      
      Reply
  4. Just wanted to add…

    The code snippet provided works for adding builder support for Custom Post Type instances in the Extra theme as well.

    Thanks!

    Reply
    • That's great to know. Thanks, Sunil!

      Reply
  5. Can you use Divi modules like Portfolio or Filterable portfolio with custom post types? How would this be achieved?

    Reply
    • Hi Mike, if you use the above code (or equivalently the Divi Booster feature), you will be able to use the Divi Builder on your custom post types (as long as they normally use the WordPress content editor box). You can then use Divi Builder to add in the Divi modules such as the portfolio modules, as you normally would. Where these modules are displayed will depend on the particular custom post type used and where that post type normally inserts the content from the WP content editor box.

      Reply
      • To expand on this Dan, is there a way to create filterable portfolios for the custom post type in question?

        For example, if I create a custom post type called 'Resources' that has its own categories: 'tools' and 'guides', is there a way to generate a filterable portfolio of resources using these two categories?

        I've been hunting all over for a way to do this but to no avail. I think this would be a fantastic additional to the Divi theme. Are you aware of any plugin or hack to achieve this?

        Any help would be greatly appreciated.

        Thanks!

        Reply
  6. Hi Dan,

    Thanks for supplying the code snippet, much appreciated. I Updated to Divi builder 1.3.2 today and the Divi builder no longer works in my Custom Post Types, the button no longer activates the builder and I can't even switch back to the standard editor. Have you experienced this or is it just a local issue.
    regards

    Stephen

    Reply
    • Ah I think it was an update to Types plugin causing the issue, all working normally now.

      Reply
      • Hey Stephen. Thanks for letting me know and I'm glad you got it working again.

        Reply
  7. A clarification if you please. In discussing layouts above, I didn't see anything about modules. I'm building a library of Global Modules that I was counting on using across custom post types. If I have to copy modules across from one post type to another, it sounds like I'm losing the Global feature that would permit me to update a Global Module as my mastery of Divi grows and have that update replicated across the Web site. Am I missing something?

    Harvey

    Reply
    • Good question, Harvey. I did some testing and have updated the post above with the following clarification:

      "Global modules are initially only available for the post type they were originally saved under. However, it is possible to copy a global module from the Divi Builder editor on a regular page / post and paste it into a custom post type. Once there, the module will be updated globally whether you edit it in the regular post type or the custom post type – the change will apply everywhere the module is used. Furthermore, you can now open the module settings on the custom post type and click the "Save and Add to Library" button to save the global module to your custom post type's library. You will now be able to load the module on from the library on either post type, and any change you make to any instance of the module will be replicated to all other instances of the global module."

      So basically, yes, you can still achieve global modules across custom post types – it just requires a copy, paste and save to make it available for the custom post type. Let me know if any of this is unclear.

      Reply
  8. Hi,

    I've run into the same problem that James had at the top of this feed. I'm using a custom post type with the Divi Builder but want to change the page layout to full width rather than having a side bar.

    Was there a way to do this?

    Reply
    • Hi Sarah, it's possible, but not in an easily generalized way. The problem is that not only do you need to remove the sidebar, you also need to deal with whatever extra stuff the custom post type has added. If you're able to let me know what custom post type you're using (or better yet, share a link to a page using it), I may be able to offer some more specific advice.

      Without seeing the particular custom post type, the only thing I can suggest you try is hiding the sidebar using the following CSS:

      #sidebar { display: none; }
      
      Reply
  9. Hi Dan,

    I have a quick question. When I enable the option "Enable Divi Builder on Custom Post Types" it works except for I cannot select my page layout. The page layout selector in the "Divi Custom Post Settings" box is not there, like it is on the blog posts. Do you have any suggestions?

    I am using WP: 4.4.1, Divi: 2.6.1, and Divi Booster: 1.9.7

    Thank you!
    James

    Reply
    • Okay, a little more clarification on this. I realize now, that on pages when you are using the Divi Builder it does hide the page layout option, but the page defaults to full width. However, on custom post types, the page layout does not default to full width, so I have a sidebar when I try to use the Divi builder. Does that make sense? Is there a way to have "Enable Divi Builder on Custom Post Types" make those posts default to full width?

      Thank you!
      James

      Reply
      • Hi James, that all makes sense. Let me try to explain what is going on. Basically, a custom post type dictates is own layout for the page. For instance, a custom post type for recipes might include space for a photo of the dish, an ingredients list, and space for a description of how to prepare the dish. It is also up to the custom post type whether or not it shows the sidebar. Within all this, the custom post type may choose to display the "content" of the post – i.e. what you type into the WordPress editor box. In the recipe example, this would most likely be used for the description of how to prepare the dish. Normally, this would just be text, but by enabling the Divi Builder for custom post types, you'd now be able to edit this area (and this area only) using the Divi Builder. So for example, you could layout each step with a slider showing photos of that step, and so on. The point is that the Divi Builder is restricted to a certain area within the custom post type layout.

        At the moment, it isn't possible to make the Builder full-width, unless the custom post type itself supports it (hence the reason there is not page layout option). I'm looking into whether or not it is possible to add an option for this, so hopefully it will be possible in the future.

        In the meantime, perhaps you could let me know what custom post type you are using, so I can take a look and see whether there is an easy way of adding full-width support for that post type. Thanks.

        Reply
        • Hi Dan,

          Thank you very much for your answer, that all makes sense. The post type I was trying to use was created by WP Customer Area. However, I have decided not to use that plugin for now, and go another route. I really do appreciate you offering to help, but I am all set for now.

          Thanks!
          James

          Reply
          • That's great to hear. All the best with it, James.

  10. Hi again! Everything works, except if I want to load a layout it doesn't display any pre defined or saved to library layouts. I repeat the same layout a lot, so it would be great to get this working, any ideas? Thank you!

    Reply
    • Hi Charlie, when you click "Load from Library", Divi contacts the server to get a list of the layouts. It sounds like this request may be getting blocked. The first thing I'd check is whether this is caused by any security plugins (Securi, iThemes, etc). If you have any of these installed, disable them temporarily and reload the custom post edit page and then check if the layouts are accessible. If so, then you should be able to get it all working by configuring the security plugin to allow admin users to access wp-admin/admin-ajax.php – how you do this will depend on the plugin. If this doesn't solve the problem, let me know.

      Reply
      • Hi Dan, I'm testing this out on a dev site so I don't have any security plugins in place yet – I did deactivate some of the other plugins I did have installed just in case but it didn't make any difference. The layouts are displaying if I try to load one on a page or post, its just my custom post type that's having problems. Thanks so much for your help, it's much appreciated :)

        Reply
        • Hi Charlie, I've just sent to an email about this – hopefully we can figure it out.

          Reply
          • Hi Dan, i have exactly the same problem as Charlie. What was the solution for that issue ? Regards Holger

          • Hi Holgar, Charlie ended up not needing to use custom post types. However, I've looked into the issue some more, and it looks like nothing's actually broken. It's simply that Divi maintains separate layout libraries for each post type. This means that while there are none initially for your custom post type, you can save new layouts to the library (you need to reload the edit screen after saving to see them in the library). It's also fairly straightforward to copy layouts across from other post types – I've added a section to the end of this post describing how to do so. Note that there are no predefined layouts for custom post types, but you can copy predefined layouts across from normal posts in the same way.

            Let me know if any of that doesn't make sense.

  11. Worked perfectly! Thank you so much for writing this :) Saved me having to look for another theme.

    Reply
  12. Hi Dan

    I activated the option "Enable Divi Builder on Custom Post Types" in Divi Booster, however the "Divi Custom Post Settings" tab is empty. I like to use a empty post where I can apply my own design. I assume that I don't have to apply the above code again, right?

    I use WP 4.4, Divi Builder 1.1.3, Divi Booster 1.8.4 and the Simone Theme for accessibility.

    Thank you

    Jakob

    Reply
    • Hi Jakob,

      Thanks for letting me know. The problem was that the "Divi Custom Post Settings" tab contains settings that only apply on the Divi Theme itself, not on other themes using the Divi Builder – so it was showing as empty when used with the Divi Builder. It doesn't actually make sense to display this tab when Divi Builder is in use, so I've updated Divi Booster to remove this tab on Divi Builder when used with other themes.

      Unfortunately this doesn't solve your problem of wanting to start with an empty post. To do that, you'd really need to modify the Simone Theme, add some Custom Post Templates, or perhaps use CSS to hide all the unwanted parts. If I get any time I'll have a go at it myself – if I do figure anything out, I'll be sure to let you know.

      Reply

Submit a Comment

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