Display Custom Fields Easily with ACF and Shortcodes

Home
•
Display Custom Fields Easily with ACF and Shortcodes

WordPress offers incredible flexibility for customizing content, and custom fields play a key role in this process. Advanced Custom Fields (ACF) simplifies the creation and management of custom fields, while shortcodes provide an easy way to display custom field data anywhere on your site. This guide explores how to display custom fields using ACF and shortcodes, helping you create dynamic and user-friendly WordPress websites.

Simplifying the display of custom fields on a WordPress site using ACF and shortcodes for dynamic content management.

Why Use ACF and Shortcodes Together?

ACF and shortcodes work seamlessly to make custom field data accessible across various parts of your WordPress site, including posts, pages, widgets, and templates.

Benefits of Using ACF and Shortcodes

Dynamic Content: Display custom data dynamically without complex coding.
Flexibility: Insert custom field data in posts, pages, and widgets effortlessly.
Ease of Use: Non-technical users can use shortcodes to display custom fields without touching PHP templates.

Learn more about ACF’s capabilities in the official documentation.

Setting Up ACF

Install ACF

To start displaying custom fields with ACF, install and activate the plugin.

Go to Plugins > Add New in your WordPress dashboard.
Search for “Advanced Custom Fields.”
Click Install Now and then Activate.

Create a Custom Field Group

Navigate to Custom Fields in your WordPress dashboard.
Click Add New to create a new field group.
Add fields such as text, number, or image.
Assign the field group to a specific post type, such as Posts, Pages, or a custom post type.

Example Fields for a Blog Post:

Author Bio (Text Area)
Featured Quote (Text Field)
Reading Time (Number Field)

Once your custom field group is published, you can begin adding data to posts or pages.

Understanding WordPress Shortcodes

What Are Shortcodes?

Shortcodes are small snippets of text wrapped in square brackets, allowing you to execute predefined functionality. For example, [shortcode_name] could display dynamic content like a custom field value or a list of posts.

Why Use Shortcodes for ACF?

Shortcodes allow you to:

Display custom field data without editing template files.
Add custom field values dynamically in the WordPress editor.
Provide flexibility for non-developers to manage content.

Creating Shortcodes to Display ACF Fields

Step 1: Register the Shortcode

To create a shortcode for an ACF field, use the add_shortcode() function in your theme’s functions.php file or a custom plugin.

Example Code:

function display_acf_field($atts) {
    $atts = shortcode_atts(
        array(
            'field' => '',
            'post_id' => get_the_ID(),
        ),
        $atts
    );

    $field_value = get_field($atts['field'], $atts['post_id']);
    return $field_value ? esc_html($field_value) : '';
}
add_shortcode('acf_field', 'display_acf_field');

This code creates a shortcode [acf_field field="field_name"] to display the value of a custom field.

Step 2: Use the Shortcode

To display a custom field in a post or page:

Add the shortcode in the WordPress editor.
Replace field_name with the field key of your ACF field.

Example Usage:

[acf_field field="author_bio"]

This will display the value of the Author Bio custom field for the current post.

Enhancing Shortcodes for ACF

Add Conditional Logic

Enhance your shortcode to include conditional logic for better flexibility.

Example Code with Conditional Logic:

function display_acf_field_conditional($atts) {
    $atts = shortcode_atts(
        array(
            'field' => '',
            'post_id' => get_the_ID(),
            'default' => 'No data available.',
        ),
        $atts
    );

    $field_value = get_field($atts['field'], $atts['post_id']);
    return $field_value ? esc_html($field_value) : esc_html($atts['default']);
}
add_shortcode('acf_field_conditional', 'display_acf_field_conditional');

Now, you can use the shortcode with a default value:

[acf_field_conditional field="author_bio" default="Bio not available."]

Style Custom Field Output

You can wrap custom field output in HTML for better styling.

Example Code with HTML Wrapping:

function display_acf_field_with_html($atts) {
    $atts = shortcode_atts(
        array(
            'field' => '',
            'post_id' => get_the_ID(),
            'tag' => 'p',
        ),
        $atts
    );

    $field_value = get_field($atts['field'], $atts['post_id']);
    return $field_value ? '<' . esc_html($atts['tag']) . '>' . esc_html($field_value) . '</' . esc_html($atts['tag']) . '>' : '';
}
add_shortcode('acf_field_html', 'display_acf_field_with_html');

Use this shortcode to wrap field output in an HTML tag:

[acf_field_html field="featured_quote" tag="blockquote"]

Real-World Applications

Portfolio Websites

Use ACF and shortcodes to display dynamic project information, such as client names, project descriptions, and tools used.

Example Usage:

Client: [acf_field field="client_name"]  
Tools Used: [acf_field field="tools_used"]

E-Commerce Stores

Enhance product pages with custom fields like specifications, reviews, and warranty details.

Example Shortcode for Product Pages:

Specifications: [acf_field field="specifications"]  
Warranty: [acf_field field="warranty"]

Event Management

Create dynamic event pages with fields for event dates, venues, and ticket links.

Example Usage:

Event Date: [acf_field field="event_date"]  
Venue: [acf_field field="venue"]

Optimizing Shortcode Performance

Cache Custom Field Data

To improve performance, cache custom field values using the WordPress Transients API.

Example Code for Cached Shortcode:

function display_cached_acf_field($atts) {
    $atts = shortcode_atts(
        array(
            'field' => '',
            'post_id' => get_the_ID(),
            'cache_time' => 3600, // Cache for 1 hour
        ),
        $atts
    );

    $cache_key = 'acf_field_' . $atts['field'] . '_' . $atts['post_id'];
    $cached_value = get_transient($cache_key);

    if (!$cached_value) {
        $cached_value = get_field($atts['field'], $atts['post_id']);
        set_transient($cache_key, $cached_value, $atts['cache_time']);
    }

    return $cached_value ? esc_html($cached_value) : '';
}
add_shortcode('cached_acf_field', 'display_cached_acf_field');

Use the [cached_acf_field] shortcode to retrieve and cache custom fields.

Debugging Shortcode Issues

Enable Debugging

If shortcodes don’t work as expected, enable WordPress debug mode to identify errors in your code.

Open your wp-config.php file.
Add the following lines:

define('WP_DEBUG', true);
define('WP_DEBUG_LOG', true);

Review the debug log in the wp-content/debug.log file.

Test Shortcodes on a Default Theme

Switch to a default WordPress theme (like Twenty Twenty-Three) to rule out theme conflicts.

Conclusion

ACF and shortcodes provide an easy and flexible way to display custom field data dynamically in WordPress. By creating shortcodes tailored to your project needs, you can enhance user experience, simplify content management, and empower non-technical users to manage dynamic content effortlessly.

For additional insights and resources, visit the ACF documentation and the WordPress developer guide. Start using ACF and shortcodes today to build dynamic and user-friendly WordPress websites!