Adding Custom Layouts to Divi

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

Adding Custom Layouts to Divi

The Divi Theme has a nice feature where you can save your Page Builder page layouts for use as templates on other pages. By default Divi comes with a selection of predefined layouts. If you’d like to programmatically add to this selection of predefined layouts (e.g. as part of a child theme), this post will show you how.

The first thing to use the page builder to create your page template – simply add the sections and modules you want, and add any default text, etc. Save the page.

Next, we want to get the code Divi uses to represent the page layout internally. Divi hides the page layout code, but you can get it by switching to another theme (one without page builder) and reloading the page edit screen. The page editor box will now show a bunch of shortcodes and other content that represent your Divi page. Copy everything from the page editor box.

Now, in your functions.php file, add the following code:

function myprefix_add_layout() {
    $title = 'My Custom Layout';
    $content =<<<END
[et_pb_section][et_pb_row][et_pb_column type="4_4"][et_pb_text admin_label="Text" background_layout="light" text_orientation="left"]

My custom layout text.

[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]
END;

    $title = sanitize_text_field($title);

    if (!get_page_by_title($title, 'OBJECT', 'et_pb_layout')) {

        $layout = array(
            'post_title' => $title,
            'post_content' => $content,
            'post_status' => 'publish',
            'post_type' => 'et_pb_layout',
        );

        $layout_id = wp_insert_post( $layout );

        add_post_meta( $layout_id, '_et_pb_predefined_layout', 'on' );
    }
}

add_action('load-post.php', 'myprefix_add_layout');

Change the title (i.e "My Custom Layout") and content (i.e. the value assigned to the $content variable) to the name you want for your predefined layout and to the page builder template code you obtained earlier, respectively.

Now switch back to Divi and start a new page. Change to the Page Builder and select “Load Layout”. Scroll to the end of the predefined layouts and you should see your new layout listed. Select it and it should load as the template for that new page.

A couple of notes:

  • If you’d prefer your layout to appear in the "Saved Layouts" section (which makes the layout appear earlier in the list of available layouts and also gives the user the option of deleting it), then simply remove the line above that begins "add_post_meta(…".
  • In this example, I’ve hooked the layout adding code into “load-post.php” meaning it will be run every time the post editor page is loaded, which works but isn't terribly efficient. If you are using this code in a child theme, for instance, you may want to modify the code to run only of first activation of the theme.

Want get more out of Divi?

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

8 Comments

  1. With regards to this section of the article

    "In this example, I’ve hooked the layout adding code into “load-post.php” meaning it will be run everytime the post editor page is loaded, which works but isn’t terribly efficient. If you are using this code in a child theme, for instance, you may want to modify the code to run only of first activation of the theme."

    So if I wanted this to take effect only on theme activation does that mean I would change the last line of code to the following?

    add_action( 'after_setup_theme', 'twentyfifteen_setup' );

    What effect does hooking into theme activation have – will these layouts still be available from the editor moving forward?

    Reply
    • Hi Leif, yes that's basically the change I'd expect you'd need to make (though I haven't tested it myself). Note that the second argument to add_action will be the name of the function for adding the custom layouts, so in my example above you'd need:

      add_action( 'after_setup_theme', 'myprefix_add_layout' );
      

      The code works by inserting a single custom post (of the et_pb_layout custom post type used by Divi). In the scenario I was testing it in (i.e. adding directly into functions.php) there was not initial activation event, so I added a check to make sure the layout hasn't already been added. This ensures that the layout is only added once. But as I note, it's inefficient to be checking this every time the page loads. By adding it using the theme activation hook the code will run once and insert the layout which will remain in the database and be available to the theme from then on – there's no need to run the code each time the page loads.

      Also, I've just updated the code in the post – the Divi shortcodes it contains were previously getting evaluated and messing up the code…

      Hope that helps, and good luck!

      Reply
  2. dan, how would this work if I wanted to add multiple page layouts to the functions.php ? 🙂

    Reply
    • Hey Craig! All you should need to do is make another copy of the code and replace the two occurrences of "myprefix_add_layout" (in the first and last lines) with something else, like "myprefix_add_layout_2" 🙂

      Reply
  3. just to clarify, when you add the code above, it needs to go in the or it wont work 🙂 thanks for the tutorial dan

    Reply

Submit a Comment

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

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

8 Comments

  1. With regards to this section of the article

    "In this example, I’ve hooked the layout adding code into “load-post.php” meaning it will be run everytime the post editor page is loaded, which works but isn’t terribly efficient. If you are using this code in a child theme, for instance, you may want to modify the code to run only of first activation of the theme."

    So if I wanted this to take effect only on theme activation does that mean I would change the last line of code to the following?

    add_action( 'after_setup_theme', 'twentyfifteen_setup' );

    What effect does hooking into theme activation have – will these layouts still be available from the editor moving forward?

    Reply
    • Hi Leif, yes that's basically the change I'd expect you'd need to make (though I haven't tested it myself). Note that the second argument to add_action will be the name of the function for adding the custom layouts, so in my example above you'd need:

      add_action( 'after_setup_theme', 'myprefix_add_layout' );
      

      The code works by inserting a single custom post (of the et_pb_layout custom post type used by Divi). In the scenario I was testing it in (i.e. adding directly into functions.php) there was not initial activation event, so I added a check to make sure the layout hasn't already been added. This ensures that the layout is only added once. But as I note, it's inefficient to be checking this every time the page loads. By adding it using the theme activation hook the code will run once and insert the layout which will remain in the database and be available to the theme from then on – there's no need to run the code each time the page loads.

      Also, I've just updated the code in the post – the Divi shortcodes it contains were previously getting evaluated and messing up the code…

      Hope that helps, and good luck!

      Reply
  2. dan, how would this work if I wanted to add multiple page layouts to the functions.php ? 🙂

    Reply
    • Hey Craig! All you should need to do is make another copy of the code and replace the two occurrences of "myprefix_add_layout" (in the first and last lines) with something else, like "myprefix_add_layout_2" 🙂

      Reply
  3. just to clarify, when you add the code above, it needs to go in the or it wont work 🙂 thanks for the tutorial dan

    Reply

Submit a Comment

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