Examples of How the Advanced Custom Fields Plugin Can Be Used

Ever since my post about using Advanced Custom Fields with Slick to create a slideshow, I’ve had people ask me for more examples of how ACF can be used. What’s great about ACF is there are a ton of ways you can use it to make building your site not only easier for you as a developer, but also easier for your clients to update their own websites while keeping the design integrity of the website in tact. In this post, I’m going to share 4 ways I’ve used ACF on different web projects. There are many other ways to utilize the plugin, but these cover a wide array of options.

Pricing Table

I know, I know, I just used the word “table” in a post a

I didn’t want to just slap a table in the WordPress text editor, just in case the client did something goofy and broke the table. Instead, I created custom fields using the ACF Repeater addon. A repeater field has subfields that need to be setup to work. The best way to think about it is that the repeater field acts as a table row and the subfields act as table cells (just in this example, repeater fields can be used for anything in which the same code can be reused with different information). This is what it looks like in the WordPress admin:

And this is what appears on the page or post type that the custom fields are assigned to:

As you can see, the client can easily edit each field and even add more rows (or delete them) if need be, and that all will be reflected on the front end, which looks like this:

In order for things to show up properly on the front end, you must add the appropriate code to your template files. The important thing to remember is the id you’ve given to each field and subfield (as show in the first image). For the above example, this is the code used:


<?php if( have_rows('rates') ): ?>

   <?php while( have_rows('rates') ): the_row(); ?>

      <div class="row">
         <div class="cell"><?php the_sub_field('date'); ?></div>
         <div class="cell"><?php the_sub_field('1queen') ?></div>
         <div class="cell"><?php the_sub_field('2queen'); ?></div>
         <div class="cell"><?php the_sub_field('3queen'); ?></div>
         <div class="cell"><?php the_sub_field('king_suite'); ?></div>
         <div class="cell"><?php the_sub_field('kitchen_suite'); ?></div>
      </div>

   <?php endwhile; ?>

<?php endif; ?>

Portfolio Pieces

I recently finished a website for an Architecture firm. They wanted to have a page dedicated to showcasing their work, but they also wanted to be able to pick and choose a few projects to display on their homepage. Each of their project portfolio pieces would have a gallery of images to show as well as description of each project. Instead of using a gallery plugin, I wanted to make it easy for them to edit everything for a project in one place. So, I used the ACF gallery addon to do this. This way, the client can add any images they want directly into the project rather than referencing a gallery. I setup a custom field called “gallery” and also added a custom field radio button to determine whether or not that project would be shown on the homepage. This is what appears on the page or post type that the custom fields are assigned to:

These gallery pictures can be used with whatever gallery library you fancy. In the this case, I used Slick. Here is the code used to loop through the images and display them:


<?php $images = get_field('gallery'); ?>

<?php if( $images ): ?>

   <?php foreach( $images as $image ): ?>

      <img src="<?php echo $image['sizes']['large']; ?>" alt="<?php echo $image['alt']; ?>" />

   <?php endforeach; ?>

<?php endif; ?>

The “large” can be switched out with whatever size is needed (these are the sizes that WordPress creates when a new image is uploaded). Now, for the radio button used to determine what shows up on the homepage, it’s important to make sure that values are added to it so that there is something to check, like this:

Here’s the code used to perform the check:


<?php if(get_field('feature') == 'Yes') { ?>

   // Your code here

<?php } ?>

<?php endwhile; ?>

Locations or Team Members

I’m going to lump these two together because they can be very similar, but the idea is creating custom fields for contact information like phone numbers, email addresses, and mailing addresses. I began doing this regularly when I started using schema markup for mailing addresses (for SEO purposes) and I wanted a way for clients to update their information, but not break or erase the schema markup. First, I would create a custom post type for the location (or team member) and then assign custom fields to them. It may look something like this:

The code, including the schema markup, can look something like this:


<div class="location">
   <h3><?php the_field('company'); ?></h3>
   <address itemscope itemtype="http://schema.org/PostalAddress">
      <div itemprop="streetAddress"><?php the_field('address'); ?></div>
      <div>
         <span itemprop="addressLocality"><?php the_field('city'); ?></span>,
         <span itemprop="addressRegion"><?php the_field('state'); ?></span>
         <span itemprop="postalCode"><?php the_field('zip'); ?></span>
      </div>
   </address>
   <a itemprop="email" href="mailto:<?php the_field('email'); ?>"><?php the_field('email'); ?></a>
   <a itemprop="telephone" href="tel:<?php the_field('mobile'); ?>"><?php the_field('mobile'); ?></a>
   <a itemprop="telephone" href="tel:<?php the_field('phone'); ?>"><?php the_field('phone'); ?></a>
</div>

Homepage Subsections

When I built my own portfolio website, I wanted it to be a one-page site, but I wanted to have multiple sections with content that I could edit all in one place. At the same time, I wanted it to be neat and organized so I could find what I wanted to edit quickly and easily. This can be done by using the “Tabs” custom field. All this does is group everything underneath it into a separate tab. It looks something like this:

This is just a snapshot since it’s a long list of custom fields, but you can see that “First CTA”, “About” and “Nerd Cred” are tabs. Everything underneath them are groups. When there is a new tab, a new grouping begins. On the page or post type it’s assigned to, it will look something like this: