Tutorial: Flutter Duplicate Fields

Creating duplicate fields through Freshout’s WordPress plugin, Flutter has been a little on the mysterious side up to this point. No documentation seems to exist for this feature with the exception of simply repeating a php get_post_meta tag for each Custom Field. The true beauty behind the duplicate fields lies within the ability to utilize a single php function to echo all fields as they are created on the fly.

An example:

I set up a Custom Write Panel Page titled “Upcoming Events”. Within this page is a group and the option for duplication is checked. Let’s title this group “Event” and create a Custom Write Fields like so:

CUSTOM FIELD 1:

Name: event-title
Label: Event Title

CUSTOM FIELD 2:

Name: event-date
Label: Event Date

For example purposes, let’s say I’m giving a speech in California on the 5th of July 2011. The first text field, “Event Title”, might be filled in as “IT Security World 2011″ and the second field might be a text field showing the date of “July 5th 2011″. Initially echoing theses fields is straightforward:

<?php echo get_post_meta($post->ID, 'event-title', $single=true) ?>
<?php echo get_post_meta($post->ID, 'event-date, $single=true) ?>

If echoing individual, duplicate fields within multiple groups:

<?php echo get('event-title', 1); ?> // Duplicate Group 1, Field 1
<?php echo get('event-title', 2); ?> // Duplicate Group 2, Field 1

The above code works perfectly until the time comes to add in a second or third event that we would like to automate. Keep in mind we are simplifying the situation and the above is assuming that you would not be archiving the events, but merely wanting to show the latest five or six at any given time. This is all well and good until you start clicking that duplicate button and you realize the second or third event doesn’t actually show because the new fields created must have their own individual names in order to exist, something such as “Event1″.

After looking through the Flutter documentation we find a few functions that seem as though they should deliver what we need: getFieldDuplicates ($fieldName, $groupIndex) and getFieldDuplicates ($fieldName, $groupIndex). Unfortunately these only return true values and are not what we are really looking for. What we want is the ability to click the duplicate button and have a single function return the values from the first event group and the next event group and so on.

Not much help has been handed down through the Flutter forums and it seems if anyone does know how to work this, they have been doing a great job of keeping it a secret up to this point. I found only one person willing to shed any kind of light on the matter and as grateful as I am, this was still not enough. Finally through shear frustration I took it upon myself to solve the problem through php. Albert Yarusso was kind enough to assist me in this project. Below is the php function we compiled to display duplicated groups.

<?php $my_query = new WP_Query('page_id=1');
      while ($my_query->have_posts()) : $my_query->the_post();
      $do_not_duplicate = $post->ID; ?>

<?php $total = getGroupDuplicates('event-title');?>
<?php for($i = 1; $i < $total+1; $i++):?>
<?php echo "<div class='event-wrap'>";
      echo "<h2>" .get('event-title',$i,1). "</h2>";
      echo get('event-date',$i,1);
      echo "</div>"; ?>

<?php endfor;?>
<?php endwhile; ?>

Line 1-3:

<?php $my_query = new WP_Query('page_id=1');

To begin, we need to create a WordPress query using our page_id number where the duplicate Custom Fields are located. This could just as easily be a post id number with duplicate fields. The first three lines should be understood as a basic concept from WordPress. If these are not understood, please refer to the WordPress codex on Loops. NOTE: If using this code on a page such as single.php, use the basic loop: <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>. The above example is necessary only when calling on a specific post or page.

Line 5:

<?php $total = getGroupDuplicates('event-title');?>

NOTE: This is not the name of the entire group, but the name of the first duplicate field. In this case, these are duplicate groups and not duplicate Custom Fields. This is because we have set the group to duplicate and not the individual fields.

Line 6:

<?php for($i = 1; $i < $total+1; $i++):?>

Start a count for each duplicate group in an effort to process them and add them incrementally.

Line 7:

<?php echo "<div class='event-wrap'>";<

Insert a simple php echo to add a bit of CSS styling for our events. This is only included to demonstrate the ability to add in CSS styling. Any CSS styles are housed within the stylesheet.

Line 8:

echo "<h2>" .get('event-title',$i,1). "</h2>";

Here we are inserting a CSS H2 style tag to the event title to give it a better look, then echo the event titles incrementally and end the H2 tag.

Line 9:

echo get('event-date',$i,1);

Add the event date, which again is done incrementally.

Line 10:

echo "</div>"; ?>

It is then important to end the div tag which opened on line 7.

Line 12:

<?php endfor;?>

Then end the “for” function.

Line 13:

<?php  endwhile; ?>

Lastly, don’t forget to close up the WordPress query to finalize the loop.

Now when adding additional duplicate groups on the post or page, the code recognizes that there is more than one group and subsequently echos them all. With a few tries you should have this up and running for any manner of duplicate groups or fields.