How to Display Your Custom Post Types in Elementor

WordPress is no longer just a blogging platform; it powers over 43% of all websites. One of its most powerful features is Custom Post Types (CPTs), which allow users to structure content beyond default pages and posts.

When combined with Elementor PRO and plugins like Advanced Custom Fields (ACF), CPTs become a powerful way to easily build and display complex, dynamic websites without writing a single line of code.

This guide walks you through what custom post types and custom fields are, how to create CPTs using plugins (like CPT UI) or code, how to integrate CPTs with Elementor, and best practices and optimization tips.

What Are Custom Fields?

In essence, custom fields are pieces of additional information that can be added to your website via a plugin or by applying code. They are metadata elements you can attach to your content. For example, a portfolio CPT might include:

• Client name
• Year of project
• Technologies used

One of the most prominent WordPress plugin for managing custom fields is: Advanced Custom Fields (ACF). For this tutorial, we’ll focus on ACF, which is widely used due to its flexibility and compatibility with Elementor.

Why Use ACF with CPTs?

Custom fields let you store structured data in a CPT and then display it dynamically in Elementor. For example:

• A product CPT can display fields like price, size, and rating.
• A staff directory CPT can show job titles, departments, and bios.

Read about: Mastering Responsive Web Design Screen Sizes and Breakpoints

What is a Custom Post Type?

In WordPress, built-in post types include:

• Post
• Page
• Attachment
• Revision
• Navigation Menu
• Custom CSS
• Changesets
• User Data Requests

However, not all content fits these categories. That’s where Custom Post Types come in. A CPT is any content type that is different from the above, such as:

• Portfolios
• Products
• Reviews
• Recipes
• Real Estate Listings
• Business Listings

With Elementor, you can design how these CPTs are displayed using templates, dynamic content, and more.

Find out: How to Add Columns in Elementor for Stunning Layouts

Custom Post Type Examples

For a beginner in WordPress development, it is imperative to recognize the type of content that can be constituted as a CPT. Especially nowadays, when a lot of custom metadata (often with relatively small input information) can be added without the implementation of custom post types.

For instance, there is no need to create custom metadata for a small number of portfolios when the Elementor Portfolio widget can do the exact same thing but more efficiently.

Of course, if the amount of portfolios is immense, then creating a custom field and custom post type for them is easier than constantly manually editing the widget.

Simple Steps: How to Add Links to Buttons in Elementor

Examples

Here’s how CPTs can be structured for different use cases:

Portfolio

• Client name
• Project year
• Tools used
• Team members
• Description

E-commerce Products

• Price
• Variants
• Quantity
• Rating

Reviews

• Title
• Author
• Genre
• Release date
• Review summary

Staff/Team Pages

• Staff names
• Photos
• Job roles
• Department

Real Estate Listings

• Size
• Number of rooms
• Price
• Location

As you can see, almost any type of data can make use of custom post types, but it is up to you to decide whether it is worth it. We highly recommend using custom post types for the aforementioned websites and similar ones.

Before creating a CPT, always evaluate: Is the data set large enough to justify creating a separate post type? If you’re dealing with just a few items, a widget may suffice.

How to Create Custom Post Types Using Plugins?

Creating custom post types (CPTs) in WordPress is simple and efficient when using plugins like Custom Post Type UI (CPT UI) in combination with Advanced Custom Fields (ACF). This section walks you through the process step-by-step.

Step 1: Install the CPT UI Plugin

To begin, install the Custom Post Type UI plugin:

• Go to your WordPress dashboard.
• Navigate to Plugins ⟶ Add New.
• In the search bar, type Custom Post Type UI.
• Click Install and then Activate.

Once activated, a new menu labeled “CPT UI” will appear in your WordPress admin panel.

Step 2: Add a New Custom Post Type

To create your custom post type: Click on CPT UI ⟶ Add/Edit Post Types.

Under Add New Post Type, fill out the required fields:

• Post Type Slug: This will be used in the URL and queries (e.g., movies).
• Plural Label: The name displayed in your admin menu (e.g., Movies).
• Singular Label: Used in the editor and post detail pages (e.g., Movie).

Tip: Use concise and lowercase slugs without spaces or special characters.

Step 3: Configure Post Type Settings

CPT UI provides various settings to customize your post type’s behavior. Here are key configurations:

• Public Visibility: Choose whether the post type is publicly accessible.

• Show in Admin Menu: Enable or disable visibility in the WordPress dashboard.

• Supported Features: Select the editing features (e.g., title, editor, featured image, excerpt).

• Has Archive: Enable archives for your post type.

• Custom Capabilities: Useful for advanced user role management.

Use the “Auto-populate labels” button to quickly fill in standard label fields based on your singular/plural label.

Step 4: Add Custom Fields Using ACF

Now that your custom post type is created, let’s enrich it with custom metadata using Advanced Custom Fields (ACF).

• Go to Custom Fields ⟶ Add New.

• Click Add Field Group and give it a meaningful title (e.g., “Movie Details”).

Add custom fields like:

• Text: For fields such as Director, Genre, or Duration.
• Image: For movie posters or thumbnails.
• Number: For fields like Budget or Year Released.
• Repeater: For adding multiple cast members, awards, etc.

Under Location Rules, set the group to appear if Post Type is equal to [Your CPT Name] (e.g., “Movie”).

Once saved, these fields will automatically appear when you add or edit a custom post under your new post type.

Boost Site Speed: WordPress Admin Code Optimization Tips

Steps for Making Custom Post Types Editable in Elementor

By default, Elementor only supports posts and pages. If your newly created custom post type (CPT) doesn’t show the “Edit with Elementor” option, you’ll need to manually enable support. Here’s how to do it:

Step 1: Access Elementor Settings

In your WordPress dashboard, go to Elementor ⟶ Settings. Under the General tab, you’ll see a list of post types currently supported by Elementor.

Step 2: Enable Elementor for Your CPT

Locate your custom post type in the list (e.g., Movies). Check the box next to it to allow Elementor editing. Next, click Save Changes at the bottom of the page.

Once enabled, Elementor will recognize your CPT and display the “Edit with Elementor” button when editing individual posts.

Step 3: Start Designing

Now, you can use Elementor’s drag-and-drop builder to design unique layouts for your custom posts.

Next, integrate ACF fields using the Dynamic Tags feature (available in Elementor Pro). Lastly, style CPT content just like regular pages or posts without touching any code.

Beginner-Friendly Guide: How to Use SVG Icons in Elementor

Steps for Displaying Custom Post Types in Elementor

Once you’ve created your custom post type (CPT) and added content with custom fields, the next step is to display this data visually using Elementor. Elementor Pro provides several tools that make showcasing CPTs intuitive and highly customizable.

Step 1: Use the Posts, Portfolio, or Loop Grid Widget

Elementor Pro offers multiple widgets to display lists of posts, including CPTs:

• Drag the Posts, Portfolio, or Loop Grid widget onto your page.
• In the widget’s settings panel, go to the Query section.
• Under Source, select your custom post type (e.g., Movies, Recipes, Testimonials).

These widgets pull entries from your CPT and present them in a clean, grid or list layout. You can also apply filters, pagination, and layout adjustments for better user experience.

Step 2: Display Custom Field Data from ACF

To display dynamic content from Advanced Custom Fields (ACF), follow these steps:

• Add a content widget (such as Text Editor, Image, or Heading) to your template.

• Click the Dynamic Tags icon (⚡) next to the content input area.

• Choose ACF Field from the list.

• Click the wrench icon that appears to select the specific custom field you want to show (e.g., Client Name, Project Year).

This allows you to showcase the specific data you’ve assigned to each post without hardcoding or duplicating design elements.

Step 3: Create Templates with Elementor Theme Builder

To streamline your CPT presentation and maintain design consistency:

• Go to Templates ⟶ Theme Builder in your WordPress dashboard.
• Create a new Single Post template to display individual CPT entries.
• Use dynamic widgets and ACF fields to build the layout.
• Set Display Conditions so the template only applies to your specific CPT (e.g., Show on single posts of type = Portfolio).

You can also create Archive templates to control how multiple CPT entries appear in category or taxonomy listings.

Pro Tip: This method not only ensures consistency but also saves time. Any change made to the template will automatically reflect across all CPT entries.

Know more: How to Change Your Page URL with Elementor

Creating Custom Post Types with Code (Advanced)

If you’re comfortable with PHP, here’s how to manually register a CPT:

function create_post_type() {
  register_post_type('elementor_product',
    array(
      'labels' => array(
        'name' => __('Products'),
        'singular_name' => __('Product')
      ),
      'public' => true,
      'has_archive' => true,
      'supports' => array('title', 'editor', 'thumbnail')
    )
  );
}
add_action('init', 'create_post_type');

Add this to your child theme’s functions.php file. Never edit the parent theme directly to avoid losing changes after updates.

Bonus: Custom Taxonomies for Better Organization

While the primary focus of this guide is on Custom Post Types (CPTs), it’s equally important to organize your content effectively. That’s where custom taxonomies come in. Custom taxonomies allow you to group and filter CPT entries based on categories you define, such as Genres for movies, Departments for team members, or Locations for events.

How to Create Custom Taxonomies with CPT UI

Go to CPT UI ⟶ Add/Edit Taxonomies

Fill in:

• Taxonomy Slug (e.g., genre)
• Plural Label (e.g., Genres)
• Singular Label (e.g., Genre)

Under Attach to Post Type, select the CPT(s) this taxonomy should apply to (e.g., Movies).

Configure visibility, admin menu display, and hierarchy options (hierarchical = like categories; non-hierarchical = like tags). Click Add Taxonomy to save.

Why Use Custom Taxonomies?

Here is how custom taxonomies can help:

• Improved filtering: Easily filter CPT entries on the front-end using taxonomies in Elementor.

• Better SEO structure: Organizing your CPT content with meaningful taxonomy terms helps search engines understand your content better.

• Enhanced navigation: Taxonomies can be displayed in menus or sidebars, improving user experience.

Next Steps: You can display taxonomy terms in Elementor using dynamic tags, and even create archive templates for each taxonomy term using the Theme Builder.

Final Thoughts

Custom Post Types give your website structure, scalability, and dynamic flexibility. Whether you’re building a recipe site, portfolio, or directory, CPTs allow you to handle large datasets professionally. With Elementor Pro and ACF, creating and managing CPTs becomes seamless and code-free.

Take time to map your content types, and let Elementor do the heavy lifting for layout and display. As your site scales, these tools will prove invaluable.

FAQs About Custom Post Types in Elementor