WordPress with Flutter – Ordering Duplicate Groups

WordPress with Flutter – Ordering Duplicate Groups

The Flutter plugin for WordPress is an excellent tool for enhancing the backend layout for use as a CMS.  The duplicate fields and groups functionality in particular is very useful as it allows users to repeatedly add similar types of content to a page – for instance a staff biography.

The downside of duplicate fields and groups is that there is no reordering built into the plug in.  The content is displayed in the order you’ve added it, and there doesn’t appear to be anything online which shows how you can specify the order.

Recently I’ve found myself adding long lists of repeated content (e.g. magazine covers), knowing that at some point they will need to be reordered and I’d need to delete the whole list and add it again [pain!].

Anyway, there is a way around it:

  • Firstly, in Flutter you’ll need to ensure your duplicate content is a group (not a field) and ensure that a new field, ‘order’, is in this group. Go to your page and in the ‘order’ fields enter ascending numbers which show which order you would like the duplicate groups to appear in.
  • Then in your template, you’ll need to add the following code. This example assumes there are two fields in my duplicate group, ‘order’ and ‘image’.
<?php

// Find out how many duplicate entries there are (make sure the field you use is mandatory)
$entries = getGroupDuplicates("image");

// For loop that iterates through the entries
for ($i=1; $i<=$entries; $i++) {

// Get 'order' value
$order = get("order", $groupIndex=$i, $fieldIndex=1, false);

// Create an array, 'details'
// Where the key = 'order' value and value = 'image' value
$details[$order]["image"] = get("image", $groupIndex=$i, $fieldIndex=1, false);

}

// For loop that iterates through 'details' array
for ($x=1; $x<=$entries; $x++) {

// Display image using the value set in the 'order' field
echo("<img src="" . $details[$x]["image"] . "" alt="" title="" />n");

}

?>

Basically I’ve created one for loop to get all the duplicate groups, stored them in an array where the key is the ‘order’ field and then used an other for loop to print the content in the order of the array key (ie the order field).

Not brain surgery but I hope it helps others save a bit of time, I’ve found it handy.

Scroll to Top