Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

An MVC Approach to WordPress Theme Development


Published on

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.

Published in: Technology
  • Überprüfen Sie die Quelle ⇒ ⇐ . Diese Seite hat mir geholfen, eine Diplomarbeit zu schreiben.
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

An MVC Approach to WordPress Theme Development

  1. 1. An MVC approach to WordPress theme development
  2. 2. Bio. ● Mircea Tihu ● Timisoara, Romania ● Lead Developer @ Dream Production AG ●
  3. 3. What is MVC? ● Architectural pattern based on 3 components: ○ Model - represents the data ○ View - represents the presentation layer ○ Controller - represents the logic
  4. 4. Why MVC? ● Based on the Separation of concerns ● More structured code ● Reduced code complexity ● Decoupled code
  5. 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
  6. 6. 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>
  7. 7. 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 %}
  8. 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. 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. 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. 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. 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. 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. 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. 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. 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 } } }
  17. 17. 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" } } }
  18. 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. 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. 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
  21. 21. Questions?
  22. 22. Thank you!