The Divi builder is a great tool for the end users of WordPress based websites.

It offers them the opportunity to be able to edit their websites’ content with a user friendly interface. That’s probably where it stops for website owners, however website developers, who like to get under the hood of WordPress and bend it to their will find Divi to be a bit ‘enclosed’ and limiting out-of-the-box, especially when it comes to developing with custom post types (CPTs).

This post explains how to utilise Divi builder modules in CPT templates. This has many advantages in streamlining the addition of pages/posts especially if you are integrating things like XML feeds or importing content for bulk creation of pages/posts.

If you aren’t sure what this means, imagine you have the task of adding 200 pages to a site where the content of these pages doesn’t alter much. How would you go about that? The Divi way would be to create an initial page manually, save it to the Divi library, then create each page one-by-one using your library page. 200 pages might take you 2 or 3 days to accomplish the task.

But what if you could bulk import this new page data into a custom post type (which additionally can be using custom fields for this data). You could potentially create 200 pages in 30 minutes! Creating a custom post type, adding custom fields and building the templates to render content is fairly straightforward. The hardest part is when a site is using Divi theme and how to get the Divi generated structure into this workflow.

Your first step in mangling Divi builder with any CPT you may have created is to create template files for your custom post type. If you don’t yet know how to do this then I suggest you read up and get yourself familiar with the WordPress template hierarchy. You need two template files if creating a ‘post’ based CPT, create these in a Divi-child theme so they won’t get overwritten on theme updates.

single-post-type-name.php
archive-post-type-name.php

Use the included Divi template files for these, e.g. copy the two Divi files below:

index.php for your archive template
single.php for your single post template

The problem then is how to get the Divi generated shortcodes into your template. There are a couple of ways:

1. Build a page/post using the Divi builder, switch themes which will then expose the shortcodes in the TinyMCE editor. You can then copy these out into your template file, utilising the do_shortcode() function. I found this approach to be particularly tedious and slow to build up my template, with lots of back and forth between the Divi builder and my tempate file. When you switch the Divi builder on in the post edit screen the builder actually saves it’s content (a bunch of shortcodes) in the post_content variable. This is good news as we can access this quite easily. The bad news is that if you switch off Divi Builder it deletes it’s shortcode content (this is called vendor lock-in).

2. A much better way is to have a page/post that you’ll use as your boilderplate Divi template making sure you know this posts’ ID, then copy and paste the below function into your child theme functions.php. Whenever the page/post you are using to build your Divi layout is updated, the function below will write into your CPT template file the necessary Divi shortcode – a LOT easier and quicker than above.

You’ll need to place to ‘markers’ in your single-areas.php template file in order for this to work. The format of these markers is as follows:

# BEGIN WordPress

# END WordPress

Feel free to replace ‘WordPress’ with whatever string you want, just remember to update the string in insert_with_markers function below!

function do_stuff_after_post_save( $post_id ) {

                // Change this to the ID of the page your using to build the Divi shortcode template
                $post_id = '24574';
                $post_object = get_post( $post_id );

		// Don't do anything is it's a post revision
                if ( wp_is_post_revision( $post_id ) )
                	return;

		// Build the do_shortcode
                $prepend_string = 'echo do_shortcode(\'';
                $append_string = '\');';

		// My CPT is called areas
                $filename = ABSPATH . '/wp-content/themes/divi-child/single-areas.php';

		// Escape any single quotes
                $postcontent = addcslashes( $post_object->post_content, "'" );

                // Add placeholders for Area & County (or whatever other terms you have) below, e.g. <AREA>, <COUNTY>               

		// I'm using ACF to populate some custom field data, so I need some placeholders in my Divi text widgets as placeholders for my variables below 
                $postcontent = str_replace('&lt;AREA&gt;', '\' . $area . \'', $postcontent);
                $postcontent = str_replace('&lt;COUNTY&gt;', '\' . $county . \'', $postcontent);

		// Finally build the string
                $postcontent = $prepend_string . $postcontent . $append_string;

		// The MAGIC! Uses the same function that WordPress uses to update htaccess files, update 'Wordpress' to whatever string you use for your markers
                return insert_with_markers( $filename, 'Wordpress',  $postcontent );

}

add_action( 'save_post', 'do_stuff_after_post_save' );