← BACK TO BLOG

Advanced Customizations with Conditional Logic in ACF and Shortcodes
Home
•
Advanced Customizations with Conditional Logic in ACF and Shortcodes

Customizing WordPress sites with Advanced Custom Fields (ACF) allows developers to create dynamic, feature-rich websites. One of ACF’s most powerful features is conditional logic, which enables fields to display based on user-defined criteria. When paired with shortcodes, conditional logic offers even greater flexibility for delivering tailored content to users.

Implementing advanced customizations with conditional logic in ACF and shortcodes for dynamic WordPress content management.

This guide explores how to use conditional logic in ACF with shortcodes to build advanced customizations, ensuring your WordPress site remains efficient and user-friendly.

Why Use Conditional Logic in ACF?

Conditional logic adds intelligence to your custom fields by controlling when specific fields are shown or hidden based on other inputs. This feature is crucial for creating streamlined admin interfaces and enhancing frontend functionality.

Benefits of Conditional Logic

  • Improved Usability: Reduce admin panel clutter by showing only relevant fields.
  • Dynamic Content: Deliver tailored content based on user inputs or field values.
  • Enhanced Efficiency: Automate content display with minimal manual intervention.

Learn more about ACF’s conditional logic in the official documentation.

Setting Up Conditional Logic in ACF

Step 1: Create a Custom Field Group

  1. Navigate to Custom Fields in your WordPress dashboard.
  2. Click Add New to create a field group.
  3. Add multiple fields, such as text, checkboxes, or dropdowns.

Example Fields for a Product Page:

  • On Sale (Checkbox)
  • Sale Price (Text Field)
  • Original Price (Text Field)

Step 2: Add Conditional Logic

  1. Edit the Sale Price field.
  2. Under the Conditional Logic tab, set the field to display only when the On Sale checkbox is checked.
  3. Save your changes and publish the field group.

This setup ensures that the Sale Price field appears only when the On Sale option is selected.

Displaying Conditional Fields with Shortcodes

Shortcodes allow developers to dynamically display conditional fields on posts, pages, or widgets without editing theme files.

Step 1: Create a Custom Shortcode

Add the following code to your theme’s functions.php file or a custom plugin:

Basic Shortcode for Conditional Fields:

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

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

Step 2: Use the Shortcode

In your WordPress editor, use the shortcode to display a conditional field:

[acf_conditional_field field="sale_price" default="Not on sale"]

This will display the Sale Price field if it has a value, or show the default message otherwise.

Advanced Conditional Logic Techniques

Combining Multiple Conditions

ACF supports multiple conditional rules for more complex logic.

Example Use Case: Display a “Free Shipping” field only if:

  • The On Sale checkbox is checked.
  • The product price is above $50.

Set up these rules in the ACF field editor under Conditional Logic.

Nesting Conditional Fields

Nested conditional fields allow for hierarchical logic.

Example:

  1. If On Sale is checked, show the Sale Price field.
  2. If Sale Price is entered, show the Discount Percentage field.

This creates a logical flow for both the admin and frontend.

Displaying Conditional Logic in Templates

Using PHP in Theme Files

To display conditional fields in your theme templates, use ACF’s get_field() function with logic.

Example Code:

<?php 
$on_sale = get_field('on_sale');
$sale_price = get_field('sale_price');

if ($on_sale) {
    echo '<p>Sale Price: $' . esc_html($sale_price) . '</p>';
} else {
    echo '<p>Product is not on sale.</p>';
}
?>

Using Shortcodes in Widgets

Shortcodes can also be used in text widgets or custom block editors to display conditional fields dynamically.

Example Usage:

[acf_conditional_field field="sale_price" default="No sale information available"]

Optimizing Performance with Conditional Logic

Lazy Loading Conditional Fields

For content-heavy sites, lazy loading ensures conditional fields are only loaded when necessary.

Example Code for Lazy Loading:

function lazy_load_conditional_field($atts) {
    $atts = shortcode_atts(
        array(
            'field' => '',
            'post_id' => get_the_ID(),
            'placeholder' => 'Loading...',
        ),
        $atts
    );

    return '<div class="lazy-field" data-field="' . esc_attr($atts['field']) . '" data-post-id="' . esc_attr($atts['post_id']) . '">' . esc_html($atts['placeholder']) . '</div>';
}
add_shortcode('lazy_conditional_field', 'lazy_load_conditional_field');

Pair this with JavaScript to load field data asynchronously, improving page load speed.

Cache Field Data

To minimize database queries, use the WordPress Transients API to cache conditional fields.

Example Code for Caching:

function cached_conditional_field($atts) {
    $atts = shortcode_atts(
        array(
            'field' => '',
            'post_id' => get_the_ID(),
        ),
        $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, 12 * HOUR_IN_SECONDS);
    }

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

Real-World Applications

E-Commerce Sites

  • Use Case: Display discount offers only for products on sale.
  • Implementation: Use conditional logic to show sale fields and shortcodes to display them dynamically.

Membership Platforms

  • Use Case: Show premium features to logged-in users only.
  • Implementation: Combine ACF conditional logic with WordPress user roles.

Portfolio Websites

  • Use Case: Highlight awards or certifications only for selected projects.
  • Implementation: Add conditional fields for accolades, displayed using shortcodes.

Best Practices for Using Conditional Logic and Shortcodes

Plan Your Fields

Before creating conditional fields, plan the logic to avoid unnecessary complexity.

Test Logic Thoroughly

Ensure conditional fields behave as expected in all scenarios, both in the admin and on the frontend.

Regularly Update Plugins

Keep ACF and WordPress updated to maintain compatibility and security.

Conclusion

Combining ACF’s conditional logic with shortcodes unlocks advanced customization capabilities for WordPress sites. From dynamic product pages to user-tailored content, this approach ensures your website is both functional and efficient.

For more insights, explore the ACF documentation and the WordPress developer guides. Start implementing conditional logic and shortcodes today to create dynamic, user-friendly websites!