add repeater custom fields using a free plugin
|

Free plugin for repeater custom fields

One of the many things that make WordPress powerful cms is Custom Fields. By default, WordPress comes with a natively built custom fields option but the UI is not user-friendly especially if you are developing a website for your client. The plugins like Advanced Custom Fields (ACF) have filled this gap and made it easy to create and manage custom fields that are easy to use for both Developers and clients.

Advanced Custom Fields has both Free and Pro versions. One of the Fields that is part of the Pro version is “Repeater Field”. As the name suggests, this field can be repeated as many times as you want. The most common use case can be generating a list from custom field data, creating tables, etc. If the only thing that you need from the pro version is “Repeater Field” then you might be thinking if there is an alternative to the Advance Custom Fields (ACF) Pro version where I can use Repeater Field?

Luckily, there are multiple Free Alternatives but I will discuss the one that is easy to use just like ACF. The plugin (Custom Field Suite) is available on the official WordPress Repository with over 50,000 Active Installations.

So, let’s discuss how to utilize the Repeater Field (Loop) using the Custom Field Suite plugin.

Install and Activate the CFS plugin

  • In the WordPress dashboard go to “Plugins” and click on “Add new”.
  • Search for “Custom Field Suite”.
  • Install and Activate the Plugin that appears first in the Search results.
install and activate cfs plugin

Add repeater(Loop) Field

After activating the CFS plugin, you can click on the option “Custom Field Suite” under the Settings in WordPress Dashboard.

  • Click on Add new in Field Groups.
  • Add a title for the Field Group.
  • Add a new Field, set the label and name for it, and select Field Type as “Loop”.
  • Add another Field (it should be the one that you want to Repeat) and set the Field type as text or anything that you want to repeat inside the Loop. You can create multiple fields as well.
  • Drag all the Fields that you want to repeat under “the Loop” field type that you created first. (Note: If you are not able to drag the fields under the loop then you can once Click on “Publish” so the page will reload and then you should be able to drag fields under Loop. Don’t forget to press update at the end to save changes).
  • In “Placement Rules”, select the post types or conditions to show the Field group on only specific post types (Pages, Posts, etc).
  • Click on Publish/Update to save the Field Group.
Add Repeater Custom Field in WordPress

Display Repeater Field output in the template

As you can see in the above screenshot I have named Loop Field as “featured_list” and Field inside it as “list_item”, so to show the returned output from custom fields in our template we will use below code for our example fields:

$fields = CFS()->get( 'featured_list' );
if ($fields){
foreach ( $fields as $field ) {
    echo $field['list_item'];
}
}

You can replace the field names in the above code with the names that you have assigned to your fields. You can render the output in your desired tag. For example, You can show output in HTML list (<li>) tags or any tags of your choice by simply outputting the field inside tags. See below Example:

$fields = CFS()->get( 'featured_list' );
if ($fields){
echo '<ul>';
foreach ( $fields as $field ) {
    echo "<li>$field['list_item']</li>";
}
echo '</ul>';
}

The above code will render output in the form of a list. See the below screenshots.

Data In Repeater Fields
filled repeater fields
Rendered Output On Frontend
rendered output from repeater

Conclusion

Custom Field Suite plugin is one of the best Free alternatives to ACF Pro for Repeater and Relationship Fields. The UI of the plugin is very easy for beginners as well so anyone can include advanced loop items within templates using this Free plugin.

I hope this article has helped you to add repeater custom fields using a free plugin. If you have any questions feel free to let me know in the comment section, I will be happy to answer your questions 🙂

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *