Use CPT UI and ACF in WordPress for a Dynamic Website

Building a powerful, fully dynamic WordPress website doesn’t need to be complicated. With CPT UI, Advanced Custom Fields (ACF), and Elementor/Elementor Pro, you can create a flexible and scalable system for managing custom content—without coding.

In this comprehensive, step-by-step guide, you’ll learn exactly how to combine CPT UI and ACF with Elementor to build a complete dynamic website that is easy to update, visually stunning, and optimized for performance. This tutorial is ideal for beginners and professionals who want a clean workflow and future-proof structure.

Let’s get started.

Introduction to CPT UI and ACF

Before we jump into the tutorial, let’s briefly understand the two essential components we will be using.

CPT UI (Custom Post Type UI)

CPT UI allows you to create custom post types and taxonomies in WordPress without touching any code. It creates the structure for storing your custom content—for example:

Portfolio
Services
Team Members
Testimonials
Events
Products (non-WooCommerce)

CPT UI does not create fields. It only controls the post type system.

Image Source: https://wordpress.org/plugins/custom-post-type-ui/

Advanced Custom Fields (ACF)

ACF allows you to create custom fields for the custom post types you create with CPT UI. These fields let you store structured data, such as:

Text (e.g., job titles, subheadings)
Images (e.g., featured photo)
Repeaters (e.g., gallery)
Relationship fields
URLs (e.g., social media links)
WYSIWYG content

Image Source: https://wordpress.org/plugins/advanced-custom-fields/

Why use CPT UI and ACF in WordPress + Elementor?

This trio forms a complete dynamic website builder:

COMPONENT	PURPOSE
CPT UI	Creates post types and taxonomies
ACF	Creates fields for structured content
Elementor Pro	Displays dynamic content visually

Together, they allow you to build:

Dynamic listing pages
Dynamic single templates
Automatic archive pages
Filterable portfolio
Fully editable, no-code dynamic website

Step 1: Install the Required Tools

To follow this guide, you need:

Elementor (free)
Elementor Pro (required for dynamic content)
CPT UI
ACF (free or ACF Pro)

Install and activate these plugins.

Step 2: Create a Custom Post Type with CPT UI

1. Go to CPT UI → Add/Edit Post Types

Here, you will define your custom post type. For example, let’s create “Portfolio”.

2. Required Settings

Fill in:

Post Type Slug: portfolio
Plural Label: Portfolio
Singular Label: Portfolio Item

3. Additional Settings to Enable

Make sure the following are enabled:

Has Archive → YES
Supports → Title, Editor, Thumbnail
Show in REST API → YES (important for Elementor)

4. Save Post Type

Your new post type Portfolio now appears in the WordPress dashboard.

Step 3: Create Custom Fields with ACF

Now that the post type exists, we’ll add fields that store the custom data.

1. Go to ACF → Add New Field Group

Name the field group something meaningful like:

Portfolio Details

2. Add Fields

You might add:

Project Subtitle (Text)
Project Description (WYSIWYG)
Client Name (Text)
Completion Date (Date Picker)
Project URL (URL)
Project Images (Gallery) — requires ACF Pro

3. Field Group Location Rules

Set:

Show this field group if Post Type is equal to Portfolio

4. Publish

Now your custom post type has custom fields.

Step 4: Add Portfolio Items

Go to Portfolio → Add New.

You will now see:

Title (WordPress default)
Content (optional)
Featured image
Your ACF fields

Fill in everything and hit publish.

Repeat this to create several portfolio items.

Step 5: Create a Dynamic Single Template with Elementor Pro

1. Go to Templates → Theme Builder → Single Post

Click Add New → Single → Portfolio

Choose “Portfolio” as the post type to apply the template.

2. Build Your Layout

Add widgets such as:

Heading
Text Editor
Image
Gallery
Icon List
Buttons

3. Make Them Dynamic

Click any widget → Click the Dynamic Tags icon.

Examples:

Heading → Post Title
Text Editor → ACF Field → Project Description
Image → Featured Image
Text → ACF Field → Client Name
Gallery → ACF Gallery

4. Add Additional Style

Use Elementor styling to design the page.

5. Set Display Conditions

Display Conditions → Include → Portfolio → All

Step 6: Create a Dynamic Archive Template (Portfolio Listing)

1. Go to Theme Builder → Archive → Add New

Create a template for the Portfolio Archive.

2. Choose Widgets

Use:

Archive Title
Archive Description
Posts or Custom Loop Grid (Elementor Pro)
Pagination

3. Make the Loop Dynamic

In Posts widget:

Set Source → Portfolio
Select your layout (grid, masonry)
Enable featured image
Show post title
Add meta if needed

4. Set the Display Condition

Include → Portfolio Archive

Step 7: Build Dynamic Listing Pages with Loop Builder (Optional but Powerful)

1. Go to Templates → Loop Items

Create a dynamic loop template.

Use:

Image widget → Dynamic (Featured Image)
Heading widget → Dynamic (Post Title)
Text widget → ACF Field (Project Subtitle)
Button → Link to Post URL

2. Save and Use in Archive Template

Insert Loop Grid widget → Choose your loop template.

Now your portfolio listing looks fully custom.

Step 8: Create Category or Filter Pages Using Custom Taxonomies (Optional)

1. In CPT UI → Add Taxonomy

Example:

Slug: portfolio-category
Post Types → Portfolio
Show in REST API: YES

Now your portfolio items can have categories.

2. Add These to Elementor Templates

Use Dynamic Tags → Terms to display categories on single pages.

Step 9: Connect Everything with Menus and Navigation

1. Go to Appearance → Menus

Add:

Portfolio Archive page (automatically created)
Custom links
Categories (optional)

2. Use Elementor Nav Menu Widget

Design menus visually.

Step 10: Make Everything Fully Dynamic & Future-Proof

One of the biggest advantages of this method is:

✔ No need to redesign pages when content updates
✔ Clients can update content easily
✔ Templates ensure consistent design
✔ ACF keeps data structured
✔ Elementor displays everything visually

Extra Tips for Best Practices

1. Keep Field Group Names Clean

Use descriptive names like:

project_subtitle
client_name
project_gallery

2. Use Global Widgets for Reuse

For sections like:

Call-to-action
Footer banners
Social icons

3. Use Elementor Flexbox Containers

This gives better speed and cleaner code.

4. Leverage Conditional Visibility

Show/hide fields based on conditions using Elementor Pro.

5. Use ACF Repeater for Advanced Layouts

Great for:

FAQs
Team members inside a service
Multi-step process sections

Complete Workflow Summary

Here’s the simplified version of the entire process:

Create post type with CPT UI
Create custom fields with ACF
Add content to custom posts
Create single template in Elementor
Create archive template in Elementor
Optional: Create loop templates
Optional: Add taxonomies
Connect menus and pages
Style everything with Elementor Pro

Conclusion

Building a complete dynamic website with CPT UI, ACF, Elementor, and Elementor Pro is one of the most efficient and scalable workflows available in WordPress today. By separating content structure (CPT UI), content data (ACF), and frontend design (Elementor), you get a flexible system that can grow with your project and remain extremely easy to update.

Whether you’re building a portfolio, services website, real estate directory, events system, or any other custom content structure, this method gives you total control, unlimited design flexibility, and complete dynamic automation—without touching code.

Subscribe to Updates

What's Hot