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; ?>

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.