We are thrilled to introduce the step one implementation of Advanced Custom Fields (ACF) integration in Uncode. This update marks a significant milestone, turning Uncode into a dynamic engine capable of handling complex, data-driven layouts with ease.

Please find below a simple example page from our demo site:

• ACF Integration in Uncode

Advanced Custom Fields (ACF) is the industry-standard plugin for adding custom data fields to your WordPress content, moving far beyond the simple titles and text bodies provided by default. By integrating ACF with Uncode, you can define and organize specific data points, such as prices, dates, technical specifications, and turn your backend into a clean, structured repository for information. This enables the creation of professional-grade Real Estate listings, Event directories, Review sites, etc, where the design remains consistent and high-end while the content remains dynamic and easy to manage.

Uncode implementation

Our native integration allows you to connect ACF fields directly to Uncode’s core modules. Instead of simply printing "labels and values" (as seen in the standard WP Bakery ACF module), Uncode empowers you to use custom data as functional parts of your design.

You can dynamically populate several modules and features:

• Heading: Map ACF text fields directly to your Headings. This is perfect for displaying dynamic titles, subtitles, or specific data points like prices and locations that need prominent visibility;
• Text Block: Connect your custom text or textarea fields to the Text Block module. This allows you to display longer descriptions or technical;
• Button: Use ACF to define custom URLs or button labels. This enables you to create dynamic call-to-action buttons that lead to external resources or specific pages defined in your custom fields;
• Single Media: Dynamically fetch images stored in your ACF fields;
• Rows and Columns Backgrounds: Take design automation to the next level by using ACF Image fields to set the background of your Rows or Columns. This allows each page or post to have a unique visual atmosphere driven by its own custom data;
• Posts Module: Take your listings to the next level by displaying ACF data directly within thumbnails. You can map custom fields to appear both as overlaying text or as dynamic images, creating highly informative and specialized grids;
• Ajax Filters: Create high-end search experiences by using ACF fields as values for Ajax Filters. This lets users sort and filter your content by your own custom criteria, such as price range, property type, or event date, without refreshing the page.

Note: This integration works alongside the standard WP Bakery "Advanced Custom Field" module, but provides much deeper visual and functional integration with the Uncode Page Builder ecosystem.

Dynamic templates with Content Blocks

The power of ACF integration is fully realized when used within Content Blocks. While you can use ACF data on individual Pages, Posts, or Portfolio items, incorporating it into a Content Block allows you to create completely dynamic templates. By designing a single layout and assigning it as a global template for a Custom Post Type, Uncode will automatically pull the relevant ACF data for every item, ensuring a seamless and automated workflow for complex projects.

How to Use ACF with Uncode

Creating a dynamic website with Uncode and Advanced Custom Fields is a straightforward process. This tutorial will guide you through setting up your first custom fields and connecting them to your layout modules and the Posts module.

1. Create your Field Group

First, we need to define which data we want to manage. Navigate to ACF → Field Groups and click Add New, screenshot :

• Group Title: Give your group a descriptive name, for example, "Content Values", screenshot.
• Add Fields: Create your custom fields by defining the Field Type (Text, Image, etc.), Field Label, and Field Name. We created fields like "Posts Badge", "Posts Image", and "Posts Values", screenshot ;
• Location: Set the rules to show this group on specific Post Types (e.g., Pages, Posts...), screenshot .

2. Populate the content

Go to the page or post you want to enrich with dynamic content. You should now see the "Content Values" box. If it’s not visible, check the Screen Options menu in the top right corner of your WordPress editor and ensure the group is enabled. Fill in your fields with the specific information for that page, screenshot .

3. Connect modules

Now, open the Uncode Page Builder to link your modules to the ACF data:

• Heading & Text: In the module settings, look for the Dynamic Heading/Text option and select "Get ACF Field". Choose your Group and the specific Field you wish to display, screenshot ;
• Single Media: Enable Dynamic Media, select "Get ACF Field" as the source, and map it to your ACF Image field, screenshot ;
• Buttons & Backgrounds: Follow a similar process in the respective settings to pull URLs or images directly from your custom fields, screenshot ;

ACF in the Posts Module

The Posts module now allows you to display ACF labels and values directly within your thumbnails. This is a game-changer for listing sites, in this example the badge, the list with technical specifications and the logo image were added with ACF, screenshot ;

• Setup: In the Posts module settings, ensure you have selected the correct Post Type. You will see your available Custom Fields (e.g., Posts Badge, Posts Image, etc.), screenshot ;
• Configuration: For each field, you can choose to show the Label, the Value, or both. You can also decide whether to place them in a relative position (within the content) or in an absolute position (overlaying the image).

Please note that we have chosen a "minimalist" approach to the output. Since every designer has different needs, we provide clean HTML without heavy default styling. Each element is easily targetable via CSS because it includes the Group Name and Field Name in its class, screenshot ;

With just a few lines of simple CSS, you can transform these fields into anything you need, from colorful badges and organized lists to large headings, giving you total creative control over your grid's appearance.

By following these steps, you can transform a static Uncode site into a powerful, dynamic platform where the design is automated and the content is always easy to update.