1 of 47

Componentizer

A tiny MVC for WordPress components

2 of 47

Davo Hynds

  • Freelance Developer�
  • Developer at Mightybytes�
  • Globetrotter

3 of 47

A Certified B Corporation and one of Illinois’ first legal Benefit Corporations, Mightybytes is a digital firm committed to creating positive environmental and social change while providing unparalleled support to our clients.

4 of 47

Itinerary

Why did I build Componentizer?

  • Why did I build Componentizer?
  • What is Componentizer?
  • How do I use Componentizer?
    • Theming
    • Models
    • Controllers
    • Views
    • Admins/Editors
  • Caveats

5 of 47

The Challenge

Full comps for each template was unwieldy and time consuming

6 of 47

Our Approach

Breaking down templates into modularized components.

Inspiration from Atomic Design and Object Orient Design

http://bradfrost.com/blog/post/atomic-web-design/

7 of 47

It worked! Kind of...

8 of 47

Another Problem

Inflexibility led to unmet expectations for CMS admins

9 of 47

MOAR PROBLEMS

  • Not all pages have all components
  • Components varied in presentation
  • Some components should have positioning constraints

But... �WordPress themes are template driven

10 of 47

Introducing: Componentizer

11 of 47

Itinerary

What is Componentizer?

  • Why did I build Componentizer?
  • What is Componentizer?
  • How do I use Componentizer?
    • Theming
    • Models
    • Controllers
    • Views
    • Admins/Editors
  • Caveats

12 of 47

What is Componentizer?

Componentizer is a tiny MVC for components, allowing users to create and rearrange components at will.

Componentizer makes use of the WordPress template hierarchy, making it easy to customize the design of components depending on their context.

Componentizer is a plugin.

13 of 47

DRY

Don’t Repeat Yourself

Don’t Repeat Yourself

Don’t Repeat Yourself

14 of 47

Extendable

Models & Views

15 of 47

How does it work?

Model

Advanced Custom Fields Pro

View

Timber Library (uses the twig templating engine)

Controller

Componentizer and theme

Routing

Componentizer (based on the WordPress template hierarchy)

16 of 47

Dependencies

Plugins:

  • Advanced Custom Fields PRO 5.0 or higher
  • Timber Library 1.0 or higher

Also:

  • PHP 5.5 or higher
  • WordPress 3.4.0 or higher

17 of 47

Template Hierarchy

18 of 47

Template Hierarchy

  • index.php
    • archive.php
      • date.php
      • author.php
      • category.php
      • tag.php
    • singular.php
      • single.php
        • single-post-type.php
      • page.php
        • custom-template.php
        • front-page.php
    • home.php
    • 404.php
    • search.php

19 of 47

Template Hierarchy

  • index.php
    • archive.php
      • date.php
      • author.php
      • category.php
      • tag.php
    • singular.php
      • single.php
        • single-post-type.php
      • page.php
        • custom-template.php
        • front-page.php
    • home.php
    • 404.php
    • search.php

20 of 47

Themes

The old way

  • styles.css
  • functions.php
  • index.php
  • custom-template.php
  • archive.php
  • date.php
  • author.php
  • category.php
  • tag.php
  • singular.php
  • single.php
  • single-post-type.php
  • page.php
  • front-page.php
  • home.php
  • 404.php

21 of 47

Themes

The Componentizer way

  • styles.css
  • functions.php
  • index.php
  • custom-template.php
  • controllers/
    • content.php
    • content-page.php
    • page_header.php
    • page_header-front-page.php
    • post_meta.php
  • views/
    • content.twig
    • content-page.twig
    • page_header.twig
    • page_header-front-page.twig
    • post_meta.twig

22 of 47

Componentizer Suffixes

  • index
    • archive
      • author
      • category
      • tag
      • taxonomy
        • taxonomy-[custom-taxonomy]
      • archive-[post-type]
    • singular
      • single
        • single-[post-type]
      • page
        • template-[custom-template]
        • front-page
    • home
    • 404
    • search

23 of 47

Componentizer Suffixes

  • index
    • archive
      • author
      • category
      • tag
      • taxonomy
        • taxonomy-[custom-taxonomy]
      • archive-[post-type]
    • singular
      • single
        • single-[post-type]
      • page
        • template-[custom-template]
        • front-page
    • home
    • 404
    • search

24 of 47

Flow

User requests a page

Post’s components

Component

Controller

View

  • index
    • archive
      • author
      • category
      • tag
      • taxonomy
      • archive-post
    • singular
      • single
        • single-post
      • page
        • template-custom
        • front-page
    • home
    • 404
    • search
  • index
    • archive
      • author
      • category
      • tag
      • taxonomy
      • archive-post
    • singular
      • single
        • single-post
      • page
        • template-custom
        • front-page
    • home
    • 404
    • search

25 of 47

Itinerary

How do I use Componentizer?

  • Why did I build Componentizer?
  • What is Componentizer?
  • How do I use Componentizer?
    • Theming
    • Models
    • Controllers
    • Views
    • Admins/Editors
  • Caveats

26 of 47

Code, please.

Simply put, Componentizer allows you to replace the loop on every template file with:

27 of 47

Example: Page Header

28 of 47

Model Layer

29 of 47

Example: Page Header: ACF Fields

30 of 47

Controller Layer

31 of 47

Example: Page Header: Controllers

page_header-post.php

page_header.php

Renders: page_header-post.twig

Renders: page_header.twig

32 of 47

Example: Page Header: Controllers

page_header-post.php

page_header.php

Renders: page_header-post.twig

Renders: page_header.twig

33 of 47

Example: Page Header: Controllers

page_header-post.php

page_header.php

Renders: page_header-post.twig

Renders: page_header.twig

34 of 47

Example: Page Header: Controllers

page_header-post.php

page_header.php

Renders: page_header-post.twig

Renders: page_header.twig

35 of 47

View Layer

36 of 47

Example: Page Header: Views

Renders: page_header-post.twig

Renders: page_header.twig

37 of 47

Admins/Editors

38 of 47

Field Groups

  • Set which field groups are components
  • Set the base component (controller) for each field group
  • Designate a location

39 of 47

Locations

  • Specify the order for top & bottom components

40 of 47

Advanced

  • Designate the controllers path in your theme
  • Exclude post types from Componentizer

41 of 47

Site Editors

  • Sortable components can be dragged & dropped

42 of 47

Itinerary

Caveats

  • Why did I build Componentizer?
  • What is Componentizer?
  • How do I use Componentizer?
    • Theming
    • Models
    • Controllers
    • Views
    • Admins/Editors
  • Caveats

43 of 47

No default editor, the_content();

Wha??? Why?

  • Not part of ACF
  • Massive performance costs when searching ACF data (10x)
  • the_excerpt();

Cos I said so

  • Use ACF should drive your data level (create a “Plain Content” component)
  • Exclude posts from using Componentizer, and create template files for them like you would normally.

44 of 47

Custom Page Templates

45 of 47

In summary

46 of 47

Flow

User requests a page

$components->build();

Post’s components (ACF)

Component

Controller

View

  • index
    • archive
      • author
      • category
      • tag
      • taxonomy
      • archive-post
    • singular
      • single
        • single-post
      • page
        • template-custom
        • front-page
    • home
    • 404
    • search
  • index
    • archive
      • author
      • category
      • tag
      • taxonomy
      • archive-post
    • singular
      • single
        • single-post
      • page
        • template-custom
        • front-page
    • home
    • 404
    • search

47 of 47

git clone https://github.com/dbhynds/componentizer.git

​

Questions?

Componentizer�https://github.com/dbhynds/componentizer

Davo Hynds�https://www.davohynds.com

Mightybytes�http://www.mightybytes.com