ACF Group field type provides a way to structure and organize fields inside a field group. It provides a more accessible UI screen which makes it easy for you to edit and organize data. Group Fields act like an organizational container that holds other subfields together.
Let’s take an example- say I want to create custom fields for my Hero section items like – image, heading, buttons, etc. So, to make the organization process easier, I made one ACF Group Field called “Hero Section,” where all these required custom fields are clubbed together. So if a lot of content needs updating within this hero section, it will be more manageable to edit within this single group.
Imagine if you have many custom fields assigned to a particular post, it can become difficult for you to organize them. So, to make things more manageable, we create groups containing fields that are to be displayed at the same location.
How can we create the AFC Group Field?
Now let’s see how we can create an ACF Group field type. I am assuming that you have the Advanced Custom Field setup ready. So let start the process:
Step 1: Make a new field group.
If you have not created a field group, then you have to create it first. A field group is a collection of all the custom fields. Therefore, all custom fields that we make together are called Field Group. To create a field group – from your WordPress admin dashboard to Custom Fields>> Add New.
For the time being, I assigned a name to the field group like here; I named Post Fields.
Step 2: Creating a Group Field
Now we will create an ACF Group field that will hold other subfields and act as a group. For this, click on the Add Field button.
Here in this tutorial, I am creating a Group Field called Hero Section. Start by giving a field label, e.g., Hero Section, then the field name. After that, choose the Group option under the Field Type, as this field will act as a group for other custom fields.
Step 3: Adding Sub Fields Inside the Group
To create subfields inside the Group, click on the Add Field button and start adding fields.
Since here I am creating an ACF Group for the hero section, so I have added four subfields like Image, Title, Description, and a button. It’s totally up to you what fields you want to add.
Step 4: Configure the layout style:
After setting up subfields, you can set the layout style to render the subfields in the admin area.
Head over to the Layout panel and select an appropriate layout style.
It will give ease to populate the field data in a manner that suits you. For example, you can render the fields in Block, Table, and Row layouts. You can have a look below at how these layouts look on the admin screen.
- Block: In the block layout subfields are displayed, in a block one after the other.
- Table: In the table layout style sub fields are displayed on a single row table. If a limited number of custom fields are there then this layout will be best as all the fields will be displayed in one row.
- Row: Subfields are displayed in row format.
Step 5: Configure the Fields Location:
When it comes to configuring where and how fields show up, you have the choice of deciding what rules make sense for your website. Of course, if you have already assigned the field locations, then you can skip this process.
Go to the Location panel.
For example, if a post type is equal to “post,” then showing that group fields make perfect sense! as it means for every post. If you create this for a specific post type, you can associate the custom field group to that custom post type.
Once you are done, hit the publish button and make your ACF Group Field live.
How To Display Group Field on Frontend?
The Group field returns an array containing each subfield’s value in a name => value format.
Display contents
This example demonstrates how to display the contents of a Group field.
<?php
$hero = get_field('hero');
if( $hero ): ?>
<div id="hero">
<img src="<?php echo esc_url( $hero['image']['url'] ); ?>" alt="<?php echo esc_attr( $hero['image']['alt'] ); ?>" />
<div class="content">
<?php echo $hero['caption']; ?>
<a href="<?php echo esc_url( $hero['link']['url'] ); ?>"><?php echo esc_html( $hero['link']['title'] ); ?></a>
</div>
</div>
<style type="text/css">
#hero {
background-color: <?php echo esc_attr( $hero['color'] ); ?>;
}
</style>
<?php endif; ?>
Loop example
This example demonstrates how to display the same group using the have_rows() function.
<?php if( have_rows('hero') ): ?>
<?php while( have_rows('hero') ): the_row();
// Get sub field values.
$image = get_sub_field('image');
$link = get_sub_field('link');
?>
<div id="hero">
<img src="<?php echo esc_url( $image['url'] ); ?>" alt="<?php echo esc_attr( $image['alt'] ); ?>" />
<div class="content">
<?php the_sub_field('caption'); ?>
<a href="<?php echo esc_url( $link['url'] ); ?>"><?php echo esc_attr( $link['title'] ); ?></a>
</div>
</div>
<style type="text/css">
#hero {
background-color: <?php the_sub_field('color'); ?>;
}
</style>
<?php endwhile; ?>
<?php endif; ?>
