SlideShare a Scribd company logo
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

More Related Content

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

Use Symfony2 components inside WordPress
Use Symfony2 components inside WordPress Use Symfony2 components inside WordPress
Use Symfony2 components inside WordPress
Maurizio Pelizzone
 
Extending Twig
Extending TwigExtending Twig
Extending Twig
Gerry Vandermaesen
 
PHPConf-TW 2012 # Twig
PHPConf-TW 2012 # TwigPHPConf-TW 2012 # Twig
PHPConf-TW 2012 # Twig
Wake Liu
 
Google Web Toolkit
Google Web ToolkitGoogle Web Toolkit
Google Web Toolkit
Software Park Thailand
 
Java Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit
Java Web Programming on Google Cloud Platform [3/3] : Google Web ToolkitJava Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit
Java Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit
IMC Institute
 
Html5 ux london
Html5 ux londonHtml5 ux london
Html5 ux london
Todd Zaki Warfel
 
Drupalcamp Leuven 2013 - Display Suite, the future of your display
Drupalcamp Leuven 2013 - Display Suite, the future of your displayDrupalcamp Leuven 2013 - Display Suite, the future of your display
Drupalcamp Leuven 2013 - Display Suite, the future of your display
Bram Goffings
 
Workshop: Building Vaadin add-ons
Workshop: Building Vaadin add-onsWorkshop: Building Vaadin add-ons
Workshop: Building Vaadin add-ons
Sami Ekblad
 
MVC From Beginner to Advance in Indian Style by - Indiandotnet
MVC From Beginner to Advance in Indian Style by - IndiandotnetMVC From Beginner to Advance in Indian Style by - Indiandotnet
MVC From Beginner to Advance in Indian Style by - Indiandotnet
Indiandotnet
 
SoftShake 2013 - Vaadin componentization
SoftShake 2013 - Vaadin componentizationSoftShake 2013 - Vaadin componentization
SoftShake 2013 - Vaadin componentization
Nicolas Fränkel
 
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to DevelopmentWordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
Evan Mullins
 
Architecting WPF Applications
Architecting WPF ApplicationsArchitecting WPF Applications
Architecting WPF Applications
Paul Stovell
 
html5
html5html5
Introduccion a HTML5
Introduccion a HTML5Introduccion a HTML5
Introduccion a HTML5
Pablo Garaizar
 
Mastering WordPress Vol.1
Mastering WordPress Vol.1Mastering WordPress Vol.1
Mastering WordPress Vol.1
Wataru OKAMOTO
 
Geek Moot '09 -- Smarty 101
Geek Moot '09 -- Smarty 101Geek Moot '09 -- Smarty 101
Geek Moot '09 -- Smarty 101
Ted Kulp
 
HTML 5 - Overview
HTML 5 - OverviewHTML 5 - Overview
HTML 5 - Overview
Marcelio Leal
 
Django Rest Framework and React and Redux, Oh My!
Django Rest Framework and React and Redux, Oh My!Django Rest Framework and React and Redux, Oh My!
Django Rest Framework and React and Redux, Oh My!
Eric Palakovich Carr
 
Build WordPress themes like a heavyweight - WordCamp Lancaster 2013
Build WordPress themes like a heavyweight - WordCamp Lancaster 2013Build WordPress themes like a heavyweight - WordCamp Lancaster 2013
Build WordPress themes like a heavyweight - WordCamp Lancaster 2013
Jonny Allbut
 
Google app engine by example
Google app engine by exampleGoogle app engine by example
Google app engine by example
Alexander Zamkovyi
 

Similar to Enhance your WordPress development with Twig through Clarkson - WordCamp Barcalona 2016 (20)

Use Symfony2 components inside WordPress
Use Symfony2 components inside WordPress Use Symfony2 components inside WordPress
Use Symfony2 components inside WordPress
 
Extending Twig
Extending TwigExtending Twig
Extending Twig
 
PHPConf-TW 2012 # Twig
PHPConf-TW 2012 # TwigPHPConf-TW 2012 # Twig
PHPConf-TW 2012 # Twig
 
Google Web Toolkit
Google Web ToolkitGoogle Web Toolkit
Google Web Toolkit
 
Java Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit
Java Web Programming on Google Cloud Platform [3/3] : Google Web ToolkitJava Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit
Java Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit
 
Html5 ux london
Html5 ux londonHtml5 ux london
Html5 ux london
 
Drupalcamp Leuven 2013 - Display Suite, the future of your display
Drupalcamp Leuven 2013 - Display Suite, the future of your displayDrupalcamp Leuven 2013 - Display Suite, the future of your display
Drupalcamp Leuven 2013 - Display Suite, the future of your display
 
Workshop: Building Vaadin add-ons
Workshop: Building Vaadin add-onsWorkshop: Building Vaadin add-ons
Workshop: Building Vaadin add-ons
 
MVC From Beginner to Advance in Indian Style by - Indiandotnet
MVC From Beginner to Advance in Indian Style by - IndiandotnetMVC From Beginner to Advance in Indian Style by - Indiandotnet
MVC From Beginner to Advance in Indian Style by - Indiandotnet
 
SoftShake 2013 - Vaadin componentization
SoftShake 2013 - Vaadin componentizationSoftShake 2013 - Vaadin componentization
SoftShake 2013 - Vaadin componentization
 
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to DevelopmentWordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
 
Architecting WPF Applications
Architecting WPF ApplicationsArchitecting WPF Applications
Architecting WPF Applications
 
html5
html5html5
html5
 
Introduccion a HTML5
Introduccion a HTML5Introduccion a HTML5
Introduccion a HTML5
 
Mastering WordPress Vol.1
Mastering WordPress Vol.1Mastering WordPress Vol.1
Mastering WordPress Vol.1
 
Geek Moot '09 -- Smarty 101
Geek Moot '09 -- Smarty 101Geek Moot '09 -- Smarty 101
Geek Moot '09 -- Smarty 101
 
HTML 5 - Overview
HTML 5 - OverviewHTML 5 - Overview
HTML 5 - Overview
 
Django Rest Framework and React and Redux, Oh My!
Django Rest Framework and React and Redux, Oh My!Django Rest Framework and React and Redux, Oh My!
Django Rest Framework and React and Redux, Oh My!
 
Build WordPress themes like a heavyweight - WordCamp Lancaster 2013
Build WordPress themes like a heavyweight - WordCamp Lancaster 2013Build WordPress themes like a heavyweight - WordCamp Lancaster 2013
Build WordPress themes like a heavyweight - WordCamp Lancaster 2013
 
Google app engine by example
Google app engine by exampleGoogle app engine by example
Google app engine by example
 

Recently uploaded

Apps Break Data
Apps Break DataApps Break Data
Apps Break Data
Ivo Velitchkov
 
“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...
“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...
“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...
Edge AI and Vision Alliance
 
Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
Jakub Marek
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
akankshawande
 
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
saastr
 
Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
Brandon Minnick, MBA
 
5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides
DanBrown980551
 
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
saastr
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
panagenda
 
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge GraphGraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
Neo4j
 
"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota
Fwdays
 
Best 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERPBest 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERP
Pixlogix Infotech
 
WeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation TechniquesWeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation Techniques
Postman
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
Hiroshi SHIBATA
 
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
Edge AI and Vision Alliance
 
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and BioinformaticiansBiomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Neo4j
 
Y-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PPY-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PP
c5vrf27qcz
 
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdfMonitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Tosin Akinosho
 
Public CyberSecurity Awareness Presentation 2024.pptx
Public CyberSecurity Awareness Presentation 2024.pptxPublic CyberSecurity Awareness Presentation 2024.pptx
Public CyberSecurity Awareness Presentation 2024.pptx
marufrahmanstratejm
 
Building Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and MilvusBuilding Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and Milvus
Zilliz
 

Recently uploaded (20)

Apps Break Data
Apps Break DataApps Break Data
Apps Break Data
 
“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...
“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...
“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...
 
Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
 
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
 
Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
 
5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides
 
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
 
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge GraphGraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
 
"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota
 
Best 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERPBest 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERP
 
WeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation TechniquesWeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation Techniques
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
 
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
 
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and BioinformaticiansBiomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
 
Y-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PPY-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PP
 
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdfMonitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdf
 
Public CyberSecurity Awareness Presentation 2024.pptx
Public CyberSecurity Awareness Presentation 2024.pptxPublic CyberSecurity Awareness Presentation 2024.pptx
Public CyberSecurity Awareness Presentation 2024.pptx
 
Building Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and MilvusBuilding Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and Milvus
 

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