Successfully reported this slideshow.

Enhance your WordPress development with Twig through Clarkson - WordCamp Barcalona 2016

2

Share

Loading in …3
×
1 of 47
1 of 47

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 through Clarkson - WordCamp Barcalona 2016

  1. 1. ENHANCEyour WordPress development With TWIG and CLARKSON Jaime Martínez at WordCamp Barcelona 2016
  2. 2. Do you know TWIG?
  3. 3. Have you worked with TWIG?
  4. 4. So what is TWIG?
  5. 5. TWIG?Twig is a modern template engine for PHP.
  6. 6. TWIG? So what is CLARKSON?
  7. 7. Clarkson is a WordPress plugin which encourages writing maintainable and object- oriented code.
  8. 8. What PROBLEM Are we trying to SOLVE?
  9. 9. Separation of Concern & Reusable models
  10. 10. Templates - View Logic - Controller WP Objects - Model
  11. 11. Presentation - View Logic - Controller Data access - Model Templates - View Logic - Controller WP Objects - Model
  12. 12. Seperation of concern How do I magically register variables? Menu item a Menu item b ©WCNL Just some footer text - 2015
  13. 13. <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’)
  14. 14. <footer class="content-info">
 {% if ( footer.menu is empty ) %}
 <nav class="footer-nav">
 {{ footer.menu }}
 </nav>
 {% endif %}
 
 {{ footer.text | raw }} 
 </footer> footer.twig
  15. 15. class Footer {
 static function get_text(){
 return get_option('ll-footer-text') .' - Copyright ' . date('Y');
 }
 static function get_menu() {
 return wp_nav_menu(['theme_location' => 'footer-
 menu']);
 }
 } model/footer.php
  16. 16. class Footer { function __construct() {
 add_filter( 'clarkson_context_args', array( $this, 'add_context_args' ) );
 }
 function add_context_args( $objects ) {
 $objects['footer']['menu'] = Footer::get_menu()
 $objects['footer']['text'] = Footer::get_text(); 
 return $objects;
 }
 } controllers/footer.php
  17. 17. <footer class="content-info">
 {% if ( footer.menu is empty ) %}
 <nav class="footer-nav">
 {{ footer.menu }}
 </nav>
 {% endif %}
 
 {{ footer.text | raw }} 
 </footer> footer.twig
  18. 18. How do I set up my TEMPLATES?
  19. 19. single.php > single.twig
  20. 20. This is a sidebar https://level-level.com/clarkson-core-op-wordcamp-nederland-2016/ Sidebar post block Single post with 2-column template
  21. 21. COLUMN TWO PAGE SINGLE
  22. 22. COLUMN TWO PAGE SINGLE
  23. 23. {% include 'defaults/header.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 template file layouts/2-columns.twig
  24. 24. COLUMN TWO PAGE SINGLE
  25. 25. {% extend 'layouts/2-columns.twig' %}
 
 {% block content %} 
 {% include 'post/content.twig' %} {# Or some other custom HTML #}
 {% endblock %} Extend this layout file
 ( single.twig )
  26. 26. Autotaalglas Jaime’s talk on WCNL Prefix - Level WCNL JAIME This is a link and this is regular https://level-level.com
  27. 27. Autotaalglas Jaime’s talk on WCNL Prefix - Level WCNL JAIME This is a link and this is regular https://level-level.com
  28. 28. CELL GRID POST POST PARTNER AD
  29. 29. POST POST PARTNER AD CELL GRID
  30. 30. <div class="grid-cell"> {% block content %} Default fallback content
 {% endblock %} </div> Global partial template grid/partials/grid-cell.twig
  31. 31. {% extend 'partials/grid-cell.twig' %} {% block content %} <script type="text/javascript">
 // Some Javascript to load Advertisement
 </script> {% endblock %} Extend the grid-cell grid/partials/internal-ad.twig
  32. 32. How to work with CUSTOM POST TYPES and WORDPRESS OBJECTSthe
  33. 33. Autotaalglas Jaime’s talk on WCNL Prefix - Level WCNL JAIME This is a link and this is regular https://level-level.com
  34. 34. Autotaalglas Jaime’s talk on WCNL Prefix - Level WCNL JAIME This is a link and this is regular https://level-level.com
  35. 35. Autotaalglas Jaime’s talk on WCNL Prefix - Level WCNL JAIME This is a link and this is regular POST POST PARTNER POST AD https://level-level.com
  36. 36. Autotaalglas live! Jaime’s talk on WCNL 2016 Prefix - Level Level WCNL JAIME This is a link and this is regular grid-cell 1x2 grid-cell 1x1 grid-cell 2x1 grid-cell 1x1 https://level-level.com
  37. 37. POST CLARKSON POST POST PARTNER AD
  38. 38. POST CLARKSON POST POST PARTNER AD
  39. 39. class post extends Clarkson_Post { 
 public function get_grid_size(){ 
 return get_post_meta( $this->get_id(), 'll- grid-size'); 
 }
 } themes/wcbarca2016/wordpress-objects/post.php
  40. 40. <div class="grid-cell grid-cell- {{ object.get_grid_size() }}"> 
 <a href="{{ object.get_permalink() }}">
 {{ object.get_title() | upper }}
 </a>
 </div> Twig template grid/partials/grid-cell.twig
  41. 41. POST CLARKSON POST POST PARTNER AD
  42. 42. class ll_partner_post extends post {
 public function get_title() {
 
 $title = parent::get_title();
 $title ="Prefix - " . $title;
 
 return $title; } } themes/wcbarca2016/wordpress-objects/ll-partner-post.php
  43. 43. SO:
 Encourage separation of concern & modularity Twig templating:
 Include, extend, macros, embed & overwrite blocks Magically register variables OO WordPress Objects
  44. 44. results:
 Easier to maintain projects 200% more happy developers Happier support team 10% less broken keyboards
  45. 45. ADIOS!
 Visit wp—clarkson.com by Level Level. Jaime Martínez @jmslbam level-level.com

×