PHIL KURTH

Email

Understanding Repeaters

If you are currently using a custom theme that I have developed, there is a pretty good chance your theme has at least one implementation of a repeater field.

Repeater fields come in many different forms and styles, but they all share one basic concept – repeatable data fields. These fields allow us to define a strict foundation for a particular item, then use that foundation as many times as we need. The simplest example I can give you for this would be a list of definitions. A single definition might have one term and one definition, but a list of definitions would contain the same pattern, repeated any number of times, with each definition containing diffent information – i.e. The pattern is the same, but the data inside it is different.

Understanding Repeaters

Using repeaters in the WordPress admin makes it possible for us to achieve complex, custom components, without you having to touch any code. The most simple usage would involve;

  1. adding a new item;
  2. filling out the data fields;
  3. then repeating until you have the number of fields you need.

As mentioned above, repeaters come in many different styles, but the following info is based on the most common you will see in custom themes that I have developed (the repeater below is built via the Advanced Custom Fields developer toolkit).

Let’s take a look at a simple, empty repeater field that might be used to populate an image slider full of linked images;

 

empty-image-slider-repeater

This repeater currently only has a single item that contains two data fields; an image field, and a link field

 

The above is a very simple repeater with no data. It currently has only one repeatable item, and that repeatable item has two data fields (image & link) that are ready to receive some data. The most important thing to notice is the blue Add Slide button, which provides us with the ability to add more items just like this one.

Let’s take a look at the same repeater with a few extra repeatable items;

 

empt-image-slider-repeater-with-3-items

The same image slider with 3 empty repeatable items

 

The repeater above is the exact same repeater we looked at earlier, except we now have three repeatable items (or rows). The extra rows are simply added by clicking the blue Add Slide button. The data fields are all still empty, but this isn’t important for this demonstration, as the data fields will usually be different, depending on the purpose of the slider. The important concept to grasp is that we can create any number of data rows within a repeater.

Using Repeaters

As mentioned earlier, I tend to use the same style of repeater on all custom themes I build. By now, you should have a pretty solid grasp on creating new data rows by using the blue button, but there are a few other key controls that you may find useful;

  • Data rows can be re-orders via drag-and-drop. To do so, just hover over the rows number on the left hand side until the cursor changes, then drag the row to where you need it.
  • Data rows can be deleted by clicking the minus icon that appears on the right edge of the row on hover.
  • New data rows can be inserted between existing rows by clicking the plus icon that appears on the right edge of the row on hover.

 

empt-image-slider-repeater-with-3-items-annotated