Articles

We filed this under your pillow last night
Tutorial: Flutter
12. July 2009 · Author: Dale Crum
85 Comments

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.

85 Comments

« Older Comments
Newer Comments »
  1. Doc4 says:
    September 28, 2009

    Lacy,

    I hope we have helped. For anyone else with this same issue be sure to use the Custom Field Name and not the Custom Group Name in getGroupDuplicates. We missed this small error so be on the safe side and double check if you are having difficulty.

  2. Lacy says:
    September 28, 2009

    LOL – I”m thinking the same thing – I must be just missing something HUGE :) Here’s a sample file – it’s my single post template (single.php). It’s the CLASS LEADERS section that isn’t working.

    

<?php
/**
 * @package WordPress
 * @subpackage reunion
 */

get_header();
?>

  <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    
    <h1>Class of <?php the_title(); ?></h1>
    
    <?php if( get_post_meta($post->ID, 'event_link', true) ) { ?>
    <a href="<?php echo get_post_meta($post->ID, 'event_link', $single=true) ?>">Register Now</a>
  <?php } ?>
    
 <!-- BULLETIN BOARD -->    
 <h2>Bulletin Board</h2>
 <ul>
 <li>Questions? Your class Reunion office contact is <a href="mailto:<?php echo get_post_meta($post->ID, 'reunion_staff_email', $single=true) ?>"><?php echo get_post_meta($post->ID, 'reunion_staff_name', $single=true) ?></a>, <?php echo get_post_meta($post->ID, 'reunion_staff_phone', $single=true) ?>.</li>

<?php $total = getFieldDuplicates('bulletin_board', 1);?> 
<?php for($i = 1; $i < $total+1; $i++):?> 
<li><?php echo get ('bulletin_board',1,$i)?></li>
<?php endfor;?> 

 </ul>

<!-- Class Leaders-->
<ul> 
<?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('reunion-leadership');?>
<?php for($i = 1; $i < $total+1; $i++):?>
<?php echo "<li>";
      echo "<b>" .get('leadertitle',$i,1). "</b>";
      echo get('leadername',$i,1);
      echo "</li>"; ?>

<?php endfor;?>
<?php  endwhile; ?>
</ul> 

<?php the_content('<p class="serif">Read the rest of this entry &raquo;</p>'); ?>

<?php edit_post_link('Edit this page.', '<p>', '</p>'); ?>

<?php endwhile; else: ?>

<?php endif; ?>

<?php get_footer(); ?>

  3. Doc4 says:
    September 27, 2009

    Lacy,

    I’m not following what you mean. The grouped data fields must be filled out on either a page or post created with Flutter. Then using the WordPress loop that information is called to display on the live site. The duplicate fields can be displayed on both the single and the page template ( both page and single being files located within the theme, just to be clear ). Can you send one of the files you are working with so I can take a look? It may be something very simple that I’m missing here and it sounds like you have everything set up correctly through Flutter.

  4. Lacy says:
    September 26, 2009

    So – that means – we can’t pull grouped data as part of the page template (or single post template)?!?!? We’d have to code an individual template PER POST / PAGE that would be including the data? That makes no sense …

    I did test this by updating my single post template reflecting the post_id of one entry that contains duplicate groups (id was 75) — and it still didn’t pull the fields.

  5. Doc4 says:
    September 26, 2009

    Lacy,

    Using the code example you have provided; the page with the duplicates on it has an id of “1″ correct? If the duplicate fields are located on a post then “page_id=1″ would need to be adjusted for the post they are on, for example: “p=202″. The code you are using appears correct which is why I think you may have the page/post id number incorrect. Visit either the Post Edit or Page Edit admin and hover your mouse over the title, then look in the browser footer at the link and check the number listed there to be certain they are correct.

    Check this and let me know if this is the source of the issue.

  6. Lacy says:
    September 26, 2009

    Using flutter successfully with single fields and with duplicate single fields. But grouped duplicates … just cannot get it working.

    Using this code:

    
<ul> 
<?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('class-leaders');?>
<?php for($i = 1; $i < $total+1; $i++):?>
<?php echo "<li>";
      echo "<b>" .get('leadertitle',$i,1). "</b>";
      echo get('leadername',$i,1);
      echo "</li>"; ?>

<?php endfor;?>
<?php  endwhile; ?>
</ul>

    My duplicate group is called “class-leaders” … for testing I’m only pulling two of the fields: leadertitle and leadername. This code is within the loop. Nothing outputs.

    I’m using duplicate groups on multiple pages … so i need to pull the current posts post_id… where you have page_id=1 … surely that needs to be dynamically pulling whatever the current posts id is. Right?

  7. Sparky says:
    September 22, 2009

    Thanks for the advice, it helped.

    Also i needed to change

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

    to:

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

    Cheers.

  8. Doc4 says:
    September 22, 2009

    Sparky,

    I believe the issue is the underscore in “support_name” as we have run into issues with this in the past. Try using a dash “support-name” instead and please let us know if this solves the issue.

    Thanks

  9. Sparky says:
    September 22, 2009

    Is there an issue with the getGroupDuplicates and wordpress 2.8.4? I have used this code in the past a few times without issue. My code is below, just in case i have missed something.

    
<?php $total = getGroupDuplicates('support_name');?>
  <?php for($i = 1; $i > $total+1; $i++):?>
  <?php echo "<div class='support'>";
      echo "<h2>" .get('support_name',$i,1). "</h2>";
      echo get('support_web',$i,1);
      echo "</div>"; ?>
  <?php endfor;?>

    Thanks for the help.

  10. Doc4 says:
    September 20, 2009

    Jeromy,

    Thank you for sharing the code with everyone.

  11. jeromy says:
    September 20, 2009

    Got it:

    
<?php
$total = getFieldDuplicates('fieldName',1);
for($i = 1; $i < $total+1; $i++){
echo "<span>" .get('fieldName',1,$i). "</span>";
}?>

  12. jeromy says:
    September 20, 2009

    This code worked great:

    
<?php
$total = getFieldDuplicates('nameOfYourField',1);
for($i = 1; $i < $total+1; $i++){
echo get('nameOfYourField',1,$i);
}?>

    One question – how do I individually style each field as it’s displayed? I want to add at least a comma after each field or maybe wrap them each in a span tag

« Older Comments
Newer Comments »

Trackbacks

    Leave A Comment

    Please wrap any code within the <code> tag to display properly

    Multicons

    Multicons is a multi-favicon code generator which automatically inserts the necessary meta tags for both favicons (site-wide and/or admin) and Apple Touch icons. Not sure what a...

    IE6 Upgrade Option

    IE6 Upgrade Option utilizes the 7.9kb script created by mihai.ile: http://code.google.com/p/ie6-upgrade-warning/ as a WordPress plugin. I preferred this script over the many alternatives...

    WordPress Database Backup:...

    The WordPress Plugin: WordPress Database Backup by Austin Matzko is one of the more intuitive backup plugins currently available and with no stern warnings to scare off the faint of...

    PictureBook

    While doing our usual run of site updates and code adjustments, we ran into a small issue: how to display WordPress bookmarks with both text and images. Utilizing the 'Links' tab (...

    BookMaster

    BookMaster is our answer to what we feel is an odd issue with the WordPress wp_list_bookmarks tag. For those that have exercised the use of wp_list_bookmarks, you are well aware that...