Custom Fields in Uncode

WordPress Custom Fields

Custom Fields are one of the primary features to unlocking WordPress's power. So if you want to build custom, dynamic WordPress sites, it's essential to understand how custom fields work. Custom Fields let you store additional information about your blog posts, pages, portfolio, or even custom post types. In a nutshell, Custom Fields make it possible to use WordPress as a powerful content management system.

With Uncode, you can take the information from your textual Custom Fields and dynamically include it in your designs, Page Builder templates, and even create advanced filtering systems.

Starting from Uncode version 2.9.4, Custom Fields have been significantly enhanced with new display options, icon support, and powerful Ajax filtering capabilities.

To better understand what Custom Fields are for, let's take into consideration some scenarios:

Car Rental: use Custom Fields to display vehicle specifications like price, engine type, speed, and passenger capacity with filtering capabilities.
Real Estate: use Custom Fields to display property information such as location, price, property type, bedrooms, square footage, with advanced filtering options.
Event: use Custom Fields to display lists of participating artists, dates, and must-see performances, etc.
Ecommerce: use Custom Fields to display additional metadata associated with your products.
Restaurant: use to create a menu with fields as the dish's price, any relevant dietary concerns, calories, etc.

Demo examples

Please find below new demo pages showcasing Custom Fields capabilities. These examples demonstrate how the enhanced Custom Fields system can create powerful, professional listing websites with advanced filtering capabilities that rival dedicated listing platforms.

Creating Custom Fields

To create Custom Fields in Uncode, please follow these steps:

Navigate to the Theme Options → Post (Page, Portfolio or Product);
Create a new Custom Field with a unique title and ID;
Associate a media from your Media Library (generally an SVG icon) to your Custom Field using the Custom Field Icon option;
Save your Custom Fields configuration, screenshot.

Important notes for Custom Fields

Reserved Slugs: Custom Fields cannot use the same slugs as Posts Module elements. Avoid using slugs like 'price', 'type', 'title', 'button', 'icon', 'text', 'category', etc, screenshot.
Prefixes and Suffixes: It's possible to add prefixes or suffixes to Custom Field values using the uncode_custom_field_value hook, useful for adding units of measurement or common text to all fields (for example $, km/h, etc.). This is also useful if you need to have a real numeric value.

Adding values to Custom Fields

Once you've created your Custom Fields, you can add values to individual posts:

Navigate to a single Post (Page, Portfolio, Post or Product).
Insert values for your Custom Fields in the Page Options section, screenshot.
You can insert multiple values for a Custom Field by separating them with a pipe character, for example: "red|yellow|blue".
Save your post.

Displaying Custom Fields in the Posts Module thumbnails

The Posts Module offers several ways to display Custom Fields in your post thumbnails and listings.

Custom Fields Group element

From Uncode 2.9.4, a new Custom Fields Group element has been added to the Posts Module Elements list, allowing you to display multiple Custom Fields together with advanced layout options.

The Custom Fields Group element offers these options:

Elements to display: Value, Label and value, Icon and value, Icon, label and value;
Custom Fields: Type 'All' to show all Custom Fields, or add semicolon separated values (ex: 'custom-field-1;custom-field-2') to show specific fields. Default is 'All', screenshot ;
Layout mode: Choose between Grid or Flex;
Alignment for Flex: Left, Center, Right, or Justify alignment options;
Breakpoint: Number of columns for each breakpoint (ex: '4,2,1'). Works only when layout is set to 'Grid'.

Single Custom Field with custom classes

Individual Custom Fields elements have been enhanced in version 2.9.4. Now include a new Custom Class option, allowing you to apply Uncode classes or custom CSS classes for improved styling and layout customization.

Examples of useful custom classes:

Typography styling: 'h2 font-weight-700 text-accent-color' applies h2 size, font weight 700, and accent color.
Display Inline: Use classes like 'desktop-display-inline-block desktop-float-right desktop-no-margin' to position Custom Fields inline with post titles (perfect for displaying prices next to titles), screenshot ;
Responsive classes: 'display-inline-block float-right no-margin' for mobile-responsive inline layouts.

Displaying Custom Fields in pages with the Custom Fields module

The Custom Fields module in the Page Builder allows you to display Custom Field information within individual pages and posts. This is pretty when used in combination with the Content Block to create Custom Dynamic Layouts. Starting from version 2.9.4, this module has been significantly enhanced with new layout and styling options.

The Custom Fields module

To use the Custom Fields module:

Insert the Custom Fields module within your Content Block (or Page);
Configure the module options in the General tab, screenshot .

General options:

Custom Fields: Now includes an 'All' option to display all Custom Fields.
Manual Values: Add semicolon-separated values (ex: 'custom-field-1;custom-field-2') to manually select specific Custom Fields. Works only when 'Custom Fields' is set to 'All'.
Elements: New layout combinations including all variations of Icon, Label, and Value display.
Columns: Specify the number of columns for each breakpoint (ex: '4,2,1'). Default is one column. Works only when 'Custom Fields' is set to 'All' and 'Elements' is not set to legacy values.
Rounded Icon: Activate to add a rounded background to Custom Field icons.

Legacy mode and typography

When the module is set to Legacy modes (Label Legacy and Value Legacy), a new Typography tab becomes available with heading-style options for styling your textual Custom Fields.

Custom Fields display modes

The Custom Fields module can be configured with various methods:

All Fields: Display all Custom Fields with the new column and icon options.
Single Field: Display a specific Custom Field with full typography control.
Manual Selection: Choose specific Custom Fields to display using semicolon separated values.

Filtering by Custom Fields (Ajax Filters integration)

From Uncode version 2.9.4, one of the most requested features has been implemented - the ability to filter posts, portfolios, and pages by Custom Fields values. This powerful feature extends Uncode's existing Ajax Filters system to work seamlessly with Custom Fields, allowing you to create complex filtering systems for your listing pages, portfolios, blogs, and even your shop. For example, for a portfolio you could create filters for additional parameters such as Technical Skills, Project Role, Location, Format, Industry, or Aesthetic style, screenshot .

Setting an Ajax Filter for Custom Fields

For comprehensive information about setting up and configuring Ajax Filters, including advanced layouts, styling options, and integration methods, please refer to the dedicated Ajax Filters documentation.

The Ajax Filters system supports filtering by Custom Fields alongside traditional taxonomies, creating powerful listing websites with multiple filtering criteria - perfect for real estate, car rentals, job listings, and any other scenario requiring detailed filtering capabilities..

Button-Triggered Ajax Filters

From Uncode 2.9.4 Ajax Filters can now be triggered via Button instead of automatic activation. Normally, Ajax Filters activate with each user interaction - for example, when selecting a dropdown option, the Posts module is immediately filtered and unavailable filter combinations disappear.

To enable button-triggered filtering:

Add a Button module to your page;
In the Button module settings, navigate to the Dynamic option;
Select "Ajax Filters" from the Dynamic options, screenshot .

When this option is enabled, filters will not activate automatically with each user interaction, but only when the button is clicked. This provides an alternative filtering mode depending on your specific use case requirements.

Pagination-Load More Hidden option

From Uncode 2.9.4 a new "Pagination-Load More Hidden" option has been added to the Posts module. Enable this option to hide the Pagination and Load More elements after activating them. While this may seem counterintuitive, it's particularly useful with Ajax Filters to hide these elements before filtering, creating a clean and minimal layout, screenshot .

This allows you to:

Create a reduced, minimal list for initial display;
Filter across the entire collection when Ajax Filters are applied;
Show all results loaded via Ajax, including content beyond the initial page limit.

This feature enables you to present a streamlined interface initially while providing access to comprehensive filtering results when needed.

Demo Contents notes

When importing Demo Contents for the Custom Fields demos, please note these differences from the live demo sites. These modifications streamline and speed up the import process.

During Demo Contents import, only two listing pages are imported for each demo (Classic Car Rental and Creative Real Estate). This is sufficient to understand how filters work and avoids importing approximately 40 additional similar pages with little learning value.

Custom Fields have also been reduced to provide meaningful representation without importing excessive fields that would have limited demo value.

For technical reasons, the Posts modules in demo pages use Build Query set to Selective Elements. For real listing sites, we recommend using Categories or Taxonomies instead, screenshot .