Repeater and Relationship

Repeater and Relationships

ACF Repeater fields are essential in our development workflow because they allow editors to add multiple items dynamically. These items are then displayed on the frontend, enabling flexible and reusable components like cards, lists, or sliders.

---

Basic Example with Repeater

This is an example of using a repeater from the editor’s view:

Here’s a simple example showing how to use a repeater field in a module:

<?php
$title = $module['title'];
$subtitle = $module['subtitle'];
$cards = $module['cards'];
?>

<section>
    <h2><?= esc_html($title); ?></h2>
    <p><?= esc_html($subtitle); ?></p>

    <div>
        <?php foreach($cards as $key => $card): ?>
            <?php
            $card_image = $card['image'];
            $card_text = $card['text'];
            include(locate_template('components/cards/card-a.php', false, false));
            ?>
        <?php endforeach; ?>
    </div>
</section>

Explanation

• $module['cards'] contains all repeater items added by the editor.
• Each $card can have multiple subfields like image and text.
• Using include(locate_template(...)) allows us to reuse card templates while keeping the markup consistent and maintainable.
• This pattern is highly flexible and can be applied to any repeatable content structure.

---

Relationship Fields

ACF Relationship fields work similarly to repeaters but link to existing WordPress posts. This allows editors to select one or more posts, which can then be displayed dynamically on the frontend.

<?php
$title = $module['title'];
$related_posts = $module['related_posts'];
?>

<section>
    <h2><?= esc_html($title); ?></h2>

    <div>
        <?php foreach($related_posts as $key => $post): ?>
            <?php
            $post_id = is_object($post) ? $post->ID : $post;

            $post_title = get_the_title($post_id);
            $post_link = get_permalink($post_id);
            $post_image = get_post_thumbnail_id(get_the_ID());
            $custom_field = get_field('custom_field', $post->ID); // example ACF field on the post
            include(locate_template('components/cards/card-a.php', false, false));
            ?>
        <?php endforeach; ?>
    </div>
</section>

Explanation

• $module['related_posts'] contains the selected posts from the Relationship field.
• Each $post can access native WordPress data: title, permalink, featured image.
• You can also retrieve ACF fields attached to the post.
• Using include(locate_template(...)) ensures consistent rendering with other components.

---

Summary

• Repeater fields: dynamic subfields added by editors within a module.
• Relationship fields: link to existing posts, allowing access to both WordPress native data and ACF fields.
• Both patterns use loops and template includes to maintain consistent, reusable frontend code.