Part 2 of this 2 part series covers how to set-up custom post types and custom fields in Divi.

Now that our fields are created and in place (see part 1 on how to do this), it’s time to create our custom layout. Now before I begin, it has been well over a year since I wrote the first part of this series and well, I’ve learned a lot since then. And it occurred to me, continuing on this path is not the most efficient way to execute. I feel like I’d be doing you a great disservice if I did not show you a better way. But the good news is, all that we accomplished in the last tutorial will not go to waste and this method will not require a paid plugin.

So last we left off, we created 4 simple fields and linked those fields to our new “Team” custom post type. Now we are going to create a single team page and design it however you see fit.
Once you’re done, let’s inspect element on your browser and copy the relative code and paste it in your code editor (watch the full video tutorial below on how to do this).

Layout Code

<div class="et_pb_section et_pb_section_0 et_section_regular">
 <div class="et_pb_row et_pb_row_0 et_hover_enabled et_pb_equal_columns">
 <div class="et_pb_column et_pb_column_1_2 et_pb_column_0    et_pb_css_mix_blend_mode_passthrough">
 <div class="et_pb_module et_pb_image et_pb_image_0 et_always_center_on_mobile">
 <span class="et_pb_image_wrap ">
 <img src="https://a26theme.com/wp-content/uploads/2018/12/carlos.png" alt=""></span>
 </div>
 </div> 
 <div class="et_pb_column et_pb_column_1_2 et_pb_column_1    et_pb_css_mix_blend_mode_passthrough">
 <div class="et_pb_module et_pb_text et_pb_text_0 et_pb_bg_layout_light  et_pb_text_align_left">
 <div class="et_pb_text_inner">
 <h2>Carlos J Montalvo</h2>
 <p>
 <strong>Job title: </strong> Web Developer<br>
 <strong>Education: </strong> Sessions College<br>
 <strong>Favorite Quote: </strong> Live and let live!
 </p>
 <p>A graduate of Sessions College for Professional Design and hold a full-time lead web developer position at GWP Inc. When not in front of my computer, I love spending time with family, Morkie’s Mama and Papa, watching Netflix and winning online poker tournaments.</p>
 </div>
 </div>
 </div>
 </div>
</div>

Now that we have our code in place, it’s time to replace the “hard” coded fields with our own custom fields. Let’s head over to our “Team” field group, while paying close attention to the column labeled “Name”.

Let’s start with the profile image.

Replace:

<img src="https://a26theme.com/wp-content/uploads/2018/12/carlos.png" alt="">

With:

<img src="<?php the_post_thumbnail_url();?>" alt="Team member <?php title();?>">

Now let’s continue doing the same with the rest of the fields.

Replace:

<h2>Carlos J Montalvo</h2>
<p>
<strong>Job title: </strong> Web Developer<br>
<strong>Education: </strong> Sessions College<br>
<strong>Favorite Quote: </strong> Live and let live!
</p>
<p>A graduate of Sessions College for Professional Design and hold a full-time lead web developer position at GWP Inc. When not in front of my computer, I love spending time with family, Morkie’s Mama and Papa, watching Netflix and winning online poker tournaments.</p>

With:

<h2><?php the_title(); ?></h2>
<p>
<strong>Job title: </strong> <?php the_field('job_title'); ?><br>
<strong>Education: </strong> <?php the_field('education'); ?><br>
<strong>Favorite Quote: </strong> <?php the_field('favorite_quote'); ?>
</p>
<p><?php the_field('bio'); ?></p>

Complete Code

<div class="et_pb_section et_pb_section_0 et_section_regular">
 <div class="et_pb_row et_pb_row_0 et_hover_enabled et_pb_equal_columns">
 <div class="et_pb_column et_pb_column_1_2 et_pb_column_0    et_pb_css_mix_blend_mode_passthrough">
 <div class="et_pb_module et_pb_image et_pb_image_0 et_always_center_on_mobile">
 <span class="et_pb_image_wrap ">
 <img src="<?php the_post_thumbnail_url();?>" alt="Team member <?php the_title(); ?> "></span>
 </div>
 </div>
 <div class="et_pb_column et_pb_column_1_2 et_pb_column_1    et_pb_css_mix_blend_mode_passthrough">
 <div class="et_pb_module et_pb_text et_pb_text_0 et_pb_bg_layout_light  et_pb_text_align_left">
 <div class="et_pb_text_inner">
 <h2><?php the_title(); ?></h2>
 <p><strong>Job title: </strong> <?php the_field('job_title'); ?><br>
 <strong>Education: </strong> <?php the_field('education'); ?><br>
 <strong>Favorite Quote: </strong> <?php the_field('favorite_quote'); ?>
 </p>
 <p><?php the_field('bio'); ?></p>
 </div>
 </div>
 </div>
 </div>
</div>

Now that our fields are no longer hard coded. It’s time to complete our file so it renders correctly in our browser. Simply add the completed code above in between the code block below (watch video for a better demonstration).

<?php 
/* Template Name: Single Team */
get_header();?>
<div id="et-main-area">
 <div id="main-content">
 <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
 <div class="entry-content">
 <div id="et-boc" class="et-boc">
 <div class="et_builder_inner_content et_pb_gutters3">  <!---- Place Completed Code Here ----->  </div>
 </div> 
 </div> 
 </article> 
 </div>
</div>
<?php get_footer();?>

Completed Template File Ready to Upload

<?php
/* Template Name: Single Team */
get_header();?>
<div id="et-main-area">
 <div id="main-content">
 <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
 <div class="entry-content">
 <div id="et-boc" class="et-boc">
 <div class="et_builder_inner_content et_pb_gutters3">
 <div class="et_pb_section et_pb_section_0 et_section_regular">
 <div class="et_pb_row et_pb_row_0 et_hover_enabled et_pb_equal_columns">
 <div class="et_pb_column et_pb_column_1_2 et_pb_column_0    et_pb_css_mix_blend_mode_passthrough">
 <div class="et_pb_module et_pb_image et_pb_image_0 et_always_center_on_mobile">
 <span class="et_pb_image_wrap ">
 <img src="<?php the_post_thumbnail_url();?>" alt="Team member <?php the_title(); ?> "></span>
 </div>
 </div>
 <div class="et_pb_column et_pb_column_1_2 et_pb_column_1    et_pb_css_mix_blend_mode_passthrough">
 <div class="et_pb_module et_pb_text et_pb_text_0 et_pb_bg_layout_light  et_pb_text_align_left">
 <div class="et_pb_text_inner">
 <h2><?php the_title(); ?></h2>
 <p><strong>Job title: </strong> <?php the_field('job_title'); ?><br>
 <strong>Education: </strong> <?php the_field('education'); ?><br>
 <strong>Favorite Quote: </strong> <?php the_field('favorite_quote'); ?>
 </p>
 <p><?php the_field('bio'); ?></p>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div> 
 </div> 
 </article> 
 </div>
</div>
<?php get_footer();?>

Now we are ready to upload the completed file to our server. You can do this via FTP or cpanel. Make sure the file name starts with ‘single’ then ‘-‘ then the name of your custom post type. So in our example, the full name should read ‘single-team.php’. So say you named your custom post type “Books”, then the name of the file should read ‘single-books.php’. Once that’s uploaded to your child theme’s directory, you should be able to see your team single page render the newly created custom fields (watch the full video tutorial for a visual demonstration on how to upload the file to your server).

In the next tutorial, I’ll show you how to style the page. If you have any questions, please leave your comments below.

Till the next time Divi Designers! ?