While we all know and love Advanced Custom Fields, you may not be aware that there are other tools out there to help you extend what it can do. In fact, there are numerous companion plugins that can put even more power at your fingertips. đź’Ş These third-party offerings can improve your ACF workflow by adding convenience and niche functionality.
Today, we’re going to introduce you to one of our favorite companions – ACF Theme Code. It’s a free plugin (with an ultra-powerful Pro version also available) that takes the pain out of displaying custom fields on your website. Let’s dig in and see what it can do!
Who It’s For and What It Does
Just about anyone who uses ACF can benefit from ACF Theme Code. The plugin’s main purpose is to take a look at your custom fields and generate the appropriate code so you can simply copy and paste into your theme.
As ACF Theme Code co-author Aaron Rutley tells us, “I was solving a pain point for myself. I’d constantly forget field names or the field settings I’d set when defining my fields.”
In that way, the plugin serves as a great time-saver for busy developers. At the same time, it’s also helpful for those of us not fully comfortable writing PHP code, as well.
Even better is that the plugin requires virtually no setup. Just install, activate and navigate over to a Field Group and ACF Theme Code will display code for each supported field type (đź‘Ť Hint: The Pro version handles even more field types).
Ready, Set, Generate
Now that we know a little bit about what ACF Theme Code is, let’s see it in action. We thought a good test would be to create a Hero Slider with Image, Text, Link and a few other Settings as seen in the screenshots below.
After saving our new field group, ACF Theme Code did it’s job and generated all the code for our Hero Slider – and we just couldn’t believe it! Every field was listed in order with the exact code to display it’s value!
ACF Theme code had even taken into consideration the specific Return Type settings we chose for the image, and showed no issue handling our Child Group field! Another nice touch was to see conditional statements around fields that did not return a basic text value.
Here’s a look at the [easy to read, bug free and ready for HTML] generated code 🔥.
Theme Code
<?php if ( have_rows( 'hero' ) ) : ?>
<?php while ( have_rows( 'hero' ) ) : the_row(); ?>
<?php $image = get_sub_field( 'image' ); ?>
<?php if ( $image ) { ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php } ?>
<?php the_sub_field( 'title' ); ?>
<?php the_sub_field( 'sub_title' ); ?>
<?php $link = get_sub_field( 'link' ); ?>
<?php if ( $link ) { ?>
<a href="<?php echo $link['url']; ?>" target="<?php echo $link['target']; ?>"><?php echo $link['title']; ?></a>
<?php } ?>
<?php if ( have_rows( 'settings' ) ) : ?>
<?php while ( have_rows( 'settings' ) ) : the_row(); ?>
<?php the_sub_field( 'alignment' ); ?>
<?php the_sub_field( 'background_color' ); ?>
<?php the_sub_field( 'text_color' ); ?>
<?php endwhile; ?>
<?php endif; ?>
<?php endwhile; ?>
<?php else : ?>
<?php // no rows found ?>
<?php endif; ?>Custom Field Code Made Easier
After using ACF Theme Code for a bit, you start to realize just how much time and energy it can save you. If you’re building a large, complex site with custom fields, it could literally save hours over the course of a project.
Likewise, it removes a major source of stress for those who aren’t PHP experts. You don’t necessarily need to know how to deal with nested repeater fields or the nitty-gritty of post objects in order to utilize them on your site. “We spent a lot of time developing and testing the recursive features of ACF Theme Code. Now it’s much easier for developers to implement large, complex or nested fields in a theme.” says co-author Ben Pearson.
So far, users have been quite happy with ACF Theme Code. Rutley tells us that feedback has been “really positive and many [developers] mentioned how much time our plugin saves.”
As for future plans, Rutley says that new features are being considered, including support for Timber (using the Twig Template Engine). He’s also keen on hearing from users about other features they’d like to see added in.
Our thanks to Aaron Rutley for taking time out to speak with us. If you’d like to give ACF Theme Code a try, you can grab a copy from the WordPress Plugin Repository or visit their official site for more details.
About the Author
Eric Karkovack is a web designer with over two decades of experience. You can visit his business site here. Eric is the author of an eBook: Your Guide to Becoming a Freelance Web Designer. He also has an opinion on just about every subject. You can follow his rants on Twitter @karks88.