Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
ENHANCEyour
WordPress development
With TWIG and CLARKSON
Jaime Martínez
Do you know
TWIG?
TWIG?
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 object-oriented code.
Clarkson is a WordPress plugin which
encourages writing object-oriented code.
Clarkson is a WordPress plugin which
encourages writing object-oriented code.
What PROBLEM
Are we trying to SOLVE?
Better (modern) templating
Separation of Concern
Presentation
-
View
Logic
-
Controller
Data access
-
Model
Presentation
-
View
Logic
-
Controller
Data access
-
Model
How do I magically register variables?
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_men...
<footer class="content-info">

{% if ( footer.menu is empty ) %}

<nav class="footer-nav">

{{ footer.menu }}

</nav>

{% ...
class Footer {
function __construct() {

add_filter( 'clarkson_context_args', array( $this, 'add_context_args' ) );

}

fu...
How do I set up my
TEMPLATES?
single.php > single.twig
{% include 'defaults/head.twig' %}
<main class="main">

{% block content %}

{% include 'partials/content.twig' %}

{% end...
{% extend 'layouts/2-columns.twig' %}



{% block content %}


{% include 'post/content.twig' %}
{# Or some other custom H...
Autotaalglas live! Jaime’s talk on WCNL 2016
Prefix - Level Level
WCNL JAIME
This is a link and this is regular text
Autotaalglas live! Jaime’s talk on WCNL 2016
Prefix - Level Level
WCNL JAIME
This is a link and this is regular text
<div class="grid-cell">
{% block content %}
Default fallback content

{% endblock %}
</div>
Global partial file [partials/t...
{% extend 'partials/teaser.twig' %}
{% block content %}
<script type="text/javascript">

// Some Javascript to load Advert...
How did MODULAR
CSS help us?
SMACCS / OOCSS / BEM / AtomCSS
Autotaalglas live! Jaime’s talk on WCNL 2016
Prefix - Level Level
WCNL JAIME
This is a link and this is regular text
Autotaalglas live! Jaime’s talk on WCNL 2016
Prefix - Level Level
WCNL
This is a link
Autotaalglas live! Jaime’s talk on WCNL 2016
Prefix - Level Level
WCNL
This is a link
grid-cell
1x2
grid-cell
1x1
grid-cell...
Prefix - Level Level
WCNL JAIME
This is a link and this is regular text
Jaime’s talk on WCNL 2016 Autotaalglas live!
Prefix - Level Level
WCNL
This is a link
Jaime’s talk on WCNL 2016 Autotaalglas live!
Prefix - Level Level
WCNL
This is a link
Jaime’s talk on WCNL 2016 Autotaalglas live!
grid-cell
1x2
grid-cell
1x1
grid-cell...
<div class="grid-cell grid-cell-1x2 grid-cell-post">

<div class="grid-cell grid-cell-2x1 grid-cell-post">

<div class="gr...
How to work with
CUSTOM POST TYPES
Autotaalglas live! Jaime’s talk on WCNL 2016
Prefix - Level Level
WCNL JAIME
This is a link and this is regular text
Autotaalglas live! Jaime’s talk on WCNL 2016
Prefix - Level Level
WCNL
This is a link
Autotaalglas live! Jaime’s talk on WCNL 2016
Prefix - Level Level
WCNL
This is a link
POST
POST
PARTNER
POST
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-si...
class ll_partner_post extends post {

public function get_title() {



$title = parent::get_title();

$title ="Prefix - " ...
How do I get my
POST DATA?
<?php
$post = new Post( $post );
echo $post->get_grid_size();
PHP
<div class="grid-cell grid-cell-{{ object.get_grid_size() }}">


<a href="{{ object.get_permalink() }}">

{{ object.get_ti...
SO:

SO:

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

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

Twig templates (include, extend, embed, overwrite blocks)
Magically register variables
Encourage separation of concer...
SO:

Twig templates (include, extend, embed, overwrite blocks)
Magically register variables
Encourage separation of concer...
ADIOS!

Visit wp—clarkson.com/core by Level Level.
Jaime Martínez
@jmslbam
level-level.com
Enhance your WordPress development with Twig and Clarkson - WordCamp Nederland 2016
Enhance your WordPress development with Twig and Clarkson - WordCamp Nederland 2016
Enhance your WordPress development with Twig and Clarkson - WordCamp Nederland 2016
Enhance your WordPress development with Twig and Clarkson - WordCamp Nederland 2016
Nächste SlideShare
Wird geladen in …5
×

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

822 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

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

×