Successfully reported this slideshow.

Enhance your WordPress development with Twig and Clarkson - WordCamp Nederland 2016

1

Share

Upcoming SlideShare
WordCamp NL 2016
WordCamp NL 2016
Loading in …3
×
1 of 56
1 of 56

Enhance your WordPress development with Twig and Clarkson - WordCamp Nederland 2016

1

Share

Download to read offline

Video related these slide of my WordCamp Nederland 2016 talk can be found there http://wordpress.tv/2016/10/29/jaime-martinez-enhance-your-wordpress-development-with-twig-and-clarkson/

Here at Level Level we created an Open Source Twig based plugin ‘Clarkson Core’: a template engine with under the hood a collection of Object-oriented WordPress classes and some lightweight handy features.
This, in combination with a basic modern starter-theme and some agreed upon guidelines, contributes to a workflow that keeps comprehensive projects aligned with our technical goals. Meanwhile keeping the WordPress way of development in mind.

Currently every new project runs upon the Clarkson stack resulting in a variety of already delivered websites like Autotaalglas, Elsevier.nl, Kansfonds, SOMO and more. Our goals were to deliver maintainable, high quality and stable code that kept running after every automated deployment without having to hold our breath.

Video related these slide of my WordCamp Nederland 2016 talk can be found there http://wordpress.tv/2016/10/29/jaime-martinez-enhance-your-wordpress-development-with-twig-and-clarkson/

Here at Level Level we created an Open Source Twig based plugin ‘Clarkson Core’: a template engine with under the hood a collection of Object-oriented WordPress classes and some lightweight handy features.
This, in combination with a basic modern starter-theme and some agreed upon guidelines, contributes to a workflow that keeps comprehensive projects aligned with our technical goals. Meanwhile keeping the WordPress way of development in mind.

Currently every new project runs upon the Clarkson stack resulting in a variety of already delivered websites like Autotaalglas, Elsevier.nl, Kansfonds, SOMO and more. Our goals were to deliver maintainable, high quality and stable code that kept running after every automated deployment without having to hold our breath.

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Related Audiobooks

Free with a 14 day trial from Scribd

See all

Enhance your WordPress development with Twig and Clarkson - WordCamp Nederland 2016

  1. 1. ENHANCEyour WordPress development With TWIG and CLARKSON Jaime Martínez
  2. 2. Do you know TWIG?
  3. 3. TWIG?
  4. 4. TWIG? Have you worked with
  5. 5. TWIG?
  6. 6. So what is TWIG?
  7. 7. TWIG?Twig is a modern template engine for PHP.
  8. 8. TWIG? So what is CLARKSON?
  9. 9. Clarkson is a WordPress plugin which encourages writing object-oriented code.
  10. 10. Clarkson is a WordPress plugin which encourages writing object-oriented code.
  11. 11. Clarkson is a WordPress plugin which encourages writing object-oriented code.
  12. 12. What PROBLEM Are we trying to SOLVE?
  13. 13. Better (modern) templating Separation of Concern
  14. 14. Presentation - View Logic - Controller Data access - Model
  15. 15. Presentation - View Logic - Controller Data access - Model
  16. 16. How do I magically register variables?
  17. 17. How do I magically register variables? Menu item a Menu item b ©WCNL Just some footer text - 2015
  18. 18. <footer class="content-info">
 <?php if ( has_nav_menu( 'footer-menu' ) ) { ?>
 <nav class="footer-nav">
 <?php wp_nav_menu(['theme_location' => 'footer-menu']); ?>
 </nav>
 <?php } ?> 
 <?php echo get_option('ll-footer-text') .' - Copyright ' . date('Y');?>
 </footer> get_template_part(‘footer’)
  19. 19. <footer class="content-info">
 {% if ( footer.menu is empty ) %}
 <nav class="footer-nav">
 {{ footer.menu }}
 </nav>
 {% endif %}
 
 {{ footer.text | raw }} 
 </footer> footer.twig
  20. 20. class Footer { function __construct() {
 add_filter( 'clarkson_context_args', array( $this, 'add_context_args' ) );
 }
 function get_text(){
 return get_option('ll-footer-text') .' - Copyright ' . date('Y');
 }
 function add_context_args( $objects ) {
 $objects['footer']['menu'] = wp_nav_menu(['theme_location'=>'footer-menu']);
 $objects['footer']['text'] = $this->get_text();
 return $objects;
 } 
 } footer.php
  21. 21. How do I set up my TEMPLATES?
  22. 22. single.php > single.twig
  23. 23. {% include 'defaults/head.twig' %} <main class="main">
 {% block content %}
 {% include 'partials/content.twig' %}
 {% endblock %}
 </main> <sidebar> {% block sidebar %}
 {% include 'partials/sidebar.twig' %}
 {% endblock %} </sidebar> {% include 'defaults/footer.twig' %} Set up a layout file (layouts/2-columns.twig)
  24. 24. {% extend 'layouts/2-columns.twig' %}
 
 {% block content %} 
 {% include 'post/content.twig' %} {# Or some other custom HTML #}
 {% endblock %} Extend this layout file [single.twig]
  25. 25. Autotaalglas live! Jaime’s talk on WCNL 2016 Prefix - Level Level WCNL JAIME This is a link and this is regular text
  26. 26. Autotaalglas live! Jaime’s talk on WCNL 2016 Prefix - Level Level WCNL JAIME This is a link and this is regular text
  27. 27. <div class="grid-cell"> {% block content %} Default fallback content
 {% endblock %} </div> Global partial file [partials/teaser.twig]
  28. 28. {% extend 'partials/teaser.twig' %} {% block content %} <script type="text/javascript">
 // Some Javascript to load Advertisement
 </script> {% endblock %} Extend this partial [internal-ad/teaser.twig]
  29. 29. How did MODULAR CSS help us? SMACCS / OOCSS / BEM / AtomCSS
  30. 30. Autotaalglas live! Jaime’s talk on WCNL 2016 Prefix - Level Level WCNL JAIME This is a link and this is regular text
  31. 31. Autotaalglas live! Jaime’s talk on WCNL 2016 Prefix - Level Level WCNL This is a link
  32. 32. Autotaalglas live! Jaime’s talk on WCNL 2016 Prefix - Level Level WCNL This is a link grid-cell 1x2 grid-cell 1x1 grid-cell 1x1 grid-cell 2x1
  33. 33. Prefix - Level Level WCNL JAIME This is a link and this is regular text Jaime’s talk on WCNL 2016 Autotaalglas live!
  34. 34. Prefix - Level Level WCNL This is a link Jaime’s talk on WCNL 2016 Autotaalglas live!
  35. 35. Prefix - Level Level WCNL This is a link Jaime’s talk on WCNL 2016 Autotaalglas live! grid-cell 1x2 grid-cell 1x1 grid-cell 1x1 grid-cell 2x1
  36. 36. <div class="grid-cell grid-cell-1x2 grid-cell-post">
 <div class="grid-cell grid-cell-2x1 grid-cell-post">
 <div class="grid-cell grid-cell-1x2 grid-cell-partner-post"> <div class="grid-cell grid-cell-1x1 grid-cell-internal-ad">
 <div class="grid-cell grid-cell-1x1 grid-cell-post">
 <div class="grid-cell grid-cell-1x1 grid-cell-post"> <div class="grid-cell grid-cell-1x2 grid-cell-partner-post"> <div class="grid-cell grid-cell-2x1 grid-cell-internal-ad">
  37. 37. How to work with CUSTOM POST TYPES
  38. 38. Autotaalglas live! Jaime’s talk on WCNL 2016 Prefix - Level Level WCNL JAIME This is a link and this is regular text
  39. 39. Autotaalglas live! Jaime’s talk on WCNL 2016 Prefix - Level Level WCNL This is a link
  40. 40. Autotaalglas live! Jaime’s talk on WCNL 2016 Prefix - Level Level WCNL This is a link POST POST PARTNER POST AD
  41. 41. POST CLARKSON POST POST PARTNER AD
  42. 42. class post extends Clarkson_Post { 
 public function get_grid_size(){ 
 return get_post_meta( $this->get_id(), 'll-grid-size'); 
 }
 } themes/wcnl2016/wordpress-objects/post.php
  43. 43. class ll_partner_post extends post {
 public function get_title() {
 
 $title = parent::get_title();
 $title ="Prefix - " . $title;
 
 return $title; } } themes/wcnl2016/wordpress-objects/ll-partner-post.php
  44. 44. How do I get my POST DATA?
  45. 45. <?php $post = new Post( $post ); echo $post->get_grid_size(); PHP
  46. 46. <div class="grid-cell grid-cell-{{ object.get_grid_size() }}"> 
 <a href="{{ object.get_permalink() }}">
 {{ object.get_title() | upper }}
 </a>
 </div> Twig
  47. 47. SO:

  48. 48. SO:
 Twig templates (include, extend, embed, overwrite blocks)
  49. 49. SO:
 Twig templates (include, extend, embed, overwrite blocks) Magically register variables
  50. 50. SO:
 Twig templates (include, extend, embed, overwrite blocks) Magically register variables Encourage separation of concern & modularity
  51. 51. SO:
 Twig templates (include, extend, embed, overwrite blocks) Magically register variables Encourage separation of concern & modularity OO WordPress Objects
  52. 52. ADIOS!
 Visit wp—clarkson.com/core by Level Level. Jaime Martínez @jmslbam level-level.com

×