ACF – theme code helper

Like many WordPress developers, there isn’t a day goes by where I don’t use Advanced Custom Fields by Elliot Condon.

UPDATE: Check out the awesome job done by Aaron and Ben from hookturn.io on their plugin ACF Theme Code.

This powerful plugin is beautifully made. It gives website Administrators easy to use and intuitive UI admin panels for custom fields which can be used throughout the admin interface.

I use the text, image, gallery and repeater fields all the time when coding custom WordPress themes. To the extent that I find myself writing the same code over and over and over again.

For example, the following code is a simple image field.

<?php if($profile = get_field('profile')) : ?>
<img src="<?php echo $profile['url']; ?>" alt="<?php echo $profile['alt']; ?>">
<?php endif; ?>

Or the following code is for a repeater field which contains two sub fields.

<?php if(get_field('links')) : ?>
<ul class="list">
<?php while(has_sub_field('links')) : ?>
<li><a href="<?php the_sub_field('url'); ?>"><?php the_sub_field('label'); ?></li>
<?php endwhile; ?>
</ul>
<?php endif; ?>

So I’ve tried to come up with a solution to help speed up coding themes in this way.

I’m currently part way through coding an ACF extension which will provide a Code Helper panel on the custom field’s definition page. So developers can quickly and easily copy across the code they need after they have finished defining their custom fields.

See preview below. This would begin to get more complicated (but also more useful) for large Flexible Content layout fields.

I would love to hear your feedback.

Preview