1. ENHANCEyour
WordPress development
With TWIG and CLARKSON
Jaime Martínez

3. Do you know
TWIG?

4. TWIG?

5. TWIG?
Have you worked with

6. TWIG?

7. So what is
TWIG?

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

9. TWIG?
So what is
CLARKSON?

10. Clarkson is a WordPress plugin which
encourages writing object-oriented code.

11. Clarkson is a WordPress plugin which
encourages writing object-oriented code.

12. Clarkson is a WordPress plugin which
encourages writing object-oriented code.

14. What PROBLEM
Are we trying to SOLVE?

16. Better (modern) templating
Separation of Concern

17. Presentation
-
View
Logic
-
Controller
Data access
-
Model

18. Presentation
-
View
Logic
-
Controller
Data access
-
Model

19. How do I magically register variables?

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

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

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

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

24. How do I set up my
TEMPLATES?

26. single.php > single.twig

27. {% 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)

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

29. Autotaalglas live! Jaime’s talk on WCNL 2016
Prefix - Level Level
WCNL JAIME
This is a link and this is regular text

30. Autotaalglas live! Jaime’s talk on WCNL 2016
Prefix - Level Level
WCNL JAIME
This is a link and this is regular text

31. <div class="grid-cell">
{% block content %}
Default fallback content
{% endblock %}
</div>
Global partial file [partials/teaser.twig]

32. {% extend 'partials/teaser.twig' %}
{% block content %}
<script type="text/javascript">
// Some Javascript to load Advertisement
</script>
{% endblock %}
Extend this partial [internal-ad/teaser.twig]

33. How did MODULAR
CSS help us?
SMACCS / OOCSS / BEM / AtomCSS

34. Autotaalglas live! Jaime’s talk on WCNL 2016
Prefix - Level Level
WCNL JAIME
This is a link and this is regular text

35. Autotaalglas live! Jaime’s talk on WCNL 2016
Prefix - Level Level
WCNL
This is a link

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

37. Prefix - Level Level
WCNL JAIME
This is a link and this is regular text
Jaime’s talk on WCNL 2016 Autotaalglas live!

38. Prefix - Level Level
WCNL
This is a link
Jaime’s talk on WCNL 2016 Autotaalglas live!

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

40. <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">

41. How to work with
CUSTOM POST TYPES

42. Autotaalglas live! Jaime’s talk on WCNL 2016
Prefix - Level Level
WCNL JAIME
This is a link and this is regular text

43. Autotaalglas live! Jaime’s talk on WCNL 2016
Prefix - Level Level
WCNL
This is a link

44. Autotaalglas live! Jaime’s talk on WCNL 2016
Prefix - Level Level
WCNL
This is a link
POST
POST
PARTNER
POST
AD

45. POST
CLARKSON
POST
POST
PARTNER
AD

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

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

48. How do I get my
POST DATA?

49. <?php
$post = new Post( $post );
echo $post->get_grid_size();
PHP

50. <div class="grid-cell grid-cell-{{ object.get_grid_size() }}">
<a href="{{ object.get_permalink() }}">
{{ object.get_title() | upper }}
</a>
</div>
Twig

51. SO:

52. SO:
Twig templates (include, extend, embed, overwrite blocks)

53. SO:
Twig templates (include, extend, embed, overwrite blocks)
Magically register variables

54. SO:
Twig templates (include, extend, embed, overwrite blocks)
Magically register variables
Encourage separation of concern & modularity

55. SO:
Twig templates (include, extend, embed, overwrite blocks)
Magically register variables
Encourage separation of concern & modularity
OO WordPress Objects

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