I have always been a big fan of Advanced Custom Fields, developed by Elliot Condon. I have been using the basic ACF plugin since at least late 2013, and couldn’t imagine developing for WordPress without it. Recently, I started exploring one of  the ACF Pro features, the Flexible Content Fields. I’ve been very impressed so far with what it has to offer.

For me, it took some time, and in fact expirementation to actually figure out what it was and what potential it had. Perhaps I just had to get out of the paradigm of ‘You add a field on the front-end and the in the code and that’s it’, because flexible content fields enable you to add pretty much any kind of layout.

ACF Flexible Content versus Page Builders

We all have heard about Visual Composer, the Divi theme and its builder, SiteOrigin, just to name a few. Most of these builders are oriented at a non-coder audience: They provide drag-and-drop interfaces, but designers usually never see how bad the code is that is generated by these builders. This makes website unnecessarily slow, and repercussions are also felt in the SEO department.

The focus on the visual aspect is another problem: designers position their texts perfectly, only to find out that the builder doesn’t use media queries to reduce padding for smaller screen sizes (Looking at you, Visual Composer). The more page builders I see, the more wary I grow of them. The exception to the rule so far is Beaver Builder, which doesn’t resolve all the shortcomings of page builders, but is definitely a step in the right direction.

Why using Advanced Custom Fields benefits you

While using ACF versus these page builders may seem restrictive, it actually gives us developers much more freedom to control the output, and enables us to optimize your site to rank properly in Google. For example, we can add Schema Markup to the site (it’s one of the things why using the Genesis Framework gives you such a SEO boost) .

On top of that, you’re providing a much safer environment to the final customer compared to the visual builders. They can change stuff themselves if they like, and if it goes wrong, it is not nearly as disastrous in comparison with some of these visual builders. With flexible content fields, you give them both some of the freedom of the visual builders and the safety of ACF. To me, it’s the best compromise I’ve found so far and customers seem to like it. 

A Simple Example

As mentioned, I only recently started exploring flexible content fields, and I hope to show some more detailed examples of what it can do in the future. I hope that this example clears up some of the confusion I experienced when reading the documentation of this feature.

I basically wanted to create 4 layout options for the custom to chose from, basically varying from full width (within a container) to 4 columns. In case you’re wondering, the example below uses the Genesis Content Columns Classes to create the columns.

<?php
while ( have_rows(‘flexible_content’) ) : the_row();if( get_row_layout() == ‘standard_row_full_width’ ): ?><div class=”fullwidth”><?php the_sub_field(‘full_width’); ?></div><?phpelseif( get_row_layout() == ‘row_2_columns’ ): ?>
<div class=”fullwidth”>
<div class=”one-half first”><?php the_sub_field(‘left_column_2’); ?></div>
<div class=”one-half”><?php the_sub_field(‘right_column_2’); ?></div>
</div><?php
elseif( get_row_layout() == ‘row_3_columns’ ):?><div class=”fullwidth”>
<div class=”one-third first”><?php the_sub_field(‘left_column_3’); ?></div>
<div class=”one-third”><?php the_sub_field(‘center_column_3’); ?></div>
<div class=”one-third”><?php the_sub_field(‘right_column_3’); ?></div>
</div><?php
elseif( get_row_layout() == ‘row_4_columns’ ): ?><div class=”fullwidth”>
<div class=”one-fourth first”><?php the_sub_field(‘left_column_4’); ?></div>
<div class=”one-fourth”><?php the_sub_field(‘center_left_column_4’); ?></div>
<div class=”one-fourth”><?php the_sub_field(‘center_right_column_4’); ?></div>
<div class=”one-fourth”><?php the_sub_field(‘right_column_4’); ?></div>
</div>
<?phpendif;

endwhile;

else :

// no layouts found

endif; ?>

 

Let’s disect the code, it’s pretty straight forward: We have four layouts, labelled standard_row_full_width, row_2_columns , row_3_columns, and row_4_columns. Each will, if called then in turn get the appropriate grid layout, and when selected in WordPress, the user can fill out up to 4 different WYSIWYG fields to fill the row. To the end user, the options will look like this:

flexiblecontent

Options provided by the code above.

flexiblecontent-2Flexible Content Panel when 2 Columns have been selected.

As you can see, Customers editing their own website only touch the content and not all the design specifics. It also provides the possibility to add additional rows to their design if they desire, similar to that of page builders. It provides a much safer environment for them, and it can save us great time as all the content that is added is automatically styled in line with the rest of the content.

 

ACF as configured in this example

Advanced Custom Fields  Flexible Content field configured for the example above. (Click for full resolution)

Final Result

Advanced Custom Fields in combination with the Genesis Framework. 4 Layouts are visible in the picture.

Advanced Custom Fields in combination with the Genesis Framework. 4 Layouts are visible in the picture.

The screenshot above shows all four layouts in action in the Fermin Creative them in 4 separate rows. As you can see, it may not provide the flexibility (yet) that the page builders provide, but this setup results in much better performance, the content is much more easily searchable by search engines, and customers can make edits in a much more straighforward manner in comparison with the page builders. I consider this setup win-win-win, and if you haven’t been using ACF Pro, I definitely recommend that you take a look at it.

Future Exploration

I’m currently already doing some other stuff with the flexible content field to give customers additional flexibility, enabling them to change background colors or add background images. I will probably write another tutorial showing you how much power ACF can provide when you use the previously independent extensions together with each other. One thing is for certain, I have not yet discoverd the full potential that this plugin has to offer!

Leave a Reply

Your email address will not be published. Required fields are marked *