This tutorial shows you how to create a basic custom post type that is fully compatible with the Divi Builder by Elegant Themes. If you’re familiar Divi already and custom post types, you probably have experienced the issue where the Divi content editor doesn’t span full width across custom post type pages. This makes it challenging to create custom post type pages that are consistent with the rest of your site since all of Divi’s themes stay contained within the content section of the post.
Keep in mind that this tutorial does not cover the ins and outs of setting up your custom post types. Instead, we’re only covering how to get the Divi Builder by Elegant Themes to fully integrate with all custom post types seamlessly.
What is a Custom Post Type in WordPress?
A custom post type is nothing more than a type of post available in WordPress that you can delineate and organize into it’s own section on the backend of your site. There are many different cases where post types would greatly help keep your website content organized both on the front and back ends. For example, a franchise website might create a custom post type for all of their locations so they can easily add additional locations on the backend without them getting mixed up in the “pages” post type. Additionally, an online magazine might separate various content sections such as “Lifestyle,” “Reviews,” “News,” etc., and then feed those post types to separate website pages, keeping things organized both on the front and backend of the website.
How to Create a Custom Post Type in WordPress
When it comes to creating custom post types beyond the ones that already come with WordPress (pages, posts, projects, etc.), there are many different free plugins available. Personally, I’ve enjoyed and had a lot of luck using Custom Post Types UI. It’s got many features to choose from when creating your post types, it’s simple to set up, and it’s completely free to use for most needs. To download this, navigate to your Plugins section from your WordPress dashboard.
Choose Add New at the top of your screen.
Search for “Custom Post Types UI” and then select Install Now and Activate.
Once installed, you can access the plugin from the navigation menu in your WordPress dashboard. From there, you can set up your post type.
How to Use the Divi Builder on Custom Post Types
Before you can use the Divi Builder on your newly created custom post type, you’ll need to enable it as an option in Divi.
Go to Divi > Theme Options > Builder
From here, you’ll have the option to toggle your new custom post type to “Enabled.”
Be sure to save your changes.
Make the Divi Editor Work Full Width on Custom Post Types in WordPress
If you don’t complete this next step, you’ll notice that even though the Divi editor is now an option on your new custom post types, it keeps all your content locked within the post content block. This is obviously not ideal if you plan to make your custom post types consistent with the rest of your website’s page design. In order to force the Divi editor to span full width on all your custom post types, all you need to do is enter a custom CSS code snippet.
To get started, navigate to your WordPress dashboard. From there go to Divi > Theme Options > General.
From here, scroll all the way down to the bottom of the page until you see a gray box called Custom CSS. You may already have some custom CSS here, and that’s okay.
If you already have some code here, you can simply create a space and then paste in the following CSS code snippet into this box.
.container {
width: 100%;
max-width: 100%;
}
#left-area .post-meta {
display: none;
}
.entry-title {
display:none;
}
#main-content .container {
padding-top: 0;
}
.container.et_menu_container {
max-width: 1080px;
}
Be sure to hit save after you’ve placed your code snipped in this box. Next, you can return to your custom post type and begin using the Divi editor full width on all post types! Problem solved! One caveat to this resolution is that it will force all post types to go full width. So if you are using the classic editor on some posts such as traditional blogs, you’ll need to create a blog template using Divi, or you can select an already-made post template from Divi’s extensive library of options.
I hope you’ve found this tutorial helpful. Good luck!
[et_bloom_inline optin_id=optin_2]
Mel Beasley has a bachelor’s in creative writing and journalism from the University of North Carolina at Wilmington. He brings 9+ years of digital marketing and writing experience to the table by writing for publications such as Lumina News and Encore Magazine. He spent 2 years as a college-level writing tutor, and is a certified writing tutor through the CRLA, which is a prestigious cert recognized by the Association for the Coaching & Tutoring Profession. He is a professional SEO blogger with experience writing for brands such as Boardworks Education and The Greater Wilmington Business Journal. One of his latest website and marketing projects has been building the website for the now New York Times Bestselling author, Nina de Gramont.
