Modular Web Design Meets WordPress with Advanced Custom Fields
Modular web design is comprised of two types of patterns — Content Patterns and Display Patterns — and WordPress has been the perfect tool for me to put them together.
Let’s understand how each of these work…
Content Patterns
Content comes in many different forms & types. Each format has specific attributes that need to be communicated. For example, an event may have a registration date, a max capacity, etc. A business listing should let their customers know when the business hours are and how to get ahold of them.
CMS’s have been getting a bad rep for not being flexible enough to handle all these different Content Patterns. They generally are regarded as this single box that you throw content into. For those of us who have a deeper understanding of what’s possible and actually very obtainable without a ton of extra effort. WordPress has — built into it — custom post types & custom fields. These two features are exactly what you need to handle Content Patterns effectively.
Moving Beyond Pages & Posts
Custom post types provide a way to identify and group each Content Pattern. If you’ve ever used a plugin to manage events, a portfolio of work, points on a map… you name it, it’s probably been done. This is all possible thanks to custom post types. And in many cases, you need a way to group these lil’ nuggets of joy into subsections. For this, we’ll look to custom taxonomies. And while it pays to be a PHP wiz, you don’t need to have any magic powers to take advantage of these handy features. The awesome team at WebDevStudios have created a badass plugin called CPT UI to make it easy for anyone to build these out.
Custom Fields
In order to create an authoring process that aligns with the structure of your content, you need the right kind of inputs for each attributes. That’s what custom fields are for. Sure, you can code these by hand, but why go through that hassle, when Elliot Condon has made our lives sooo much easier with Advanced Custom Fields (PRO) ❤. ACF Pro’s Flexible Content field enables us to break out of the rigidity of templates and enter into a powerful mode of building pages in a modular way.
Here’s how it works
For each field group that you designate for your post type, you can define your own ‘layout’. A layout let you define your own post-type-specific modules.
Each module(“layout”) has a set of fields that you define.
For each field, you have a number of formats to choose from.
The ‘Flexible Content’ field allows you have build one modular after another.
Resulting in a very flexible process for building pages for any kind of content.
Theming with Advanced Custom Fields
To connect this back to the front-end, you’ll need to follow the excellent ACF Documentation to build these fields into your templates.
This example checks for a value in the field and if the field is populated, it then renders the content from the field.
Through a handful of nested conditionals, you can build out a more complex page builder. See the full example.
This is only one of many methods to build a webpage in a modular way, but it’s become my favorite. I hope that you can take this and riff on it, tear it apart and make something cool. Let me know where you land and let’s build something.