An MVC Approach to WordPress Theme Development

An MVC approach to
WordPress theme
development

Bio.
● Mircea Tihu
● Timisoara, Romania
● Lead Developer @ Dream Production AG
● mircea@dreamproduction.com

What is MVC?
● Architectural pattern based on 3 components:
○ Model - represents the data
○ View - represents the presentation layer
○ Controller - represents the logic

Why MVC?
● Based on the Separation of concerns
● More structured code
● Reduced code complexity
● Decoupled code

Timber.
Timber separates your theme’s code:
● the PHP files focus only on supplying the data
and logic
● A templating engine is used for the
presentation: Twig

Twig.
● PHP template engine
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<ul id="list">
{% for item in list %}
<li><a href="{{ item.href }}">{{ item.label }}</a></li>
{% endfor %}
</ul>
</body>
</html>

WordPress as MVC.
Model Controller View
index.php
<?php
$ctx = Timber::get_context();
$ctx['foo'] = 'Bar!';
$ctx['post'] = new Timber/Post();
Timber::render('single.twig', $ctx);
?>
index.twig
{% extends "base.twig" %}
{% block content %}
<h1 class="big-title">{{foo}}</h1>
<h2>{{post.title}}</h2>
<img src="{{post.thumbnail.src}}" />
<div class="body">
{{post.content}}
</div>
{% endblock %}

ACF.
● Allows the users to create extra fields in a very
user-friendly manner
● Has a lot of different field types to be
configured

The normal approach.
● The content manager / back-end developer configures the
ACF fields
● The back-end developer queries all the necessary data and
appends it to the context variable
● The front-end developer uses the data from the context
variable in the twig template, creates the markup and styles
it

Our approach.
● We’re trying to remove the back-end developer
from this equation
● Do to this we automatically map all the ACF
fields defined into the twig context variable

Our approach.
● Timber has objects defined for each WordPress entity:
○ Posts, Pages, Custom Post Types - TimberPost
○ Categories, Tags, Custom taxonomies - TimberTerm
○ Users - TimberUser
○ Image - TimberImage

Our approach.
● Before a Timber object is instantiated we go through all the
defined fields and verify if they apply to the current object
● On the Timber object we add a new key called fields, where
all the fields that match the criteria for that object are
appended
● All the fields added as theme options are stored on a special
key called options

The fields.
● Text, Textarea, Wysiwyg, Select, Radio, Checkbox - their actual values are added
● For other field types you get the entire set of data
○ Image, Gallery - mapped as TimberImage
○ Post Object - mapped as TimberPost
○ Taxonomy - mapped as TimberTerm
○ User - mapped as TimberUser
○ Repeater, Flexible Content - mapped as arrays containing actual values or
Timber objects

The fields. Text. Wysiwyg.
array(2) {
["text_field"]=> string(26) "Lorem ipsum
dolor sit amet"
["wysiwyg_field"]=> string(328) "<p>Lorem
ipsum dolor sit amet, consectetur adipiscing
elit. Suspendisse lobortis, tortor ut
elementum imperdiet, turpis sem ultricies
erat, quis mattis nibh mauris nec ante. Nunc
quis viverra dolor.</p>
<p>Mauris aliquam magna a convallis pretium.
Duis ultricies viverra ornare. Donec
suscipit risus lacinia luctus iaculis.</p>"
}

The fields. Image.
array(1) {
["image_field"]=>
object(TimberImage)#1008 (47) {
["object_type"]=> string(5) "image"
["post_title"]=> string(4) "test"
["id"]=> int(222)
["sizes"]=> array(3) {
...
}
...
// Additional methods to get the src and
// the srcset
}
}

The fields. Post Object.
Fields defined on the New post post
array(2) {
["text_field"]=> string(18) "Text field
content"
["post_field"]=>
object(TimberPost)#968 (86) {
["ID"]=> int(119)
["post_content"]=> string(0) ""
["post_title"]=> string(8) "New post"
["post_type"]=> string(4) "post"
["fields"]=> array(2) {
["text_field"]=> string(26) "Lorem
ipsum dolor sit amet"
["post_field"]=> NULL
}
}
}

The fields. Repeater.
array(1) {
["repeater_field"]=> array(3) {
[0]=> array(2) {
["text_field_1"]=> string(26) "Lorem ipsum
dolor sit amet"
["text_field_2"]=> string(27) "consectetur
adipiscing elit"
}
[1]=> array(2) {
["text_field_1"]=> string(25) "Quisque
posuere dui velit"
["text_field_2"]=> string(29) "quis egestas
libero malesuada"
}
[2]=> array(2) {
["text_field_1"]=> string(19) "Mauris
auctor augue"
["text_field_2"]=> string(22) "vitae diam
consectetur"
}
}
}

Challenges. Field caching.
While processing the fields for a certain object we need to go
through all the field groups defined in ACF.
Solution: Store the ids of the fields for each WordPress entity.

Challenges. Infinite Loops.
If Post A has a reference to Post B and Post B has a reference
back to Post A, while retrieving the fields we would find
ourselves in an infinite loop.
Solution: If an object is already appended to the data variable,
we append an empty array instead of the actual object.

Summary.
● Timber
● ACF
● For basic website templates the work of the back-end
developers can be almost completely replaced by the work
of content managers and front-end developers

An MVC Approach to WordPress Theme Development

Recommandé

Recommandé

Contenu connexe

Similaire à An MVC Approach to WordPress Theme Development

Similaire à An MVC Approach to WordPress Theme Development (20)

Dernier

Dernier (20)

An MVC Approach to WordPress Theme Development