• Home
  • About
  • Now
  • Code Snippets
  • Blog
    • WordPress
    • Genesis Theme Framework
    • Tutorials
    • Web Development
    • Geeking Out
    • Blogging Resources
  • Contact
  • Home
  • My Story
  • Now
  • Code Snippets
  • Blog
  • Contact

The Web Princess

WordPress & Genesis Theme Development

The Web Princess

ACF Repeater Fields – Adding Classes to List Items

September 23, 2013 by Dee Teal

In this quick tutorial I’m using  Advanced Custom Fields (ACF) repeater fields to turn out an array of photos and text that link to PDF files (brochures)… and I’m using the genesis grid settings to lay them out nicely (by adding class=”one-third” to the list items). The thing is, for the genesis grid to work you have to add a class of ‘first’ on the first list item in every row as well… so I need to set up a counter to count the list items and add a class to the first and every third … Check it out.

Here’s how I set up the ACF repeater fields

Field Group = aa_brochures

Repeater Fields
Name = name_of_brochure
Link = link_to_brochure
Image = brochure_image
PDF Size = pdf_size

The code is set up to output all of the fields above, wrapped up in the requisite HTML code that adds the individual items in an Unordered List, and each list item is being assigned a class of one-third (according to the genesis grid already in the theme), but where I was getting stuck was in adding in that first class to the first and every third item.

I did some research and found lots of bits that showed me part of the answer, and so after a fair bit of trial and error, I figured it out…

Follow through the comments in the code below, you should be able to make it out.

About Dee Teal

Dee Teal is a Scrum Master, Project Manager, and Team leader with a history as a developer (mostly front-end and using the Genesis Theme Framework) and WordPress trainer who is crazy active in the WordPress community.

She's run large scale WordPress events, and small ones, and if you ask someone about WordPress in Australia, you won't usually be more than one degree of separation from someone who knows her.
 
You can also find her here...
LinkedIn | Twitter

FREE Website Planner

  • Become your web designer's favourite client

Website Sign Ups

Become your Web Designer's favourite client by preparing for your web project using the Web Princess' Interactive Website Planner

  • This field is for validation purposes and should be left unchanged.

Tweet

  • I just solved pack Snake in WordBrain - as number 2605 ever! #wordbrain #genius #words http://t.co/ygULwZTRYQ http://t.co/ORNxwtaTIl September 14, 2015 2:11 pm
  • Pretty impressed with the stops that @Telstra are pulling out to get my issues sorted... Service with a surprised smile! September 14, 2015 2:48 am
  • It's Tuesday. A perfect evening for this. And by this I mean beer (of course). #oohermrs… https://t.co/eiIttD5xWa September 8, 2015 8:17 am
  • Follow Along

Recent Posts

  • Moving to deeteal.com October 23, 2020
  • Asking a Better Question September 13, 2016
  • Growing & Developing your WordPress Meetup June 24, 2016
  • Making an Escape June 7, 2016
  • Changing Tack : Adjusting your Sails for the Winds of Change May 7, 2016
  • Privacy Policy
  • Disclosure Policy
  • Contact

© 2023 The Web Princess
Proudly custom built with Genesis