This blog is part 1 of 2 part series that covers how to set-up a custom post type in Divi and how to effectively use them with Divi library layouts.

Setting up custom post types in Divi isn’t an easy task, but hopefully, the following tutorial will lighten the burden. I’ve worked with Divi for several years now, but it wasn’t until recently that a client requested a custom post called “Team” with simple input fields where his employees can create profile pages and have those pages dynamically populate an archive page. The fields requested were: Job title, Education, Favorite Quote, and bio.

Now to a PHP expert, this is easily achievable. But to a web designer with limited programming skills, the task seemed daunting. But after many hours of research, trial and error, the end result was a definite game changer. I now can tailor any WordPress theme to suit a client’s needs and make it easier for them to manage. Below are the 4 main obstacles I faced.

1. Create a CPT named “Team”. If you don’t know what a CPT is, Divi comes with one already installed. It’s called “Projects”.
2. Create 4 custom fields within the CPT above.
3. Create a template for the single team page.
4. Create a template to the archive team page that showcases all the team members.

Key Plugins

• Custom Post Type UI
• Advanded Custom Fields

Note: part 1 of this tutorial will focus on setting up a custom post type and custom fields within that post type. However, you can just skip ahead and watch the full video tutorial that encompasses both part 1 and 2 of this series.

If not, go ahead and download the CPT UI and Advanced Custom Fields plugins. After installing, hover over CPT UI and click “Add/Edit Post Types”.

Next, click “Add/Edit Post Types” and give your CPT a name. In our case, we’ll called it “Team”. The first 3 fields in the “Basic settings” are all that’s required, underneath that are all optional. However, I find myself labeling everything for the sake of professionalism.
Below that are the “Settings” options, which you can also leave at default; however, I find myself changing the “Menu Position” and “Menu Icon”. The menu position controls where the new CPT (e.g., Team) appears on the WP dashboard sidebar. I like to position it right below the “Pages”.

The “Menu Icon” is pretty cool setting too. Simply head over to wordpress.org and browse the dashicon you deem fit. Once you find the icon, click “Copy HTML” and copy the tag which looks like this <span class="dashicons dashicons-groups"></span><. All you have to do is copy the last class (dashicons-icon-name) and paste it in the “Menu Icon” field. Since I’m using a CPT named “Team”, the icon below seems most relevant. If there are no icons that matches your CPT category, there is also the option to upload your own icon image.

Next is the “Support” options. Here you can select what options you want to keep or omit within your custom post type (I like to include: Title, Editor, Featured Image, Custom fields, and Revisions).

Lastly are the “Built-in Taxonomies”. Here you can take advantage of WordPress core functionality for posts. Selecting “Categories” and “Tags” are always a good move as these will give you the options to create categories and tags.

Setting up custom fields within custom post types.

Setting up custom fields in Divi is pretty straight forward. If you haven’t already, download Advanced Custom Fields plugin and start creating your fields. Remember our client wanted 4 custom fields, so go ahead and click “Field Groups”.

This is where all your field groups live. Go ahead and click “Add New” and give your group a name. In our case, we’ll call it “Team Profile”. Now before creating a new field, I like to assign my new group to a post. We will say “Post Type” is equal to “Team” (or whatever name you gave your CPT). Click the drop down to view all your custom posts type.

Now let’s create our fields, click the blue “+ Add Field” button. This will open a page with a few options, simply follow along and configure to taste. The first field I will call “Name”. Once you reach the end, click the “+ Add field” button again to create your next field, which we will call “Job Title” and so on. Once all our fields are created, click the blue “Publish” button and now your fields will embed in your “Team” CPT.

And there you have it, folks. In a few simple steps, we created a custom post type with custom fields. In part 2, we will learn how to set-up the single template along with our custom fields. You can see the full video tutorial here.