5 Steps to Ideal Web Layouts with WordPress and Advanced Custom Fields
By implementing a few critical tips, one can create a solid, flexible custom content management setup for their WordPress website using Advanced Custom Fields (ACF).
Why ACF? The plain old content editor in WordPress is suprisingly limiting. And, full-blown content builders have a host of issues of their own.
This is a balanced middle ground that can be added bit-by-bit to existing sites or utilized on new builds to create flexible, well-designed, drag-and-drop layouts.
1. Begin by creating a page for the blocks
This all starts with a blank page. Create a generic page template in WordPress or choose an existing website page to act as your canvas.
The decision you make here isn’t critical. Down the road, you can make further decisions about allowing your ACF fields to be used on just the one page, certain types of pages, all pages, or whatever makes sense to your design.
2. Set up your ACF field group and layouts
Set up your ACF field group (this consists of a single Flexible Content type field).
Then, add individual layouts for all of the possible types of content blocks you want users to be able to add. For example: sliders, intros, photos with text, and so on. (We often determine what layouts we will need by looking at a sketch or mockup and thinking about each of the unique layouts.)
You then tell the field group to only show on your particular page or template. They then appear as options when editing those pages.
If the ACF fields are going to take the place of the regular content editor interface completely, one can even make them the only option on the page for content entry. To do this, check the Content Editor box and hide it from the page. This makes for a straightforward editing experience.
3. Add code to your page template to load content
By default, your page isn’t going to show the ACF content entered. You’ll need to add a bit of code to the page template.
<?php // loop through content_blocks, loading templates as appropriate
if( have_rows('content_blocks') ): ?>
<? while ( have_rows('content_blocks') ) : the_row();
get_template_part( 'layouts/content_blocks', get_row_layout() );
<?php endif; ?>
…and make it look nice!
4. Create individual partial layouts
Once content is loading, you’ll create individual partial layouts. This is an example of my /layouts/content_blocks-intro.php file, for the intro layout I created:
<?php // This is the Intro block
$heading = get_sub_field('heading');
$image = get_sub_field('image');
$background_color = get_sub_field('background_color');
$foreground_color = get_sub_field('foreground_color');
?> <div class="intro">
<h2><?php echo $heading; ?></h2>
<div class="photo" style="background-image: url('<?php echo $image['sizes']['large']; ?>'); background-color: <?php echo $background_color; ?>;"></div>
In this example, I have a /layouts folder in my theme. Since my Field Group in ACF is called content_blocks, I preface each of the template partials in that folder with those words in case I add others later.
Creating partial layouts is simplified by turning on the ACF JSON feature and referring to the text file it spits out for the details of the layouts. This has the added bonus of allowing you keep your fields in the same version control system you’d keep your code in, making a handy backup and reference.
5. Style each block appropriately
With the layouts in place, youll see the content for each block on your website regardless of what order they are in or how many times they are repeated, but they won’t be styled.
Styling is the next and final step. Since I use Sass, I tend to have a large number of partial style sheets that are automatically built into one. This makes it easy to nest style rules in a single file that defines styles for all these content blocks.
Here is a sample of the beginning of this one:
font-family: Memphis-Lig, sans-serif;
text-shadow: 0px 1px 3px rgba(0, 0, 0, .33);
This continues for some time, but the take-away is that it’s all wrapped by the class content_blocks. This confirms that all of the rules will only affect my content blocks defined. Below that, I refer to the intro class, which holds style rules to be applied to just that layout, and so on.
With styles in place, we now have a flexible page builder with well-designed, drag-and-drop layouts.
Let’s get this party started
As you can see, there is a happy middle ground between buying a random theme and writing everything from scratch. Working with ACF in this way is a dream. You’ve got the same content block name, from ACF to template files to style rules. The organization is superb and adding new layouts is a breeze.
More importantly, the design remains solid and evolves with website needs and is impossible to break which is why we’re sold on flexible page layouts for our projects. Perhaps you’ll find they are a good fit for you, too.