I’m a big fan of the Advanced custom fields plugin. Not only is it extremely flexible it also handles the job of many plugins in one package so it reduces the need for excess plugins (because you should always keep plugins to a minimum). The code it produces is light weight and you to have control of your HTML, CSS, and JS eliminating the code bloat of most plugins around. Once you learn the basics you’ll find many creative ways coming to use it to provide custom solutions that fulfil your website requirements. It integrates seamlessly into the WordPress backend UI making updates in WordPress once it is set up. All round it’s a win-win for me.

There are many guides on setting up basic custom fields but here’s a technique that I have developed for creating a clean and simple page builder. Yes, there are many page builders around but from reviewing these do all excess code bloating your site files, they also have many options that make things not only confusing for the end user making updates but can allow for updates that neglect a style guide and go “off-brand”. I’m a firm believer in brand consistency so this is an issue.

Custom Coded – Getting your hands dirty.

This technique uses the flexible content feature, which is similar to the repeater, this allows us to add multiple (and varied) content layouts that are custom to the project requirements and give you control over the output HTML and CSS.

First of all, let’s look at how I’ve set up the flexible content repeater within WordPress and how the final result.

Here’s the code to get this into the template:

<?php
// loop through the rows of data
while ( have_rows('multi_content') ) : the_row();
if( get_row_layout() == 'single_column' ):
?><hr><div class="single"><?php the_sub_field('single_text_area'); ?></div><?php
endif;if( get_row_layout() == 'double_column' ):
?><hr><div class="columnOneHalf"><?php the_sub_field('content_left'); ?></div><?php
?><div class="columnOneHalf NoEndSpace"><?php the_sub_field('content_right'); ?></div><?php
?></div><?php
endif;if( get_row_layout() == 'tripple_column' ):
?><hr><div class="columnOneThird"><?php the_sub_field('content_left'); ?></div><?php
?><div class="columnOneThird"><?php the_sub_field('content_middle'); ?></div><?php
?><div class="columnOneThird NoEndSpace"><?php the_sub_field('content_right');?></div><?php
?></div><?php
if( get_row_layout() == 'spacer' ):
?><div class="lineSpace"><?php the_sub_field('line_space'); ?></div><?php
endif;endwhile; ?>

The CSS:

The CSS can be styled as you like, for the example shown above, I’ll keep things pretty simple and lightweight:

.columnOneHalf, .columnOneThird { width: 96%; margin: 2%; }
@media only screen and (min-width: 768px) {
.columnOneHalf { width: 48%; margin-right: 4%; float: left; }
.columnOneThird { width: 31.3%; margin-right: 2%; float: left; }
.NoEndSpace { margin-right: 0;}
}

Generated WordPress Code – ACF Theme Code Pro

If you are looking for an easier way to work with custom WordPress themes, or intended to use Advanced Custom Fields regularly you’re in for a treat. There is another plugin that can be added to your site to automatically generate your template code, along with conditional statements and anything you can think of.

That plugin is ACF Theme Code Pro and it is really easy to use, best of all once you have finished setting up your custom templates and fields, you can remove ACF Theme Code Pro which allows you to keep your plugins to a minimum. While this is a premium plugin, it’s well worth the investment if you take WordPress template customisation seriously.

For more code snippets and examples of what ACF can do for your website, visit the ACF resources page.