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

Do you know
TWIG?

Have you worked with
TWIG?

So what is
TWIG?

TWIG?Twig is a modern template engine for PHP.

TWIG?
So what is
CLARKSON?

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

What PROBLEM
Are we trying to SOLVE?

Separation of Concern
&
Reusable models

Templates
-
View
Logic
-
Controller
WP Objects
-
Model

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

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

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

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

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

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

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

How do I set up my
TEMPLATES?

single.php > single.twig

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

COLUMN
TWO
PAGE SINGLE

COLUMN
TWO
PAGE SINGLE

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

COLUMN
TWO
PAGE SINGLE

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

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

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

CELL
GRID
POST POST
PARTNER
AD

POST POST
PARTNER
AD
CELL
GRID

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

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

How to work with
CUSTOM POST TYPES and
WORDPRESS OBJECTSthe

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

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

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

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

POST
CLARKSON
POST
POST
PARTNER
AD

POST
CLARKSON
POST
POST
PARTNER
AD

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

<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

POST
CLARKSON
POST
POST
PARTNER
AD

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

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

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

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