The advent of Gutenberg has really shaken up my website. Consequently, I found my WordPress Custom Post Types (CPTs) needed some work. However, my theme OceanWP doesn’t make it easy to define custom single and archive templates. Instead, I recently upgraded my website with Elementor Pro, a paid extension to the free Elementor page builder plugin.
Besides all the new widgets, Elementor Pro allows users to define custom single- and archive- post and page PHP templates without the extra WordPress theme development and coding.
To kick-off this week, let’s learn how to make a new Custom Post Type and define its single-cpt.php template with Elementor Pro.
When to Create a Custom Post Type for Your WordPress Website:
When is it better to create a Custom Post Type (CPT) for your WordPress website? CPTs are useful when a group of posts:
- Has repetitive content and/or layouts
- Needs their own categories
- Has stand-alone content separate from other kinds of content
Tutorial Outline:
- Add new CPT to PHP document
- Enable Elementor editing on new CPT
- Refresh WordPress permalinks
- Create a CPT sample post/page
- Add new single template in Elementor Pro
Step 1: Add the New Custom Post Type in the PHP
These steps are the same as my earlier tutorial, “How I Manually Added A Custom Post Type in WordPress,” but I did streamline the code a bit more.
Several plugins automate the creation of custom post types. However, this step is really easy and you can keep your plugins light by simply creating your own plugin to make the CPTs. A code snippet in your child theme’s functions.php works the same. Yet for the reasons outlined in the earlier tutorial, consider making your own plugin (not in the child theme’s functions). Chiefly, this method allows your CPTs to travel from theme to theme.
First Login to your site’s directory via SFTP.
(If not you’re not using SFTP, check out my HTTPS & SSL tutorial to learn how to get set up with SSL certificates and SFTP to protect your website.)
Locate the public_html/wp-content/plugins folder. Then create a new folder and assign it the same name as the plugin. It’s good practice to prepend any of your own custom mods with your name to avoid naming conflicts with system or theme scripts. For example, my folder name is “lara-custom-post-types-2”. (I’m keeping this tutorial separate from my regular theme modifications, so it’s number 2.) Enter this folder, then open your web development program of choice.
After that, create a new PHP document, paste the code snippet below, and save it with the same name as its parent folder. Like before, that’s “lara-custom-post-types-2.php” for me. Adapt names, icons, and preferences as necessary.
Be careful when modifying the file to preserve the following:
- Function
initialization
This is thefunction add_cpt_example_cpt() {…}bit. In programming, initialization refers to the definition of a item to tell the computer what it is. - WordPress
register post command
This is theregister_post_type( 'example_cpt', $args );bit. This goes inside the function initialization above, right before its closing curly brace. When this code runs, it actually creates the CPT item now that the computer knows what it’s making. However this function doesn’t run by itself, it needs to be started with… - Execute the
function
This is theadd_action( 'init', 'add_cpt_example_cpt');bit after the function initialization closes. This can go either above or below the function initialization, but it’s better practice to define the function first before calling it to prevent any micro-delays when the computer searches for it. This part finally runs the function to start the CPT creation in the computer.
That’s it! That’s all that’s required to make a new CPT.
Use This PHP Code Snippet to Start Making a New WordPress CPT:
<?php
/**
* Plugin Name: _Lara's Custom Post Types 2
* Description: This plugin adds Lara Lee's new Custom Post Types.
* Author: Lara Lee
* Version: 0.9
*/
function add_cpt_example_cpt() {
$labels = array(
'name' => _x( 'Examples', 'Post Type General Name' ),
'singular_name' => _x( 'Example', 'Post Type Singular Name' ),
'menu_name' => __( 'Examples' ),
'parent_item_colon' => __( 'Parent Example' ),
'all_items' => __( 'All Examples' ),
'view_item' => __( 'View Example' ),
'add_new_item' => __( 'Add New Example' ),
'add_new' => __( 'Add New' ),
'edit_item' => __( 'Edit Example' ),
'update_item' => __( 'Update Example' ),
'search_items' => __( 'Search Example' ),
'not_found' => __( 'Not Found' ),
'not_found_in_trash' => __( 'Not found in Trash' ),
);
$args = array(
'label' => __( 'example_cpt' ),
'labels' => $labels,
'description' => __( 'Featured Examples.' ),
'capability_type' => 'post',
'taxonomies' => array( 'category' ),
'supports' => array( 'title', 'editor', 'excerpt', 'author', 'thumbnail', 'revisions', /*'custom-fields',*/ 'categories', ),
'show_in_rest' => true,
'hierarchical' => false,
'public' => true,
'show_ui' => true,
'show_in_menu' => true,
'show_in_nav_menus' => true,
'show_in_admin_bar' => true,
'menu_position' => 4,
'menu_icon' => 'dashicons-carrot',
'can_export' => true,
'has_archive' => true,
'exclude_from_search' => false,
'publicly_queryable' => true,
'rewrite' => array('slug' => 'example_cpt'),
);
register_post_type( 'example_cpt', $args );
};
add_action( 'init', 'add_cpt_example_cpt');
function enable_oceanwp_metabox_on_cpt_2( $types ) {
// Your custom post type
$types[] = 'example_cpt';
return $types;
};
// Optional:
add_filter( 'ocean_main_metaboxes_post_types', 'enable_oceanwp_metabox_on_cpt_2' );
?>Save this PHP document into its plugin folder online.
Optional: Enable Theme Metabox to CPT Editor
Add your theme’s metabox to import theme styling controls into your CPT editor. Generally, this varies from theme to theme. Nonetheless, the code snippet for my theme, OceanWP, has been included in the code snippet below as an example. The filter name is predesignated by the theme, so research what your theme uses.
Activate the plugin to launch the CPT. Go to Dashboard > Plugins, find the custom plugin, and click “Activate.” As a result, the CPT will now appear in the Dashboard. Creating a new post with the CPT shows the editor and the theme metabox settings, if the optional code ran.
Step 2: Enable Elementor Editing in the New CPT
Go to the WordPress Dashboard > Elementor > Settings. Check the new CPT box to enable editing on its posts using Elementor. Consequently, now you can build the post with the Elementor Pro page builder.
Unfortunately, creating a new post and previewing it now will return a 404 Not Found error. This is because WordPress hasn’t yet made URLs for the new CPT posts.
Step 3: Refresh WordPress Permalinks
Go to Dashboard > Settings > Permalinks and click “Save Changes” — no changes required. This save causes WordPress to refresh its permalink structure so the new CPT posts will have live URLs.
Step 4: Create a CPT Sample Page
This step enables the preview from the Elementor template creation later to populate with actual content so you can see what’s working and what’s not. Just create a dummy post and publish it. Likewise with other Elementor-built pages, be sure to add feature images here, assign categories, adjust page attributes, and other routine tasks. Publish the sample post so Elementor can grab content for the previews. (Of course it can be deleted after the template building is done, if no longer needed.)
Step 5: Add a New Single Template for the CPT with Elementor Pro
Go to the Dashboard > Templates > Add New. From the dropdown menus, select the CPT, the template type, and enter a template name. Afterward, Elementor opens with a library of pre-built templates. Select from here or close the window to build your own.
When opting to built a template from scratch, Elementor will default to a blank view. Drag and drop widgets to assemble the layout like normal. However, the template builder also introduces several new widgets such as “Post Title,” “Featured Image,” “Post Content,” and more. These widgets are dynamic placeholders that will populate with actual post content (hence, why the sample page had to be published earlier.)
If when on the initial drag-and-drop, the Featured Image or Post Content isn’t loading in the Preview, adjust the Elementor preview settings. Below next to the green Publish button, an eye icon appears. Click it then Settings to open the Elementor Preview Settings. Select the CPT from the dropdown menu for “Preview Dynamic Content as” then hit “Apply & Preview.”
After customizing the template, hit “Publish.” In the new window that appears, apply conditions for Elementor Pro to know when to apply the new template. Make any changes then hit “Publish.”
If at a later time you wish to modify the instances you selected, simply go to Dashboard > Templates >hover over the template to reveal Edit with Elementor > down carot beside Publish button > Display Conditions.
Troubleshooting FAQ:
My new CPT isn’t appearing in the Dashboard.
Check for PHP invalidation errors. For instance, look for an extra or missing comma or properly closed brackets. Also check that both commands, register_post_type( 'my_new_cpt', $args ); and add_action( 'init', 'add_cpt_sample'); are in the PHP code. Furthermore, check that the function creating the PHP is both initialized and actually executed (sometimes the CPT is created but not yet activated). Finally, check that the post type name is 20 characters or less for WordPress support.
My CPT post/page works in the editor but viewing the live page returns a 404 error.
WordPress needs to update its Permalinks to account for the new CPT. Go to Dashboard > Settings > Permalinks and click the Save Changes button to “refresh” the permalinks.
The editor doesn’t display my theme’s extra settings for my CPT post/page.
The CPT functions.php requires additional code to enable your theme’s customization settings. However, this precise code varies from theme to theme. This is the PHP code snippet to enable OceanWP’s metabox in the CPT editor page:
function enable_oceanwp_metabox_on_cpt_2( $types ) {
// Your custom post type
$types[] = 'example_cpt';
return $types;
};
add_filter( 'ocean_main_metaboxes_post_types', 'enable_oceanwp_metabox_on_cpt_2' );My CPT doesn’t have the “Edit with Elementor” option.
Check the permalinks as well as the Elementor settings. First go to the Dashboard > Settings > Permalinks. Then, click the Save Changes button to “refresh” the permalinks. Then, go to the Dashboard > Elementor > Settings and check your CPT shown in the “Post Type” list.
The Elementor Pro template preview isn’t populating with my sample content.
Follow the answers above to check that the CPT registered correctly, permalinks refreshed, and Elementor editing is enabled.
However, if the problem isn’t resolved, adjust the Elementor preview settings. Click the Preview (eye) icon beside Publish > Settings > Preview Settings. Select the CPT from the dropdown menu for “Preview Dynamic Content as” then hit “Apply & Preview.”
If your CPT also uses custom fields with the Advanced Custom Fields plugin like some of mine do, Elementor Pro’s dynamic Post Content widget won’t display your content. Instead, select a widget like the Rich Text Editor, click the small link “Dynamic,” scroll to “ACF,” select “ACF Field” and next to the “Key” dropdown, select which custom field. Although, please note that the options vary based on your chosen Elementor’s template display instances and ACF’s field group display settings. Watch Elementor’s tutorial video for integrating ACF into its templates to see it in action.
Elementor is overriding my custom fonts and colors.
Go to Dashboard > Elementor and check both “Disable Default Colors” and “Disable Default Fonts” to turn off Elementor’s default styles.
My new Elementor Pro Single Template is overridden by my theme’s default layout template.
Go to Dashboard > Templates > and without opening to edit in Elementor Pro, scroll down to the theme’s metabox and select layout “Full Width.”
I need to change the instances when my template displays after I already published it in Elementor.
Go to Dashboard > Templates >hover over the template to reveal Edit with Elementor > down carot beside Publish button > Display Conditions.
