1. The Modular Web For WordPress
Stop thinking about a website as a collection of pages and templates,
but as a system of modules.
WordCamp Asheville 2017 - 3 June 2017

2. Introductions
Evan Mullins
Lead Web Developer at
Brown Bag Marketing in ATL
@circlecube
circlecube.com
WordPress user since 2006
Full-time web developer since 2007
Slides at https://circlecube.com/does-wordpress/

3. Presentation Abstract
Stop thinking about a website as a collection of pages and templates, but as a set of
modules and a system to manage them. Modules, like Legos, are interchangeable and
can be combined to create an infinite number of results. Harnessing these modules
with our trusty CMS, they each fit neatly into the system while also being unique. With
this modular paradigm shift, our workflows improve, our websites improve and our
very well-being improves.
Let’s explore how to use WordPress to manage site content using modules. We’ll see
what this does for our development process and programming as well for our content
management via the admin. We’ll discuss how to build and maintain a module library,
and use it for every site you build. These principles have been immensely helpful in
each team or project where I’ve put them into practice, so we’ll even take a look at a
few examples and point out where to learn more.

4. Outline
The Page Mindset & Modular Paradigm Shift
The Modular Approach
How Modular Affects the Process
Incorporating Modular with WordPress

5. The Page Mindset

6. Design Web Pages or Templates
Have you ever done an estimate for a site with X unique templates?
Been excited about the flexibility of building unique templates as needed?
Build 13 different templates, then have to make each of 13 templates responsive?
Scope creep?
Realize that templates are a bit restrictive and end up with files like
template-7b_3.php or template-no-sidebar-secondary-sidebar.php

7. TEMPLATE
BLOAT

8. TOO
HEAVY

9. The Paradigm

10. The Paradigm Shift

11. Modular Paradigm Shift
Explain the modular approach
Theory
Pattern Libraries - shared system for sites
Process (for agencies)

12. Andy Clarke, Walls Come Tumbling Down 2009

13. Stephen Hay, Responsive Design Workflow

14. Modules, not pages
The traditional way to handle complexity
in programming is to break large complex
things into smaller well-formed
“modules”. Focusing on creating healthy
front-end modules instead of complete
pages can help break complex page
layouts into reusable solutions. This
proved to be true working on the
Microsoft.com homepage.
Dave Rupert, Responsive Deliverables

15. As many of us move away from designing pages toward
designing systems, one concept keeps cropping up:
modularity. We often hear about the benefits of a modular
approach; modules are scalable, replaceable, reusable, easy
to test, quick to put together—
“They’re just like LEGO!”
Alla Kholmatova - The Language of Modular Design

16. LEGGO
MY
LEGO

18. How Modular Content Works
Rather than one open content area — in which you could put
text and images using a WYSIWYG — or a template that has
pre-determined text and media “buckets,” modular content
allows you to add any content — text or media — in blocks. It
supports building pages ad-hoc, adding text and media as you
need it in a variety of combinations. After you’ve stacked a bunch
of these content blocks, you can re-sort them any way you like.
It’s basically content Legos.
Charlotte Jackson, From Pages to Patterns

19. Christopher Butler
Newfangled Web
The Way You Design Content is About to Change

20. Christopher Butler
Newfangled Web
The Way You Design Content is About to Change

21. #IRL
In WordPress
Examples
Demo

23. Going from designs to modules.
Journey of a Module

24. Dogfooding

25. Advanced
Custom
Fields
ACF Pro:
Flexible
Content

26. Modules in Practice
modules field group with
modules flexible content field.

27. Each module is a
flexible content
layout.
Sub-fields are
properties specific
to each module.

28. Add
modules!

29. Configure
modules.

30. Rendered Module

31. Module Code
Billboard module:
acf-json/acf-modules.json
template-parts/module-billboard.php
module-billboard.js
_billboard.scss

32. Work Smarter

33. Project Gutenberg

34. Pattern Library

35. A Module Gallery

36. Thank You!
Questions?
Slides available at https://circlecube.com/does-wordpress/