Complete Guide on ACF Relationship Field

Are you looking for an easy way to create and maintain relationships between content types on your WordPress website? Advanced Custom Fields (ACF) provides a powerful relationship field that can help you do just that.

The ACF Relationship Field allows users to easily connect different WordPress content entities, giving them improved control over how the data is displayed and organized. With this feature, creating custom queries for more advanced dynamic displays is possible.

In this tutorial, we’ll discuss the benefits of using an ACF Relationship Field and provide step-by-step instructions for setting one up on your site. We’ll also include some examples of how you can use an ACF Relationship Field effectively in order to get the most out of it. So if you’re looking for a better way to manage relationships between content types on your WordPress site, keep reading!

What is ACF(Advanced Custom Fields)

Advanced Custom Fields (ACF) is a powerful WordPress plugin that allows users to create custom fields for their content easily. It enables users to create fields for content types such as posts, pages, and even custom post types.

Additionally, ACF provides a variety of field types that can be used to display and organize content in different ways. One of these field types is the Relationship field, which is especially useful for creating relationships between different pieces of content.

What is the ACF Relationship Field

An ACF relationship field is essentially a way of connecting two different Post Types together. You can use them when you need to reference or pull data from one Post Type within another related Post Type. For example, if you have two Custom Post Types – “Books” and “Book Author.” With an ACF Relationship Field, you can quickly connect a Book to its respective Author. It allows you to filter your results using a search bar and via post types and taxonomies.

Use Case for the Relationship Field

Let’s assume that we are building a website that lists books. and For that, we are using ACF. So here we need to create two custom post types: “Book” and “Book Author.” Now for the “Book” post type, we create custom fields such as “published date”, “publisher”, “price”, and an ACF Relationship Field type called “Related book author”. Here in this screenshot you can check all the custom fields we created for Book Post type.

ACF Relationship Field Example with Book and Author
ACF Relationship Field Example with Book and Author

The book details page will display the book’s information and the related Book Author information. This information will be based on the relationship field.

Next, The “Book Author” post type will contain information such as the author’s name, image, and details, which will be connected to the books through the “Related book author” field.

In addition, we will establish a reverse relationship between the Book Author and the Books they have written. We will discuss this ACF- reverse relationship feature in detail later in this article.

How to set up a Relationship Field

To set up a relationship field, You need to follow a few steps:

Step 1: Install and Activate the ACF Plugin

First of all, The ACF plugin is necessary for setting up a relationship field on your WordPress site.

Step 2: Create a new Field Group

To create a new field group on your website, Please navigate to ACF -> Field Groups in the WordPress dashboard and click the “Add Field” button.

Step 3: Add a New Field and Publish Field Group

Within the field group, click the “Add Field” button and select “Relationship” from the field type options. Assign a label, such as “Related Book Author,” and set the field name.

After configuring the field group, click the “Save Changes” button to save the changes.

Step 4: Use the Relationship Field

You can use the relationship field when creating or editing posts. The field options will display a list of post types from which you can select one or more related posts.

Step 5: Display the Relationship Field

To display related posts on the front end, you must create a custom template and utilize the ACF function to call the related post’s data and exhibit it in the template. If you do not want to use code and want an easy solution to display posts on the front end, you can use our Anywhere Elementor Pro Plugin.

Here, you can check the complete guide about ACF Relationships & Reverse Relationships.

So far we have seen how to create and display Relationship fields. Now, we will check the necessary settings of the ACF Relationship field.

ACF Relationship Field Settings

You need to configure a few settings while setting up an ACF Relationship field. Below, we will go through with few key settings:

General Settings

  • Post Types: One can define the allowed post types for selection in the relationship field. For instance, if you intend to establish a link between Books and their Authors, you can select two post types: “Book” and “Book Author.”
  • Taxonomy: It is possible to filter the results based on one or multiple taxonomies.
  • Filters: Various filtering options can be specified for the relationship field, such as “search,” “post type,” and “Taxonomy.”
  • Return format: The format for the returned selected posts can be specified, such as ID (integer) or object.
ACF Relationship field: General Settings
ACF Relationship field: General Settings

Validation Settings

  • Maximum posts: You have the option to set a maximum limit for the number of items that can be selected in the relationship field.
  • Minimum posts: This sets a minimum limit on the number of posts that are required to be selected.
ACF Relationship Field: Validation Settings
ACF Relationship Field: Validation Settings

Presentation Settings

  • Elements: Indicate which elements should appear in the search results
  • Instruction: These instructions are for authors when they submit data.
  • Wrapper Attributes: Use this option to expand the width and add CSS classes and IDs.
ACF Relationship field: Presentation Settings
ACF Relationship field: Presentation Settings

How to Display Relationship Data on Frontend

Display Post List (with setup_postdata)

The “setup_postdata()” function is utilized for presenting data. It sets up the global post data for this purpose. To iterate through a Post Object value that has multiple values and utilizes Post Object as the Return Format, the following example is a demonstration.

$authors = get_field('related_book_author');
if( $authors ): ?>
    <ul>
    <?php foreach( $authors as $author): // variable must be called $post (IMPORTANT) ?>
        <?php setup_postdata($author); ?>
        <li>
            <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
        </li>
    <?php endforeach; ?>
    </ul>
    <?php wp_reset_postdata(); // IMPORTANT - reset the $post object so the rest of the page works correctly ?>
<?php endif;?>

Display Posts List (without setup_postdata)

To achieve this, we use the “get_field()” function to fetch the related data and display it on the webpage through PHP. As the global post variable remains constant, all functions pertaining to “post” need an additional parameter to indicate the particular object.

<?php
$authors = get_field('related_book_author');
if( $authors ): ?>
    <ul>
    <?php foreach( $authors as $author ): 
        $permalink = get_permalink( $author->ID );
        $title = get_the_title( $author->ID );
        $custom_field = get_field( 'field_name', $author->ID );
        ?>
        <li>
            <a href="<?php echo esc_url( $permalink ); ?>"><?php echo esc_html( $title ); ?></a>
            <span>A custom field from this post: <?php echo esc_html( $custom_field ); ?></span>
        </li>
    <?php endforeach; ?>
    </ul>
<?php endif; ?>

What is a Reverse Query (Bi-Directional Relationship using ACF Relationship Field)

The ACF plugin enables the establishment of a Bi-directional relationship (B<– A) between two custom post types, thereby linking each post type to the other in both directions. Consequently, when a post is created in one custom post type, it is automatically associated with the corresponding post in the other custom post type and vice versa.

Use Case for Reverse Relationship Field

Here, we will take the same example of Books and the author to explain the reverse relationship. Using “Books” and “Book Author,” you can establish a reverse relationship that automatically links a book post to its author(s) and an author post to all the books they have written.

This means that when you create a book post, it will be linked to the corresponding author(s), and when you create an author post, it will be linked to all the books they have written.

Code Example for Reverse Query

<?php
$authors = get_posts(array(
	'post_type' => 'book', //Post Type
	'meta_query' => array(
		array(
			'key' => 'related_book_author', // name of custom field (relationship)
			'value' => '"' . get_the_ID() . '"', // matches exaclty "123", not just 123. This prevents a match for "1234"
			'compare' => 'LIKE'
		)
	)
));

?>
<?php if( $author ): ?>
	<table>
	<?php foreach( $author as $authors ):?>
		<tr>
			<td>
				<a href="<?php echo get_permalink( $author->ID ); ?>">
					<?php echo get_the_title( $author->ID ); ?>
				</a>
			</td>
		</tr>
	<?php endforeach; ?>
	</table>
<?php endif; ?>

In the preceding code example, we learned about the relationship between a book and its author.

Conclusion

We’ve got your back! If you’ve been scratching your head about the ACF relationship field and the mysterious ACF reverse relationship, fret no more. Not only have we provided an easy-to-understand explanation in this article, but we’ve also got a no-code solution that’ll make your life a whole lot easier. Enter Anywhere Elementor – the ultimate tool for seamless ACF integration. Say goodbye to tedious coding and hello to a smooth relationship between your post types. Want to learn more? Head on over to our in-depth article on ACF relationships and reverse relationships.

Leave a Reply

Your email address will not be published. Required fields are marked *