As experience designers, we are usually thinking about how our clients can improve their customers’ experience while continuing to grow. A big part of this effort is focused on the customer journey, but almost as important is examining the client’s internal operations and capabilities. Any solution we arrive at must be aligned with the capabilities of an existing team. This often leads us back to WordPress as a primary marketing platform and a modular page building technique that enables drag-and-drop, component-based page building.

Why WordPress?

WordPress is the content management system of choice for most companies. Its ease of use for content editors and front-end developers makes it practical while an open-source codebase makes it cost-effective for most websites.

WordPress is extremely popular with 30% of the internet run on the CMS (roughly 20 million known sites) and 17 posts are published on WordPress each second. WordPress is also known for an evolving codebase with regular core updates to keep the site secure from malicious code. Along with a good hosting provider, WordPress will be stable and secure for years to come.

Finally, open source code saves on critical development time, makes code maintenance a breeze, and in the case of WordPress it is free to use. A proprietary CMS or marketing platform like HubSpot, on the other hand, can cost thousands to operate while placing restrictions on how we can execute content models.

Why Use A Modular Design System?

Much like WordPress can be extended with plugins, a modular design system is intended to reuse code wherever possible while allowing us to rapidly extend or update existing page components. A developer can code each component once and make updates across every instance from the same place. This can lead to significant cost savings over the long term. In our WordPress execution, components are the building blocks for nearly every page on a site.

Our modular design approach starts with the content model: from user types and roles, page types, post types, and more. We analyze how content is related and how it might be displayed on the site. We then create the design system using a prototyping tool like Framer or Sketch in order to isolate each component that needs to be coded in development.

Practical Results

Our clients love the flexibility and control this system provides their content editors. We lower the skill level necessary to create dynamic content on their website, saving time and significant cost over the long term. With little training, their team can create unlimited site pages without touching a line of code.

Why ACF Pro?

WordPress is somewhat limited out of the box but thanks to plugins like Advanced Custom Fields Pro (ACF) we can create a bespoke user experience for every client. ACF allows our developers to add custom fields to any post type, template, or term, allowing us to rapidly execute complex content models. The plugin is well maintained, exceptionally documented, and even provides support. This means any developer can pick it up and start using it with ease.

ACF Pro provides the necessary flexible content field that we use to create infinite, drag-and-drop subfield groups (our modular components).

How it all works:

  • Create a design system using Sketch or Framer
  • Translate the building blocks into codable components to be exposed to content editors
  • Start coding using the ACF docs:

Within a loop, you can query the current row layout. Then it’s just a simple case of constructing the relevant HTML by using the get_sub_field() and the_sub_field() functions. The flexible content field introduces 2 new functions:

  • get_row_layout()
  • has_sub_field()

Once a component is coded and exposed to content editors it can be used on any page of the site by simply adding the layout to a flexible content region. A content editor then expands the component to reveal any fields that need to be configured at the instance level. This might include a title, text block, or a complex combination of fields which will be automatically formatted on the page.