I’ll be presenting a workshop covering these case studies and doing a walkthrough of the process of adding Custom Fields and incorporating them into your theme on January 4th at the North East Ohio WordPress Meetup

The Advanced Custom Fields plugin (ACF) has become an essential tool in how I set up a publishing workflow for self-service clients who aren’t proficient in HTML. In my early days of WordPress development, I would provide my clients with code snippets that explained how to apply them to portions of their content that required specific styling. This would inevitably result in emails requesting technical support when the code was not properly formatted; one missing closing div tag and the whole page would break.

This year I discovered how to avoid these problems by using ACF to simplify the backend and maintain tighter control over the frontend. Here are a few examples of how I have used the plugin for my clients.

BKDigicon’s Faculty Profiles

The Brooklyn Digital Conservatory has an ever growing list of faculty members that are featured on their site. Each member has their own page which displays the following content:

  • Professional Title
  • Biography
  • Links to their website and social media platforms

When I first built the site, I developed a template page that was constructed entirely in the primary content field of the page. The administrator would copy the content from an existing profile, paste it into a new one, and modify as necessary. This ended up being difficult for the client to maintain, as well as challenging to document properly and provide support efficiently.

I recently revamped the profiles to leverage ACF, and significantly simplified the publishing workflow. Here is how the profiles are set up now:

Step One: Create a Custom Page Template

I made a copy of the theme’s page template, saved it as ‘faculty-profile.php’, and identified it as a new page template to WordPress by placing the following code at the top of the page:

// Template Name: Faculty Profile

Step Two: Add a new Field Group

I created a new Field Group in ACF named “Faculty” and added in all of the custom fields that a faculty member would need:

I then set up a display rule for the field group so that the group would only display if the page template was set to “Faculty Profile”, since that is the only page type these fields would be relevant to.

Step Three: Displaying the Field Data

Now that I had defined my fields, it was time to add them into the template I had created. Initially I coded and styled static data to nail down the HTML and CSS, then added in the appropriate conditions so that each link type would only display if the field was populated with content. Here is final code for the external links using my ACF setup:

<?php if(get_field('faculty_twitter') || get_field('faculty_facebook') || get_field('faculty_soundcloud') || get_field('faculty_youtube') || get_field('faculty_website')): ?>
<div class="faculty-profile-links">
<ul>
<?php if(get_field('faculty_website')): ?>
<li><a href="<?php the_field('faculty_website'); ?>" target="_blank" title="Website"><span class="fa fa-link"></span><span class="link-label">Website</span></a></li>
<?php endif; ?>
<?php if(get_field('faculty_soundcloud')): ?>
<li><a href="<?php the_field('faculty_soundcloud'); ?>" target="_blank" title="Soundcloud"><span class="fa fa-soundcloud"></span><span class="link-label">Soundcloud</span></a></li>
<?php endif; ?>
<?php if(get_field('faculty_youtube')): ?>
<li><a href="<?php the_field('faculty_youtube'); ?>" target="_blank" title="Youtube Channel"><span class="fa fa-youtube"></span><span class="link-label">Youtube</span></a></li>
<?php endif; ?>
<?php if(get_field('faculty_facebook')): ?>
<li><a href="<?php the_field('faculty_facebook'); ?>" target="_blank" title="Facebook"><span class="fa fa-facebook"></span><span class="link-label">Facebook</span></a></li>
<?php endif; ?>
<?php if(get_field('faculty_twitter')): ?>
<li><a href="<?php the_field('faculty_twitter'); ?>" target="_blank" title="Twitter"><span class="fa fa-twitter"></span><span class="link-label">Twitter</span></a></li>
<?php endif; ?>
</ul>
</div>
<?php endif; ?>

Here’s how it all maps out from the back to the front:

Now instead of having to edit a complex HTML template inside the page’s content, all my client has to do is set the page template to “Faculty Profile”, and add the url for each link type. The primary content is now only used for their bio, with only basic formatting required (bolding, links, etc.). This also means that I will not have to go back and strip out all of the HTML formatting, should the client seek to redesign the site in the future.


B3Sci Custom Product Data

Blahblahblah Science is a music blog and label built with WooCommerce, with a somewhat complex product page template. WooCommerce’s standard fields were able to isolate some of the data without customization, and ACF was able to handle the rest.

Each product has a release date, and the “Date Picker” field came in handy for this one. Using this instead of a simple text field ensured that the date would be consistently formatted, as well as allow for all products to be sorted on the shop and catalog page using this data.

All of the other fields would be optional, but each type required special handling on the front end. The simplest fields to add in were the Release and Press info, which just had to be pre-pended into the contents of the “Additional Info” tab in WooCommerce’s additional-info.php template.

For digital downloads, the client wanted persistent links to purchase from the following digital vendors: iTunes, Spotify, Amazon, and eMusic. However, if no data is entered in any of these fields, the links needed to fallback to searching for the artist using each vendor’s unique query method. For all but iTunes, this was a simple matter of appending the artist’s name to a query string (i.e. https://play.spotify.com/search/Artist+Name), but for iTunes it was necessary to use their API to query via JavaScript and then add the link via a callback function once their service returned the data.

The next challenge was adding in supplemental media for Soundcloud and Youtube. In both cases, I opted to use ACF’s multi-line text area, and PHP to parse each line into a separate embed. This allowed the client to add as many embeds as they wanted using a single field. Soundcloud tracks were to be displayed in the primary description area of the product and Youtube videos were placed in a custom tab at the bottom of the product page.

To add the Youtube videos I customized the WooCommerce template “tabs.php” with the following code:

Add a Video Tab if the youtube_product field is not empty:

<?php if(get_field('youtube_product')): ?>
<li class="video_tab" id="tab-video-btn">
<a href="#tab-video">Video</a>
</li>
<?php endif; ?>

Break the field data into an array using line breaks as delimiters, and run a WordPress shortcode to convert the urls into embedded videos:

<?php if(get_field('youtube_product')): ?>
<div class="woocommerce-Tabs-panel woocommerce-Tabs-panel--video panel entry-content wc-tab" id="tab-video">
<?php
$youtube_links = explode("\n", get_field('youtube_product'));
foreach($youtube_links as $key => $value){
echo do_shortcode('[youtube width="100%" height="420"]'.$value.'[/youtube]');
}
?>
</div>
<?php endif; ?>

The end result: