Minimizing the back-end development effort with an MVC approach to WordPress theme development using the Timber framework, the Advanced Custom Fields plugin and some magic.
2. Bio.
â Mircea Tihu
â Timisoara, Romania
â Lead Developer @ Dream Production AG
â mircea@dreamproduction.com
3. What is MVC?
â Architectural pattern based on 3 components:
â Model - represents the data
â View - represents the presentation layer
â Controller - represents the logic
4. Why MVC?
â Based on the Separation of concerns
â More structured code
â Reduced code complexity
â Decoupled code
5. 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
8. ACF.
â Allows the users to create extra fields in a very
user-friendly manner
â Has a lot of different field types to be
configured
9. 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
10. 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
11. 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
12. 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
13. 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
14. 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>"
}
15. 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
}
}
16. 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
}
}
}
18. 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.
19. 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.
20. 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