Team pages usually force a choice: pretty but painful to update, or easy to manage but plain. Advanced Custom Fields lets you have both. Here is how I built one with a repeater field.
This one is a written walkthrough, so there is no video to embed here. I cover WordPress builds, ACF, and web dev on the channel, though. Subscribe to catch new tutorials the moment they go live.
Editor's note (July 2026): The ACF technique here still works exactly the same on current WordPress. Two things to know. First, the repeater field this build relies on needs ACF Pro (the free version does not include repeaters). Second, in October 2024 WordPress.org forked Advanced Custom Fields into a plugin called Secure Custom Fields (SCF); ACF itself is still developed by WP Engine, and either one exposes the same have_rows() and the_sub_field() functions the code below uses. I also transcribed the original code, which this post first showed as a screenshot, into a real copyable block.
Build the team page from an ACF repeater field instead of a page builder. Each row holds one member's photo, name, title, qualifications, email, and bio link, plus a field that picks a large or small card. A short PHP loop reads the rows and prints the cards. The client, or you, add and reorder people by dragging rows, and the front end updates itself.
One repeater, drag-to-reorder, self-updating.Team pages are a classic web-design tension. Build something elaborate and it becomes a chore to update. Keep it simple so it is manageable and it ends up looking plain. This was the first real, significant project I completed with Advanced Custom Fields, and it is exactly the case where ACF earns its keep: it lets the page be both attractive and easy to maintain.
The design centers on a business card for each team member. I used a two-tier hierarchy so the more senior members get a larger, more prominent card while everyone else has a smaller footprint. That keeps a big roster from turning into an endlessly long page. Each card shows a profile picture, name, title, qualifications, email, and a link out to a full biography page. I considered a standard page builder, but ACF was the more efficient, maintainable path.
This build needs ACF Pro, because the whole thing rests on a repeater field. A repeater lets the same set of fields be reused as many times as you like, which is exactly what a team roster is: the same handful of details, repeated for each person. Inside the repeater I added a field for each part of the card, plus one extra field that decides whether a member renders with the large or the small layout.
When you edit the team page, the fields show up in a clean, friendly format. Best of all, each row has a drag-and-drop handle, so rearranging the team is effortless. Add, delete, or reorder a member and the published design reflects it automatically. That self-updating behavior is the entire reason to use ACF here.
With the fields in place, a short PHP loop does the display work. It opens the repeater with have_rows(), steps into each row with the_row(), then prints the sub-fields with the_sub_field(). The one twist here is the layout selector: an if on the dis_option sub-field chooses the large card markup or the small card markup. Here is the large-card branch, straight from the ACF documentation's patterns:
<h1>BIOGRAPHIES</h1> <span>Learn more about the people that make up our world class team.</span> <?php if ( have_rows('emp_row1') ): ?> <?php while ( have_rows('emp_row1') ): the_row(); ?> <?php if ( get_sub_field('dis_option') == 'lp' ): ?> <table id="card_boxLarge"> <tr> <td id="card_imageLarge"> <img src="<?php the_sub_field('emp_head'); ?>" /> </td> <td id="card_fieldsLarge"> <div id="card_nameLarge"><?php the_sub_field('emp_name'); ?></div> <?php if ( get_sub_field('emp_title') ): ?> <div id="card_titleLarge"><?php the_sub_field('emp_title'); ?></div> <?php endif; ?> <?php if ( get_sub_field('emp_qual') ): ?> <div id="card_qualLarge"><?php the_sub_field('emp_qual'); ?></div> <?php endif; ?> <?php if ( get_sub_field('emp_email') ): ?> <div id="card_emailLarge"><?php the_sub_field('emp_email'); ?></div> <?php endif; ?> <div><a id="card_bioLarge" href="<?php the_sub_field('emp_bio'); ?>">READ FULL BIO</a></div> </td> </tr> </table> <?php endif; ?> <?php endwhile; ?> <?php endif; ?> // The small-card branch is the same loop again, checking dis_option == 'sp' // and printing the matching card_boxSmall markup for the compact layout.
That is the whole trick. The real work went into the CSS that styles the two card sizes, and into keeping two field groups printing the same information in two different formats. The logic itself is a plain repeater loop that any ACF build can reuse.
Yes. The layout is driven by a repeater field, and repeaters are an ACF Pro feature. The free version of ACF, and its Secure Custom Fields fork, do not include the repeater field this build depends on.
Open the loop with have_rows('field_name'), step into each row with the_row(), and print each value with the_sub_field('sub_field_name'). Close it with endwhile and endif. That prints one block of markup per row.
Yes. ACF gives each repeater row a friendly edit form with a drag-and-drop handle, so adding, removing, or reordering team members is easy. The front end updates automatically, with no code touched.
Add a selector sub-field to the repeater, here called dis_option, and check it in the loop. An if statement prints the large card markup for one value and the small card markup for another, so seniority controls the card size.
A repeater keeps the data structured and the updates trivial. Instead of rebuilding a layout each time the team changes, you edit rows in a form. That makes the page both nicer to design and far easier to maintain than a hand-built page-builder layout.
This was my first substantial project built on Advanced Custom Fields, and it turned out perfectly. The client does not manage their own updates, but the system streamlined my maintenance workflow enormously: a team change is now a few edited rows, not a redesign. Full credit to the ACF team for building the platform that makes this kind of clean, maintainable solution possible.
If you have a team page, a portfolio, a staff directory, or anything else that is really the same card repeated, reach for a repeater field. It is the difference between a page you dread updating and one you barely think about.
Disclosure: This post contains affiliate links. As an Amazon Associate I earn from qualifying purchases, at no extra cost to you. CK Tech Check is 100% ad-free: no banner ads, no ad tracking. Affiliate links like these and my YouTube channel are what keep the site running.