How to create repeater fields in a metabox

Repeatable WordPress custom fields in a metabox

I once developed a website for a branding company who wanted to add as many boxes to a page as they desired. Boxes could contain text or images.

The obvious solution to this is using custom metaboxes.

But how do you make fields in a metabox repeat themselves, over and over? I wanted to have a button on the metabox, called something like “Add box”, and create a new box with one click.

I usually use WebDevStudios’ Custom Metaboxes and Fields for WordPress for my projects. It’s light, easy to use, well documented, and will satisfy almost every task you may have in mind involving metaboxes. And it did satisfy all my projects, until I hit the wall of repeatable fields.

For days I searched for other snippets, plugins, but none had the functionality I needed.

And then I came across Advanced Custom Fields (ACF) plugin. It’s like a GUI layer for custom fields. If you’re not comfortable with code snippets or modifying your functions.php file, ACF is the perfect plugin for you even if you don’t need repeatable fields for your metaboxes.

The plugin only by itself has very standard functionality: you create your metaboxes, name them, sort them, use them. However, the plugin offers a number of very useful add-ons, like Date and Time picker, Gallery field, Options page and others. The add-on I needed was called Repeater Field.

Some of the add-ons are free, but a couple cost $25. I payed for Repeater Field and I don’t regret a cent I invested in it. It saved me days of (maybe unsuccessful) work!

Go to plugin repository from your WordPress Dashboard, search for Advanced Custom Fields and install the plugin.

Purchase Repeater Field from plugin website, and upload the zip file from Plugins -> Add New -> Upload.

Now we’re ready to build our metabox with repeating fields!

Go to Custom Fields from your Dashboard and create a new field group by clicking Add New.

Enter the title. I’ll name mine Box.

Choose which post types should show your custom box. Mine should show up on pages, so in my case post type is equal to page.

Customize bottom options to your needs. I just change Style to Standard (WP metabox), it will ensure the proper look of my metaboxes.

Advance Custom Fields: Adding Field Group

Advance Custom Fields: Field Group Options

Now scroll up to top and let’s add fields to your field group. Click on Add Field.

Name the Field Label. I just put there Box, too.

Now, if the fields in your metabox are going to be repeatable you have to correctly choose your Field Type. Select Repeater from the dropdown.

Advance Custom Fields: Field Type - Repeater

Fill in Field Instructions if you want to.

My Box metabox is not really required so I’ll choose No.

Now go ahead and create all the subfields of your repeater field you need. You can choose subfield types, selection options if you need to have a dropdown list or a radio selection, you can fill in instructions for each subfield, choose layout, etc.

Here is my list of subfields and an example of one detailed subfield as a radio selection.

Advance Custom Fields: Repeater Fields

Advance Custom Fields: Repeater field details

Here’s a video showing how to work with the plugin and Repeater Field add-on.

Now that you created your repeatable fields in metabox, it’ll show up in post types you chose, in my case – pages.

Advance Custom Fields: Metabox in page editor

I’m going to click on Add Box and fill in the details I need.

Advance Custom Fields: Repeater subfields

Add as many boxes as you need.

Now that it’s done, you need to integrate the values of your fields into your template, in other words – let’s loop through the metabox and call field values for each repeatable field.

When your fields aren’t repeatable, just a regular metabox, you’ll need the_field() and get_field() functions to display and return the values of a specified field.

However with Repeater Field and Flexible Content Field add-ons you’re going to need the_sub_field() and get_sub_field() functions, because your fields are inside a repeater field already, which makes them subfields.

Here’s what my code ended up to be. You need to run a loop. It’s just like a regular WordPress loop, only using have_rows() instead of have_posts(). The script goes through all the boxes and checks whether they have this or that value, and according to conditions wraps subfield values in appropriate placeholders.

[html]
<?php if( have_rows(‘box’) ): //Let’s check if we added any boxes
while ( have_rows(‘box’) ) : the_row(); //Metabox loop
$box_size = get_sub_field(‘box_size’); //Starting to check values of different subfields and wrapping them accordingly ?>
<div class="box<?php if ( $box_size == ‘big’ ) { ?> w2<?php } ?><?php if ( $box_size == ‘rectangular’ ) { ?> w2h1<?php } ?>" style="background: <?php if ( get_sub_field(‘background_image’) ) { ?> url(‘<?php the_sub_field(‘background_image’); ?>’) <?php } ?><?php if ( get_sub_field(‘background_color’) ) { ?> #<?php the_sub_field(‘background_color’); } ?>;">
<?php if ( get_sub_field(‘image_link’) ) { ?>
<a class="white-font" href="<?php the_sub_field(‘image_link’); ?>">
<?php } ?>
<?php if ( get_sub_field(‘image_text’) ) { ?>
<div class="box-text box-text-grey-bg"><?php echo apply_filters(‘the_content’,get_sub_field(‘image_text’));?></div>
<?php } ?>
<span class="linked"></span>
<?php if ( get_sub_field(‘image_link’) ) { ?>
</a>
<?php } ?>
<?php $box_padding = get_sub_field(‘box_padding’);
if ( $box_padding == "small" ) { ?>
<div class="box-text">
<?php }
else if ( $box_padding == "medium" ) { ?>
<div class="box-text2">
<?php }
else if ( $box_padding == "big" ) { ?>
<div class="box-text4">
<?php }
else { ?>
<div class="box-text">
<?php }
echo apply_filters(‘the_content’,get_sub_field(‘box_text’)); ?>
</div>
</div>
<?php endwhile; // Close the loop
endif; ?>
[/html]

Here’s all you need to know about ACF and Repeater Field:

General ACF documentation
Repeater Field add-on
have_rows() function
the_field() function
get_field() function
the_sub_field() function
get_sub_field() function

I will still continue using WebDevStudios’ snippet for creating custom metaboxes up to the point where they can’t solve a specific problem because I prefer small scripts over plugins. But if it comes to repeatable metabox fields, ACF is the solution!

Have you ever wanted to create repeatable custom fields in metaboxes? How did you solve that problem? If you have any alternatives to Advanced Custom Fields plugin and Repeater field add-on, please, share your solutions below, I’d love to know your approach!

Have you had any experience with Advanced Custom Fields plugin and Repeater Field add-on before? How was it?

If you have any questions regarding ACF or custom metaboxes in general, leave a comment below and I’ll try to answer it.

One thought on “Repeatable WordPress custom fields in a metabox”

Comments are closed.