This presentation is slightly different presentation then the one from WordCamp Netherlands 2016

1. ENHANCEyour
WordPress development
With TWIG and CLARKSON
Jaime Martínez at WordCamp Barcelona 2016

2. Do you know
TWIG?

3. Have you worked with
TWIG?

4. So what is
TWIG?

5. TWIG?Twig is a modern template engine for PHP.

6. TWIG?
So what is
CLARKSON?

7. Clarkson is a WordPress plugin which
encourages writing maintainable and object-
oriented code.

8. What PROBLEM
Are we trying to SOLVE?

10. Separation of Concern
&
Reusable models

11. Templates
-
View
Logic
-
Controller
WP Objects
-
Model

12. Presentation
-
View
Logic
-
Controller
Data access
-
Model
Templates
-
View
Logic
-
Controller
WP Objects
-
Model

13. Seperation of concern
How do I magically register variables?
Menu item a Menu item b
©WCNL Just some footer text - 2015

14. <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’)

15. <footer class="content-info">
{% if ( footer.menu is empty ) %}
<nav class="footer-nav">
{{ footer.menu }}
</nav>
{% endif %}
{{ footer.text | raw }}
</footer>
footer.twig

16. 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

17. 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

18. <footer class="content-info">
{% if ( footer.menu is empty ) %}
<nav class="footer-nav">
{{ footer.menu }}
</nav>
{% endif %}
{{ footer.text | raw }}
</footer>
footer.twig

19. How do I set up my
TEMPLATES?

21. single.php > single.twig

22. This is a sidebar
https://level-level.com/clarkson-core-op-wordcamp-nederland-2016/
Sidebar post block
Single post with 2-column template

23. COLUMN
TWO
PAGE SINGLE

24. COLUMN
TWO
PAGE SINGLE

25. {% 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

26. COLUMN
TWO
PAGE SINGLE

27. {% extend 'layouts/2-columns.twig' %}
{% block content %}
{% include 'post/content.twig' %}
{# Or some other custom HTML #}
{% endblock %}
Extend this layout file
( single.twig )

28. Autotaalglas Jaime’s talk on WCNL
Prefix - Level
WCNL JAIME
This is a link and this is regular
https://level-level.com

29. Autotaalglas Jaime’s talk on WCNL
Prefix - Level
WCNL JAIME
This is a link and this is regular
https://level-level.com

30. CELL
GRID
POST POST
PARTNER
AD

31. POST POST
PARTNER
AD
CELL
GRID

32. <div class="grid-cell">
{% block content %}
Default fallback content
{% endblock %}
</div>
Global partial template
grid/partials/grid-cell.twig

33. {% 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

34. How to work with
CUSTOM POST TYPES and
WORDPRESS OBJECTSthe

35. Autotaalglas Jaime’s talk on WCNL
Prefix - Level
WCNL JAIME
This is a link and this is regular
https://level-level.com

36. Autotaalglas Jaime’s talk on WCNL
Prefix - Level
WCNL JAIME
This is a link and this is regular
https://level-level.com

37. 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

38. 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

39. POST
CLARKSON
POST
POST
PARTNER
AD

40. POST
CLARKSON
POST
POST
PARTNER
AD

41. 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

42. <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

43. POST
CLARKSON
POST
POST
PARTNER
AD

44. 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

45. SO:
Encourage separation of concern & modularity
Twig templating:
Include, extend, macros, embed & overwrite blocks
Magically register variables
OO WordPress Objects

46. results:
Easier to maintain projects
200% more happy developers
Happier support team
10% less broken keyboards

47. ADIOS!
Visit wp—clarkson.com by Level Level.
Jaime Martínez
@jmslbam
level-level.com