A list the client adds rows to
fld-loop="List name" Drinks, reviews, a team, questions and answers: anything where identical cards follow each other. The client adds, removes and reorders rows, the design of each card stays.
Where it goes
On the block that holds the repeating cards. The first card with fields becomes the pattern of a row; the others are the rows “Load data” brings in.
Fields inside a card are marked as usual: fld-text for text, fld-image for a picture.
The field appears in the admin only if the page has a group name: wp-fields-group on its <body>.
Example: the drinks menu
<div class="cards" fld-loop="Drinks">
<article class="card">
<h3 fld-text="Name">Latte</h3>
<span fld-text="Price">$4.20</span>
</article>
<article class="card">
<h3 fld-text="Name">Cappuccino</h3>
<span fld-text="Price">$3.90</span>
</article>
</div>The client added the third row in the admin; it was not in the markup.
What matters
- Mark up every card, not only the first. A card without attributes is not carried into the admin.
- The list name is its heading in the admin: write it so the client understands it.
- Different names for the fields inside a row.
- With no rows in the admin the whole block disappears from the page.
Common mistakes
The build log is the “Logs” tab of your project on themeforge.pro; the free markup check shows the same notes.
<div fld-loop="Drinks">
<div class="deco"></div>
<article class="card">
<h3 fld-text="Name">Latte</h3>
</article>
</div>A decorative element before the cards: the build skips it, logs it, and the element is not shown.
<div class="deco"></div>
<div fld-loop="Drinks">
<article class="card">
<h3 fld-text="Name">Latte</h3>
</article>
</div>Decoration goes outside the list.
<section fld-loop="Drinks">
<div fld-loop="Drinks">…</div>
</section>A list inside a list with the same name: the build renames the inner one to “Drinks 2” and logs a collision.
<section fld-loop="Menu sections">
<div fld-loop="Drinks">…</div>
</section>Every list has its own name.
The same in site settings or on a category
fld-loop | on a page or post, as above |
|---|---|
opt-loop | in site settings: one list for every page, such as social links |
tax-loop | on a category or tag |
Alternative spelling
f_loop, o_loop, t_loop works the same: the build gives an identical theme.