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).
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.
Now let’s continue doing the same with the rest of the fields.
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).
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! 😀