Shortcode for displaying ACF Relationship field posts inside Astra’s Site Builder (or any theme). Add this code to your child theme’s functions.php or a custom plugin, then use: [acf_relations cpt="movies" field="related_movies"] It will automatically pull related posts from the ACF Relationship field, showing the title, featured image, and link…

acf-relations-shortcode.php

<?php
/**
 * ACF Relationship Shortcode for Astra (and any theme)
 *
 * Description:
 * This shortcode dynamically displays posts linked via an ACF Relationship field.
 * It’s designed to work inside Astra’s Site Builder single templates or anywhere
 * shortcodes are supported.
 *
 * Usage:
 * [acf_relations cpt="movies" field="related_movies"]
 *
 * Parameters:
 * - cpt: (optional) Custom Post Type slug, for reference or filtering if needed.
 * - field: (required) The ACF Relationship field name.
 *
 * Example:
 * If you have a CPT named "movies" and a Relationship field named "related_movies",
 * just add this shortcode inside a Shortcode or Text block:
 *
 *   [acf_relations cpt="movies" field="related_movies"]
 *
 * The shortcode will automatically pull and display all related posts with title,
 * featured image, and link.
 */

function bsf_acf_relations_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'cpt'   => '',      // Optional: Custom Post Type name
            'field' => '',      // Required: ACF Relationship field name
        ),
        $atts,
        'acf_relations'
    );

    if (empty($atts['field'])) {
        return '<p><strong>ACF field name missing.</strong></p>';
    }

    global $post;
    if (!isset($post->ID)) {
        return '<p><strong>No post context found.</strong></p>';
    }

    // Get related posts from ACF field
    $related_posts = get_field($atts['field'], $post->ID);

    if (empty($related_posts)) {
        return '<p>No related items found.</p>';
    }

    $output = '<div class="acf-relations-list">';
    foreach ($related_posts as $related_post) {
        $permalink = get_permalink($related_post->ID);
        $title     = get_the_title($related_post->ID);
        $thumb     = get_the_post_thumbnail($related_post->ID, 'medium', array('class' => 'acf-rel-thumb'));

        $output .= '<div class="acf-rel-item">';
        if ($thumb) {
            $output .= '<a href="' . esc_url($permalink) . '">' . $thumb . '</a>';
        }
        $output .= '<h4><a href="' . esc_url($permalink) . '">' . esc_html($title) . '</a></h4>';
        $output .= '</div>';
    }
    $output .= '</div>';

    // Inline styling (remove or move to your CSS file if preferred)
    $output .= '<style>
        .acf-relations-list {
            display: grid;
            gap: 1em;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        }
        .acf-rel-item img {
            border-radius: 6px;
            width: 100%;
            height: auto;
        }
        .acf-rel-item h4 {
            margin-top: 8px;
            font-size: 16px;
        }
    </style>';

    return $output;
}
add_shortcode('acf_relations', 'bsf_acf_relations_shortcode');

This code adds a WordPress shortcode to display ACF Relationship field posts.
To use it, paste this entire code into your Astra child theme's functions.php file.

For detailed instructions on adding custom PHP code in Astra, see:
https://wpastra.com/docs/add-custom-php-code/

Usage example:
[acf_relations cpt="movies" field="related_movies"]