Tutorial: Magic Fields Duplicates

Magic Fields provides a greater amount of control and ease-of-use over Flutter when it comes to duplicate fields. Unfortunately, the instructions needed to use duplication are still difficult to locate, mainly because the manual hasn't been fully translated from Spanish and posted on the Magic Fields website. It will happen soon, so hang in there. Because we have had so many questions regarding the duplication of custom Flutter fields, we wanted to demonstrate how this same feature can be achieved using Magic Fields.

Setup the Custom Write Panel:

Begin by creating a custom write panel page titled 'Upcoming Events'. Within this newly created page, create a group titled 'Event' and be sure the option for duplication is checked. Finally, create two custom fields for the group. Name the first field 'even-title' with a label of 'Title' and name the second field 'event-date' with a label of 'Date'. Keep in mind the label will only be seen on the WordPress dashboard as a method of identifying the new custom field.

Write Panel Name:
Upcoming Events

Group Name:
Event

Custom Field 1 Name:
event-title Label: Title

Custom Field 2 Name:
event-date Label: Date

Duplicate a Custom Field Group:

To duplicate the entire group, we only need a few lines of code. In the example below, we are using the variable '$myEvent' but please use a variable that makes sense to you, keeping the dollar sign($) in front.

<?php $myEvent = get_group('Event'); // use the Custom Group name
foreach($myEvent as $event){
echo $event['event-title'][1]; // use the Custom Field name
echo $event['event-date'][1]; // use the Custom Field name
} ?>

To style either the event-title or the event-date with div tags we might do something such as:

<?php $myEvent = get_group('Event'); // use the Custom Group name
foreach($myEvent as $event){ ?>
<div class="meta-headline"><?php echo $event['event-title'][1]; ?></div> // use the Custom Field name
<div class="meta-date"><?php echo $event['event-date'][1]; ?></div> // use the Custom Field name
<?php } ?>

Duplicate a Single Custom Field:

To duplicate only one of the custom fields and not the entire group, we could use the following code.

<?php $mytitle = get_field_duplicate('event-title'); // use the Custom Field name
 foreach($mytitle as $title){
 echo$title;
 } ?>

Again, to style our custom field output, we might want to place div tags around the title, like the following example demonstrates. Be sure to use single quotes when working within double quotes. For example in Line 3 'meta-headline':

<?php $mytitle = get_field_duplicate('event-title'); // use the Custom Field name
 foreach($mytitle as $title){
 echo “<div class='meta-headline'>" . $title ."</div>";
 } ?>

A big thank you to Gnuget (David V) and Hunk (Edgar G) for keeping this plugin alive and kicking.

Dale Crum
Dale Crum
Owner / Creative Director at Doc4 Design

Want to Hear More?

Need a cost estimate for a new project? Or just want to know what options are available? Get the answers you need by calling us at (479) 202-8634, or drop us a line using the form.