Modular WordPress with ACF Flexible Content

Many people choose WordPress platform as their content management system because of the elasticity and control it provides. But, it often happens that the only thing the user can actually edit on the page — is the simple content like text or images. Any additional, more advanced changes in the site's structure have to be performed by the web developer. That might cause delays and gives a feel of uncomfortable dependence.

For many years now, Chop-Chop is providing its clients with web development solutions, one of them being the modularity of WordPress themes. Creating modular sites demands a certain type of mindset — you need to stop thinking of a website as a set of subpages and templates, but instead — start thinking of it as a set of modules and the whole system of flexible content that manages them all.

What are modules and what do we earn by using them?

Think of modules as of Lego bricks — you can freely exchange each brick and connect them however you like. Each of your creation will be different, but will also be coherent. By moving this concept to WordPress, you can create a product which allows you to create various layouts without the need to edit a single line of code. Modularity lowers the level of skill necessary to create dynamic content, saves time and allows freedom in creating and modifying the pages.

How does modularity work in practice?

Let's assume we have a ready web page, but we would like to add some more information about our product. With an already existing set of modules, it's really simple - just add a new block, fill it with content and you're done!

How to create a modular WordPress theme?

There are many ways to do this, but for now we'll focus on building modularity using a Flexible Content field. This functionality comes with the Advanced Custom Fields (ACF) plugin for WordPress. If you haven't heard about it, we suggest looking up the official documentation which can be found here.

The whole process consists of 3 stages:

  1. Defining the modules in the WordPess panel using ACF Flexible Content
  2. Coding the modules based on the fields we just created
  3. Building the subpages from the modules.

1. Defining the modules in the WordPess panel using ACF Flexible Content

After installing and activating the ACF PRO plugin, a new "Custom Fields" tab will show in the admin panel.

Click on it and then choose "Add New"

Let's call this group "Flexible Page Content Blocks". Add a new field and set its type to Flexible.

Then we can move on to creating our modules. In order to do this, we need to add a new Layout and define the fields which will be parts of our new module. Here's how the example modules look like. We'll use them on our page later.

This stage is extremely important and very time consuming. It requires a thorough desing analysis and dividing it into independent blocks which will become our modules.

After defining the blocks, the last thing we need to do is to define places in WordPress where we would like to use these fields.

From here on all we need to do is to save these changes by clicking on Update.

2. Coding the modules based on the fields we created

In order for our freshly defined modules to appear in the theme, we need to properly code them. In the previous stage, we chose that the fields should appear on Page Template, so we need to create a page.php file in the theme's catalog.

php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 /** * The flexible page template. * * @package WordPress * @subpackage preview-template * @since 1.0.0 */ get_header(); ?> <main class="main-content"> <?php // Place where we want to display out modules so we will put flexible content logic here ?> </main> <?php get_footer();

Now we need to add the logic, that will be responsible for displaying the theme. ACF Pro Flexible Content documentation helps a lot with it. The key to understanding how Flexible Content works is to understand how a loop works - in each iteration, the code checks which type of layout has been used and the whole logic defined in the layout will be displayed. This is how implementing the aforementioned Hero module looks like.

php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 <?php // check if the flexible content field has rows of data if( have_rows('page_content') ): // loop through the rows of data while ( have_rows('page_content') ) : the_row(); if( get_row_layout() == 'block_hero' ): $background_image = get_sub_field('background_image'); $content = get_sub_field('content'); $cta_button = get_sub_field('cta_button'); // Display content from that module echo $content; endif; // Then we can check if get_row_layout() === other module and display its data endwhile; else : // no layouts found endif; ?>

Of course, the given example is very simplified and can be refined by adding new elements like dividing the layouts into separate files and including them dynamically in the loop. What I presented here is an absolute minimum required to display the Hero module in our theme.

3. Building the subpages from the modules.

Now we can start creating our subpages. In the admin panel, go to Pages and then click Add New. What we should see is the Page Content field we created earlier. We can add our modules here, edit their content and set their position on the page.

Building the subpages from the modules.

During this stage, creating next pages is very simple. We can guarantee that your clients will be extremely content with this solution. Please remember that this method is just one of many ways to achieve modularity in WordPress, but it's definitely the most popular one. However, Wordpress Gutenberg is a great alternative.