5 Steps to Ideal Web Layouts with WordPress and Advanced Custom Fields

Raymond Brigleb
Apr 26, 2016 · 5 min read

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.

Image for post
Image for post
Your custom fields should be this friendly!

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.)

Image for post
Image for post
Users get a very intuitive interface for adding blocks of content.

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') ): ?>
<div class="content_blocks">
<? while ( have_rows('content_blocks') ) : the_row();
get_template_part( 'layouts/content_blocks', get_row_layout() );
endwhile; ?>
</div>
<?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>
</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:

  .content_blocks {
.intro {
position: relative;
h2 {
text-align: center;
width: 50%;
left: 25%;
bottom: 25%;
color: white;
font-family: Memphis-Lig, sans-serif;
font-size: 32px;
position: absolute;
z-index: 4;
text-shadow: 0px 1px 3px rgba(0, 0, 0, .33);
}
.photo {
width: 100%;
min-height: 50vmax;
background: {
size: cover;
repeat: no-repeat;
position: center;
}
}

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.

Needmore Notes

Thoughts on design, marketing, media and business, from the…

Raymond Brigleb

Written by

Designer in Portland, Oregon. Wife Kandace, daughters Zoë and Greta. Partner at Needmore Designs, and eternal optimist.

Needmore Notes

Thoughts on design, marketing, media and business, from the folks at Needmore Designs in Portland, Oregon.

Raymond Brigleb

Written by

Designer in Portland, Oregon. Wife Kandace, daughters Zoë and Greta. Partner at Needmore Designs, and eternal optimist.

Needmore Notes

Thoughts on design, marketing, media and business, from the folks at Needmore Designs in Portland, Oregon.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store