A Divi custom page template allows you to create a unique layout for specific pages on your WordPress website using the Divi theme. This can be useful when you want to have different designs for different sections of your website or when you want to create landing pages with a specific layout.
To create a Divi custom page template, follow these steps:
Create a new PHP file in your child theme directory. You can name it whatever you like, but it’s a good practice to use a descriptive name for the template. For example,
custom-template.php.Open the PHP file and add the following code at the beginning to define the template name and enable Divi Builder:
<?php
/*
* Template Name: Custom Template
* Template Post Type: page
*/
get_header();
- After the
get_header()function, you can start building your custom layout using the Divi Builder. You can use the Divi Builder modules, rows, and sections to create your desired layout. Here’s an example of a simple layout with a full-width section and a text module:
<div id="content-area" class="site-content">
<div class="container">
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<div class="entry-content">
<div class="et_pb_section et_pb_section_0 et_section_regular">
<div class="et_pb_row et_pb_row_0">
<div class="et_pb_column et_pb_column_4_4 et_pb_column_0">
<div class="et_pb_module et_pb_text et_pb_text_0 et_pb_bg_layout_light">
<div class="et_pb_text_inner">
<h1>Custom Template</h1>
<p>This is a custom page template created using Divi Builder.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</article>
</main>
</div>
</div>
</div>
- After you have finished building your layout, add the following code at the end of the PHP file to include the footer and close the PHP tags:
<?php
get_footer();
Save the PHP file and upload it to your child theme directory.
Now, when you edit a page in WordPress, you will see a new option in the Page Attributes section called “Template”. Select the “Custom Template” option from the dropdown to apply your custom layout to that page.
Note: Make sure you have the Divi theme installed and activated on your WordPress website for this to work.
This code example creates a custom page template named “Custom Template” and applies it to pages. It includes a basic layout with a full-width section and a text module. You can modify the layout and add more modules, rows, and sections as needed to create your desired design.
Examples
Example 1: Creating a Divi Custom Page Template
This use case demonstrates how to create a custom page template for the Divi theme in WordPress. The code example below shows how to create a new template file and assign it to a specific page in the WordPress admin.
<?php
/*
Template Name: Custom Divi Template
Template Post Type: page
*/
get_header();
// Add your custom code here
get_footer();
?>
In this code example, we create a new template file called “Custom Divi Template” and assign it to the “page” post type. The template file starts with a comment that specifies the template name and post type. Inside the template file, you can add your custom code to modify the layout and functionality of the page. The get_header() and get_footer() functions include the header and footer templates respectively.
Example 2: Customizing the Divi Page Template
This use case demonstrates how to customize the Divi page template by adding custom code to the template file. The code example below shows how to modify the layout and add custom functionality to the Divi page template.
<?php
/*
Template Name: Custom Divi Template
Template Post Type: page
*/
get_header();
// Add your custom code here
// Display the page content
if (have_posts()) {
while (have_posts()) {
the_post();
the_content();
}
}
get_footer();
?>
In this code example, we start with the same template file as in Example 1. Inside the template file, we can add our custom code to modify the layout and functionality of the page. In this example, we use the the_content() function to display the content of the page. You can add any custom code before or after the the_content() function to customize the page template further.
Example 3: Adding Custom CSS to the Divi Page Template
This use case demonstrates how to add custom CSS styles to the Divi page template. The code example below shows how to enqueue a custom CSS file and apply the styles to the Divi page template.
<?php
/*
Template Name: Custom Divi Template
Template Post Type: page
*/
function wpsnippets_enqueue_custom_css() {
wp_enqueue_style('custom-css', get_template_directory_uri() . '/custom.css');
}
add_action('wp_enqueue_scripts', 'wpsnippets_enqueue_custom_css');
get_header();
// Add your custom code here
// Display the page content
if (have_posts()) {
while (have_posts()) {
the_post();
the_content();
}
}
get_footer();
?>
In this code example, we start with the same template file as in Example 1. We create a custom function wpsnippets_enqueue_custom_css() that enqueues a custom CSS file called “custom.css”. The wp_enqueue_style() function is used to enqueue the CSS file. We then use the add_action() function to hook the custom function to the wp_enqueue_scripts action, which ensures that the CSS file is loaded on the front-end. The custom CSS styles will be applied to the Divi page template.