Twitter
Tutorial: Magic Fields
19. May 2010 · Author: Dale Crum
67 Comments

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 within 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.

67 Comments

  1. Sorry, I forgot to wrap the code before.

    I’m closer, your tutorial helped a lot, and was able to display a single image & description field – but still not sure how to display the duplicate image fields. Can you give me a hand?

    Here’s what I have so far:

    <?php 
    <a class="MagicThumb" href="<?php echo get('slide_detail_add_image'); ?>" >
    <img src="<?php echo get('slide_detail_add_image'); ?>" width="500px" alt="" /></a>
    <?php echo get('slide_detail_description'); ?>

  2. Thanks so much for this post. I was ripping my hair out all day trying to understand the wiki (my Spanish is limited to asking for beer), and it was really so straight forward.

  3. Fabrizio,

    Can you send over the code again but enclosed within the “code” html tags for readability? Thank you.

  4. Hi, great post!
    I’ve a problem. I’ve a magic field CheckBox List named ‘trattamenti_corpo’ (duplicated) and a Write Pannel named ‘Servizi’ (duplicated).
    When i call it in single.php with this code

    Servizi Offerti

    I received only the text “Array”.
    Where is the error?
    thx for attention!

  5. Quick update: Duplicate image fields within a non-duplicating Group. This will output the image url.

    <?php $imagelink = getFieldOrder('images');
                 foreach($imagelink as $image){
                 echo "<img id='currPageImage' src='";
                 echo get('images',1,$image);
           echo "'>";
        } ?> 

  6. Trevor says:

    Found a workaround had to set the value to ‘o’ and not 0, code example is below.

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

  7. Trevor says:

    Great post and site!

    I was wondering if you’ve had an issue with duplicated image fields within a group (the group cannot be duplicated)

    Here Is my code:

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

    instead of the url of the image being returned I just get the word “Array” for each image added.

  8. Ron,

    If you are duplicating a single field use the lower code, if duplicating a whole group use the upper code bit. It seems you want the lower code sample to display the duplicate field. Try something like the following:

    <?php $mySlideshow = get_field_duplicate('slideshow_photo'); // use the Custom Field name
     foreach($mySlideshow as $slideshow){
     echo  "<div><img src='";
     echo $slideshow; 
     echo "'></div>";
     } ?>

  9. Peter,

    Hopefully you’ve solved this already. Try removing the quotes and periods around .#item. As shown in the third code example.

    
    <?php $list = get_field_duplicate('list'); // use the Custom Field name
     foreach($list as $item){
     echo  $item;
     } ?>

  10. Peter says:

    I have created some magic fields for a page(not post) and when I upload duplicated images i cant display them using the code;

    
    <?php $list = get_field_duplicate('list'); // use the Custom Field name
     foreach($list as $item){
     echo  ". $item .";
     } ?>

    i get an error on the page saying:
    ‘Warning: Invalid argument supplied for foreach() in C:\wamp\www\wp-content\themes\cim\sodebar_page.php on line 100′

    why?

  11. Hello. First off, great tutorial…and great comments
    I’ve been struggling for a while to duplicate my field group. I have a group with a duplicating field for a photo slideshow. I’ve been using the sample code that people have been posting:

    
        <?php $mySlideshow = get_group('Slideshow'); // use the Custom Group name
          foreach($mySlideshow as $slideshow) { ?>
          <div><img src="<?php echo $slideshow['slideshow_photo'][1]['o']; ?>"></div>
          <?php } ?>
    
    

    An image shows up, but only one. When I change the number in the brackets [1] to 2,3,4, those images will show up. Wondering what is going on. Do I need to create some kind of variable to increment like i++?

    Any thoughts would be appreciated.

    Thanks,
    Ron

  12. Andy,

    The code didn’t display properly. Please be sure to use HTML code tags around your markup. Thanks

  13. Hey Dale

    This has been a great help thanks!

    Just a question…I am using your code to list some album tracks using the following:

    Only problem is I want to display the audio player but I do not know how to get it to work inside the query

    Any ideas?

    Thanks

    Andy T

  14. Victor says:

    Answer to Andy and Sebastian.

    
      <?php $groups = getGroupOrder('person'); foreach($groups as $group) { ?>  
       <?php echo get('department', $group); ?>
       <?php $fields = get_field_duplicate('person',$group); 
        foreach($fields as $field)
        { ?>    
        <?php echo $field; ?>
        <?php } } ?>
    

    “department” is a field in a group can’t be duplicate. “person” is a field that can be duplicate.

    This outputs something like this:

    WORK
    - John
    - Kean
    - Maria

    FUN
    - Karl
    - Joe

  15. Hi,

    I’m creating a food menu for a restaurant and am using the duplicate groups as each dish on the menu. In the group there are 6 fields (name, price…). The field that I want to duplicate is a field that will only be filled in for certain dishes e.g. burgers – toppings (which is why I want it to check if it is empty or not). If there is a choice of 3 different toppings, I would need to duplicate the field 3 times. Code for duplicate field below:

    
    <div class="options">
        <?php $groups = getGroupOrder('options');
        foreach($groups as $group) {
        $fields = get_field_duplicate('options',$group);
        foreach($fields as $field)
        { ?>
           <?php echo $field; ?>
     
        <?php } } ?>
    </div>
    

    Group code without the duplicate field, the field I want to duplicate is options and if possible o-price too:

    
    <?php $myEvent = get_group('food section'); foreach($myEvent as $event) { ?>
      <div class="innersec"><div class="f-item">
        <div class="item_top">
          <h3><?php echo $event['name'][1]; ?></h3>
          <div class="price"><?php echo $event['price'][1]; ?></div>
          <div class="price"><?php echo $event['s-price'][1]; ?></div>
        </div>  
          <div class="description"><?php echo $event['description'][1]; ?></div>
          <div class="options"><?php echo $event['options'][1]; ?></div>
          <div class="oprice"><?php echo $event['o-price'][1]; ?></div>
      </div></div>
    <?php } ?>
    

    If this is going to be too difficult could you maybe help with a solution for checking if the field is empty or not because I need to do that for three of the fields. Or check the group and only output the filled in fields!? At the moment, if I check the HTML with Firebug all 6 fields are shown for every duplicated group whether they have any info in them or not.

    Thank you so much for your help

    Andy

  16. Andy,

    Can you post an example of what you are doing in the form of the example below. I’m curious if you are unnecessarily using the code for Duplicate Fields within Duplicates Groups. Additionally, please post the code you are currently using and be sure to wrap it in the “code” tags for this comment section.

    Group Name: (Campground Name)
    • Field Name: (Student Name)

  17. Hi!

    Great that there’s a solution to the duplicate fields in duplicate groups! I haven’t got it working correctly though, the field is duplicating itself in every group not just the one the information is entered in, in WordPress.

    Also it is going to be empty sometimes so I Just wondering how I would make it so that if the duplicate field was empty it wouldn’t show!? I think it’s something using some like an if and true/false statements but no idea how to do it!?

    Don’t know if the two points are related?

    Thanks

  18. sebastian,

    This question has been asked many, many times and I’m happy to say we finally have an answer for everyone. I have been in talks with David Valdez from the Magic Fields plugin project for a few weeks now and he was kind enough to help get the ball rolling. The consistent problem was that we were unable to echo all duplicate fields within a duplicate group.

    In the example below I have set up a duplicate field within a duplicate group and echoed the duplicate field within an unordered list. The code is set up this way to make it easier to add additional styling to the fields.

    I will be adding this code to the tutorial soon but for now please refer to this post.

    
    <ul>
    
     <?php
       $groups = getGroupOrder('member');
       foreach($groups as $group) { 
        $fields = get_field_duplicate('member',$group); 
        foreach($fields as $field)
        { ?>
        
         <li><?php echo $field; ?></li>
     
        <?php } 
        } ?>
    </ul>
    

  19. sebastien says:

    I have a duplicate group, and in this duplicate group i have a duplicate field.
    The output must be
    list 1
    item 1.1
    item 1.2
    item 1.3

    list 2
    item 2.1
    item 2.2
    item 2.3

    to display a duplicate group i use this code :

    $grouplist = get_group('myGroup');
      foreach($grouplist as $group){
      echo $group['list-title'][1];
     }

    to display a duplicate field i use :

    
    $list = get_field_duplicate('list');
     foreach($list as $item){
     echo  ''.$item.'';
    }

    if my duplicate field “list” is in my duplicate group “myGroup”, what
    can i display the duplicate-field ?

    thx

  20. plisvb,

    The code didn’t make it through, please be sure to wrap any code in the “code” tags.

  21. plisvb says:

    Got this to work finally for the duplicate images problem:

    <?php echo '’; ?>

  22. sereal,

    Can you explain what exactly you are doing tat isn’t working?

    • What code are you using?
    • Where are you placing the code?

  23. sereal says:

    I try to follow your instructions and put it into my template but nothing showing up on the page.
    please help

  24. The forum members over at Magic Fields Support have answered Sebastien with the following which I have translated using the above post examples:

    
    <?php $myEvent = get_group(‘Event’); // use the Custom Group name
               foreach($myEvent as $event){
               echo $event['event-title'][1]; //us the Custom Field names here and below
               echo $event['event-image'][1]['t']; // displays the thumbnail
               echo $event['event-image'][1]['o']; // display the image
               } ?>

  25. @ the last two comments: I agree! I also need to know how to have multiple duplicate groups, and duplicate fields within those groups.

    Thanks!

  26. sebastien says:

    I have an image in each group. What can i display each photo?
    i used this code:

    $team = get_group(‘team’);
    foreach($team as $member){
    echo $member['namemember'][1];
    echo “”;
    echo $member['photomember'][1];
    echo “”;
    }

    for the name it’s ok, but the photo is always the same for each member…
    could you help me ?

  27. Andy,

    We haven’t really explored this concept but we will look into it.

  28. Andy Denham says:

    Hi,

    Still racking my brains about this one!? I think I am asking an obvious question but I just need to be told either way?

    How do I duplicate a field within a duplicating group? I doesn’t work if I just drop the duplicate field code inside my duplicate group code (I have changed the names)? My code is still the same as below!

    Thank you

  29. Andy Denham says:

    Thanks that worked great! Another question though!?

    How would I go about showing duplicates of each field within a group? I have included one of my groups below:

    
    <?php $myEvent = get_group('feasting'); foreach($myEvent as $event){ ?>
      <h3><?php echo $event['f-name'][1]; ?></h3>
      <div class="price"><?php echo $event['f-price'][1]; ?></div>
      <p><?php echo $event['f-description'][1]; ?></p>
    <?php } ?>
    

    As you can see it is for a menu and I need to be able show the duplicates of each field!? At the moment I have each group showing up fine but only showing the first entry of each field!

    Thanks

  30. Andy,

    Glad we could help. if you need to display a second Group (not a duplicate of the first Group) you just need to copy the code and change out your variables (i.e. the new Group field names). Unless this second Group is from a new post or page, then you would need a new loop. Hope that makes sense.

  31. Andy Denham says:

    Hi,

    Great post! I wouldn’t have been able to use MF if this wasn’t around!

    How would I go about getting two or more different groups displayed? I got one group displayed with the ‘Duplicate a Custom Field Group’ code but I would like to repeat this code to display another group (and more if possible)?

    Would it require a whole new loop or query or could I do ‘else;’? Sorry if I am being unclear!

    Would really appreciate some help?

    Thanks

  32. Thanks for all your help. I found the fix on a page I had to translate :) – Hiding in the depths of the internet.

    <?php echo get_image ('magicfield', 1, 1, 0); ?>

    This prints JUST the img source and means the user doesn’t have to input the file name manually!

    Many thanks.

  33. Tim,

    Since we know where the image resides you can fill in the link for them like so: <a href="http://www.mysite.com/wp-content/uploads/<?php echo get_post_meta($post->ID, 'img-name', $single=true) ?>"><?php echo get_post_meta($post->ID, 'img_name', $single=true) ?></a>. Now use the Text field to enter only the name of the image for example: my-image.jpg

    Does this work or are you specifically wanting to use the Image field?

  34. Many thanks for the reply. – As it’s a CMS, I would need to get the image source dynamically, as the user will be using the image upload through Magic Fields and wouldn’t know what the link would be to put in a text field. Is there a way to do this specifically?

    Cheers,

    Tim

  35. Tim,

    Please be sure to wrap any code within the <code> tag to display it properly in the comments. Here is how I handle this personally. Instead of using the Image field from option try the Text field. On the post or page enter the link into the Text field for example: http://www.doc4design.com/myimage.jpg. Then in the template code <a href="<?php echo get_post_meta($post->ID, 'img-src', $single=true) ?>"><?php echo get_post_meta($post->ID, 'img_src', $single=true) ?></a>. Is this what you are looking for?

  36. Sure thing, sorry :)

    I’m wanting to link to an image that’s inputted using magic fields, so need to print the src in <a href="image-src" rel="nofollow">link</a>.

    If I used <?php echo get_image('image'); ?> then the code will become <a href="<img src="image-src" / rel="nofollow">">link</a> which will obviously fail.

    Is there a way of doing something like <?php echo get_image_SRC('image'); ?> ?

    Many thanks

  37. TIm,

    Can you be more specific with this question? Thanks

  38. Does anyone know how to print the src of an image alone? I need to link to it in an a href and obviously echo get_image prints the too. Help, please!

  39. You pick one at random like this:

    <?php $header_images = get_group('Main Images'); // use the Custom Group name ?>
    <?php $varrr= array() ?> // create empty array
    <?php foreach ($header_images as $headimage){ // loop through each item in array and add to new varrr array
    $item =  '<a href="' .  $headimage['home_header_image_link'][1] . '"><img src="' . $headimage['home_header_image'][1]['o'] . '" alt="" width="960"/></a>';
    array_push($varrr, $item); 
    } ?>
    
    <?php print array_rand(array_flip($varrr))?> //print random $item from $varrr array and show it's value instead of key 

  40. james says:

    Anyone know how can we loop through all the duplicate groups and only display one of them at random?

  41. NotJustAnotherJones says:

    Got this to work for an image…. Really comes in handy.

    <?php echo $event['side-image'][1]['o']; ?>

  42. how to use this with get_post_meta?

  43. Does anybody know how to put a duplicating field within a duplicating group? This is puzzling me!

  44. Stefan says:

    Getting this to work with images and duplicated groups had me stumped for a little bit too…

    Here’s my php snippet in full:

    
    <?php $myImage =  get_group('Group name');    // USE NAME OF MAGICFIELDS GROUP
      foreach($myImage as $image) {
        echo '<img src="'.$image['field_name'][1]['o'].'" alt="" height="342" width="570"/>'; }   //USE NAME OF FIELD WITHIN THE GROUP
     ?>
    

    hope that helps someone :)

  45. Rob says:

    I was having trouble with duplicate images too, but finally got it working with this

    $images = get_field_duplicate(‘images’);
    foreach($images as $image){
    echo ‘ ‘;
    }

    for anyone looking that comes across this post and is still baffled

  46. Bogdan,

    Give this a try:
    echo $event['image'][1]['o']; or
    echo $event['image'][1]['t'];

    ‘o’ = original image
    ‘t’ = thumbnail of image

  47. Bogdan says:

    Doesn’t work with images… echo $event['image'][1]; outputs “Array” instead of an image

  48. Emily says:

    [...] here to see the original: Tutorial: Magic Fields Duplicates | Doc4 Share and [...]

  49. Logan,

    This method should work for image fields as well. Double check your Custom Field names to be sure they are named correctly within the code, this is the most common error I see. Let me know if this corrects the problem.

  50. Logan says:

    How would one make this work for duplicate image fields? I’ve tried everything – and it doesn’t seem to work. Thank you!

Leave A Comment

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

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 / iPhone icons. Not sure...

IE6 Upgrade Option utilizes the 25K script created by Free the Foxes: http://www.freethefoxes.com/ as a WordPress plugin. Originally this plugin utilized a smaller 7K script but it's...

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...

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 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...