Group

Overview

The Group field provides a simple way to create a group of fields. It’s main purpose is to better organize the edit screen UI but also does a good job of organizing the data too.

The Group field uses both the parent and child field names when saving and loading values. For example, a Group field named ‘hero’ with a sub field named ‘image’ will be saved to the database using the meta name ‘hero_image’.

Screenshots

Changelog

  • Added in version 5.6.0

Settings

Name Description
Sub fields Define the sub fields which will appear in this group
Layout The style used to render sub fields.

  • Block: The default layout style. Labels will appear above fields.
  • Table: Displays each sub field alongside each other in a single row table.
  • Row: Displays each sub field below each other with left aligned labels.

Template usage

The Group field is essential a wrapper for a group of sub fields and will return an array containing each sub field’s value in a name => value format.

Basic

This example shows how to display the contents of a group field.

<?php
		
// vars
$hero = get_field('hero');	

if( $hero ): ?>
	<div id="hero">
		<img src="<?php echo $hero['image']['url']; ?>" alt="<?php echo $hero['image']['alt']; ?>" />
		<div class="content">
			<?php echo $hero['caption']; ?>
			<a href="<?php echo $hero['link']['url']; ?>"><?php echo $hero['link']['title']; ?></a>
		</div>
	</div>
	<style type="text/css">
		#hero {
			background: <?php echo $hero['color']; ?>;
		}
	</style>
<?php endif; ?>

Loop

This example shows how to display the same group using the have_rows() function. This is similar to looping over a Repeater field value, however, there is only a single row in this value.

<?php if( have_rows('hero') ): 

	while( have_rows('hero') ): the_row(); 
		
		// vars
		$image = get_sub_field('image');
		$link = get_sub_field('link');
		
		?>
		<div id="hero">
			<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
			<div class="content">
				<?php the_sub_field('caption'); ?>
				<a href="<?php echo $link['url']; ?>"><?php echo $link['title']; ?></a>
			</div>
		</div>
		<style type="text/css">
			#hero {
				background: <?php the_sub_field('color'); ?>;
			}
		</style>
	<?php endwhile; ?>
	
<?php endif; ?>