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