Last updated on October 18, 2023

Divi custom post template

Don’t know where to add this snippet? Read our guide: How to add code snippets.

Design custom templates for posts in Divi.

A Divi custom post template allows you to create a unique layout for specific post types in your WordPress website using the Divi theme. This is useful when you want to display certain post types differently from the default layout provided by Divi.

To create a Divi custom post template, you need to follow these steps:

  1. Create a new file in your child theme directory and name it single-{post_type}.php, where {post_type} is the slug of the post type you want to create a custom template for. For example, if you want to create a custom template for the “portfolio” post type, the file name should be single-portfolio.php.

  2. Open the newly created file in a code editor and add the following code at the beginning:

<?php
/**
 * Template Name: Custom Divi Post Template
 * Template Post Type: {post_type}
 */

Replace {post_type} with the slug of the post type you are creating the template for. For example, if you are creating a template for the “portfolio” post type, the code should be:

<?php
/**
 * Template Name: Custom Divi Post Template
 * Template Post Type: portfolio
 */
  1. After the code added in step 2, you can now design your custom layout using the Divi Builder. You can add modules, sections, rows, and customize the design as per your requirements.

  2. Save the file and upload it to your child theme directory.

Now, when you create or edit a post of the specified post type, you can select the “Custom Divi Post Template” from the “Page Attributes” section in the WordPress editor. This will apply the custom layout you created using the Divi Builder to that post.

Note: Make sure you have the Divi theme installed and activated, and you are using a child theme to make any modifications.

Here’s an example of a custom Divi post template for the “portfolio” post type:

<?php
/**
 * Template Name: Custom Divi Post Template
 * Template Post Type: portfolio
 */

get_header();

if (have_posts()) {
    while (have_posts()) {
        the_post();
        ?>
        <div id="content-area" class="clearfix">
            <div id="left-area">
                <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                    <div class="entry-content">
                        <?php
                        // Custom Divi Builder layout goes here
                        ?>
                    </div>
                </article>
            </div>
            <?php get_sidebar(); ?>
        </div>
        <?php
    }
}

get_footer();

This code creates a custom Divi post template for the “portfolio” post type. It includes the necessary template header and footer, and a loop to display the post content. The custom Divi Builder layout can be added within the entry-content div.

Examples

Example 1: Creating a Divi custom post template

This use case demonstrates how to create a custom post template for Divi theme using WordPress coding standards.

function wpsnippets_divi_custom_post_template( $template ) {
    if ( is_singular( 'your_custom_post_type' ) ) {
        $template = 'path/to/your-custom-template.php';
    }
    return $template;
}
add_filter( 'template_include', 'wpsnippets_divi_custom_post_template' );

The code example above shows a custom function wpsnippets_divi_custom_post_template that hooks into the template_include filter. It checks if the current post is of a specific custom post type (your_custom_post_type) and sets a custom template file path (path/to/your-custom-template.php) for that post type. This allows you to create a unique template for your custom post type in Divi.

Example 2: Adding custom fields to Divi custom post template

This use case demonstrates how to add custom fields to a Divi custom post template using Advanced Custom Fields (ACF) plugin.

function wpsnippets_divi_custom_post_template_fields() {
    if ( function_exists( 'acf_add_local_field_group' ) ) {
        acf_add_local_field_group( array(
            'key' => 'group_custom_fields',
            'title' => 'Custom Fields',
            'fields' => array(
                // Add your custom fields here
            ),
            'location' => array(
                array(
                    array(
                        'param' => 'post_type',
                        'operator' => '==',
                        'value' => 'your_custom_post_type',
                    ),
                ),
            ),
        ) );
    }
}
add_action( 'acf/init', 'wpsnippets_divi_custom_post_template_fields' );

The code example above demonstrates how to use the ACF plugin to add custom fields to your Divi custom post template. The acf_add_local_field_group function is used to define a group of custom fields. You can add your desired custom fields within the fields array. The location parameter specifies that the custom fields should only be displayed for the your_custom_post_type post type.

Example 3: Modifying Divi custom post template layout

This use case demonstrates how to modify the layout of a Divi custom post template by overriding the default Divi template file.

function wpsnippets_divi_custom_post_template_layout( $template ) {
    if ( is_singular( 'your_custom_post_type' ) ) {
        $template = 'path/to/your-custom-template.php';
    }
    return $template;
}
add_filter( 'et_single_template', 'wpsnippets_divi_custom_post_template_layout' );

The code example above shows a custom function wpsnippets_divi_custom_post_template_layout that hooks into the et_single_template filter. It checks if the current post is of a specific custom post type (your_custom_post_type) and sets a custom template file path (path/to/your-custom-template.php) for that post type. This allows you to completely override the default Divi template layout for your custom post type.

Last updated on October 18, 2023. Originally posted on December 3, 2023.

Leave a Reply

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