How to Clone a Group of Custom Fields in WordPress using Meta Box Group

The previous post has shown us how to create and work with a simple group. Nonetheless, much of your time will be squandered on creating every single group / field manually if a number of repeated groups / custom fields are repeated on a continuous basis. Therefore, a tool that can help you automatically clone them will be of great necessity.

In this case, we would recommend you to use Meta Box Group - an extension of the Meta Box plugin. The cloning task will become far easier and can be completed in no time if you use Meta Box plugin. Of course, this tool helps you clone groups / fields on the same site only.

If you need to clone fields from site to site, you had better use Meta Box Builder - another extension of Meta Box plugin. There has been already a post that guides you through how to clone custom fields from site to site not long ago.

Now, let’s try the clone feature of Meta Box Group!

Requirements:
- Installed and activated Meta Box plugin;
- Installed and activated Meta Box Group extension of Meta Box;

Cloning groups or custom fields using Meta Box Group

Suppose that you have a meta box with custom fields and groups as below and we need to clone them.

So you should follow these steps.

Turning on the 'clone' feature of Meta Box Group

Go to functions.php file in the themes folder of your website (for example, if we use twentyseventeen themes, the file path will be wp-content\themes\twentyseventeen\functions.php), then you add 'clone' => true to the groups or custom fields you want to clone.

Here I'm going to turn on the clone feature for "Car Details" group and "Color" fields in this group. The following code will be added.

$meta_boxes[] = array(
        'title' => 'Car Details',
        'context' => 'side',
        'fields' => array(
            array(
                'id' => 'car',
                'type' => 'group',
                'clone' => true, // ALLOW “CAR” GROUP TO BE CLONED 
                'add_button' => '+ Add Group',
                'fields' => array(
                    array(
                        'name' => 'Brand',
                        'id' => 'brand',
                        'type' => 'text',
                    ),
                      array(
                        'name' => 'Date Release',
                        'id' => 'date',
                        'type' => 'date',
                      ),
                      array(
                        'name' => 'Color',
                        'id' => 'color',
                        'type' => 'color',
                        'clone' => true, // ALLOW “COLOR” FIELD TO BE CLONED
                        'add_button' => 'Add Color',
                    ),
                ),
            ),
        ),
    );
    return $meta_boxes;
}

It is noted that you should add the 'clone' => true attribute to each custom field or group you want to clone.

Cloning custom fields or groups you want

After turning on the clone feature for your expected custom fields or groups, return to the post edit page. At this time, you will see the meta box that contains the custom fields / groups has extra buttons for you to add fields or groups (see the images).

You can click on these buttons to clone respective custom fields / groups you want.

Now, instead of declaring each field / group separately, only one click is enough to create a series of similar fields / groups. It is so fast, right?

Displaying cloned custom fields/ groups on the front-end

In order to display the custom fields and groups that have been cloned, you should make a declaration as follows. Note that no matter how many repeated groups/ fields are added, you just need to declare once only as below.

$cars = rwmb_meta( 'car' );
if ( ! empty( $cars ) ) {
    foreach ( $cars as $car ) {
        echo '<h4>', 'Car Details', '</h4>';
        echo '<p>', 'Brand:', ' ', $car['brand'], '</p>';
        echo '<p>', 'Date Release:', ' ', $car['date'], '</p>';
        foreach ( $car['color'] as $color ) {
            echo '<p>', 'Color:', ' <span style="color:', $color, ';"><strong>Color</strong></span></p>';
        }
    }
}

The foreach loop is the core of the above code. It helps to call out all values that are put into the array and arrange these values in the order of custom fields / groups placed in the meta box.

Subsequent to the addition of the above code, return to the edit post page and you will see the result as follows.

Other features supporting custom field / group cloning

In addition to cloning / creating repeated groups or custom fields, Meta Box Group also supports many other features to provide you with more options for cloning them.

You can see more information about these options in our guide to cloning fields. Here, I’m going to introduce 2 features, sort_clone, and max_clone.

Sort clone

In case you create repeated groups / custom fields in the wrong order, the sort_clone feature can be used to rearrange them. This feature allows you to drag and drop custom fields / groups to quickly change their positions.

Firstly, you can turn on the sort_clone feature by adding the 'sort_clone' => true attribute to the meta box containing groups / custom fields the positions of which you want to change.

$meta_boxes[] = array(
    'title' => 'Car',
    'fields' => array(
        array(
            'id' => 'car',
            'type' => 'group',
            'clone' => true,
            'sort_clone' => true, // Allow the clones to be arranged or not?
            // List of custom fields
            'fields' => array(
            ),
        ),
    ),
);

After that, return to the post edit page, you will see an icon as the image below which allows you to drag and drop respective groups / fields.

In nature, this is just a rearrangement of positions of custom fields in an array. Therefore, after dragging / dropping and updating data, the values of custom fields on the front-end will also be automatically updated.

Max Clone

Max clone limits the number of clones in a repeatable group or a field. When working with many custom fields at the same time, you may unluckily forget how many groups that have been cloned and have no idea whether it is enough. With the max clone, things are different. You just keep cloning until no more clone could be made. The impossibility to clone indicates that there are enough custom fields / groups already.

In order to turn on the max_clone feature, you can add 'max_clone' => X, of which X should be an integer and greater than one. For example, the code below will allow cloning 3 groups.

$meta_boxes[] = array(
    'title' => 'Car Details',
    'context' => 'side',
    'fields' => array(
        array(
            'id' => 'car',
            'type' => 'group',
             'clone' => true,
             'max_clone' => 3, // Limit number of clones up to 3
             'fields' => array(),
        ),
    );
);

When you clone 3 groups in total, the button that allows adding more will be automatically hidden and cloning is now not allowed.

To sum up

Only by adding several attributes for custom fields and groups along with some clicks on UI, you’re done cloning any repeated fields / groups. This feature of Meta Box Group will help you save much time working with fields / groups. By supporting a wide range of other features for cloning groups / fields, you are given full options and necessary tools to do whatever you want with repeated groups / fields. Of course, they also help to ensure that both the back-end and front-end are optimized.

Besides the clone feature for groups / fields as detailed in this post, Meta Box Group has a lot of other features which you can see more at the series below.

• How to Create a Group of Custom Fields with Meta Box Group
• How to Clone a Group of Custom Fields in WordPress using Meta Box Group