Taming Wordpress Theming with Twig & Timber. Jonathan Ginn PHP Dorset Nov 2015

Size: px

Start display at page:

Download "Taming Wordpress Theming with Twig & Timber. Jonathan Ginn PHP Dorset Nov 2015"

Arthur Rose
6 years ago
Views:

1 Taming Wordpress Theming with Twig & Timber Jonathan Ginn PHP Dorset Nov 2015

2 Twig Users?

3 Audience?

4 CRASH COURSE

5 Twig

6 The flexible, fast, and secure template engine for PHP You ve probably already used it in: Symfony Silex Tons of PHP CMSes

7 Twig Basics {{ var }} in your Markup, not <?php echo var;?> {% if x is true %} View inheritance View content blocks Documentation is pretty great, similar to Silex You can use templates in other things - in HandlebarsJS for example You can do everything you need for the front end.

8 PHP Controller Twig Basics View (Twig) Web Page

9 Twig Basics <!DOCTYPE html> <html> <head> <title>my Webpage</title> </head> <body> <ul id="navigation"> {% for item in navigation %} <li> <a href="{{ item.href }}">{{ item.caption }}</a> </li> {% endfor %} </ul> <h1>my Webpage</h1> {{ a_variable }} </body> </html>

10 Operators {% if posts and search_query.not_empty %} Let the PHP Controller do the hard work and let Twig run ifs, fors, and other frontend logic. {% for post in posts %} {% include 'components/search-tease.twig' %} {% endfor %} {% elseif search_query.not_empty == false %} <p>use the form on this page to search.</p> {% else %} <p>we're sorry, we couldn't find results.</p> {% endif %}

12 Timber

15 Wordpress has been a mess for too long

16 The cluttered default Wordpress template <?php /** * The main template file. */ get_header();?> <div id="primary" class="content-area"> <main id="main" class="site-main" role="main"> <?php if ( have_posts() ) :?> <?php while ( have_posts() ) : the_post();?> <?php get_template_part( 'content', get_post_format() );?> <?php endwhile;?> <?php paging_nav();?> <?php else :?> <?php get_template_part( 'content', 'none' );?> <?php endif;?> </main> </div> <?php get_sidebar();?> <?php get_footer();?>

17 Let s divide Wordpress Template PHP Controller Twig View

18 The Timber Way: Controller <?php $context = Timber::get_context(); $post = new TimberPost(); $context['posts'] = Timber::get_posts(); Timber::render( blog.twig', $context);

19 The Timber Way: View {% include 'sections/header.twig' %} <div id="primary" class="content-area"> <main id="main" class="site-main" role="main"> {% for post in posts %} {% include posts/content.twig %} {% else %} {% include posts/no-content.twig %} {% endfor %} </main> </div> {% include 'sections/footer.twig' %}

20 Timber brings the power of Twig to Wordpress

21 Timber brings the logic of Twig to Wordpress

22 Twig brings a fence between Back-End and Front End Back-End Logic Builds data to a spec Does NOT care what form markup comes in Front-End Markup Builds markup Specifies data required Does NOT care where data comes from

23 Structural Timber

24 PHP Controlle r Twig Basics View (Twig) Web Page

25 Includes Includes Includes front-page.php front-page.twig Layout (fullwidth.twig) Structural Timber Macro Front Page

26 Includes Includes Includes front-page.php front-page.twig Layout (fullwidth.twig) Structural Timber Macro Front Page

27 View Controller front-page.php <?php $context = Timber::get_context(); $post = new TimberPost(); $context['post'] = $post; $context['posts'] = Timber::get_posts(); $context['pagination'] = Timber::get_pagination(); $context['sidebar_child_tree'] = base_get_tree ($post->id); Timber::render( front-page.twig', $context );

28 Includes Includes Includes front-page.php front-page.twig Layout (fullwidth.twig) Structural Timber Macro Front Page

29 View (front-page.twig) {% extends "layouts/full-width.twig" %} {% block content %} <ul> {% for post in posts %} <li> <a href="{{ post.permalink }}"> {{ post.title }} </a> </li> {% else %} <li>sorry, no posts matched your criteria</li> {% endfor %} </ul> {% endblock %}

30 View (front-page.twig) {% extends "layouts/full-width.twig" %} {% block content %} <ul> {% for post in posts %} <li> <a href="{{ post.permalink }}"> {{ post.title }} </a> </li> {% else %} <li>sorry, no posts matched your criteria</li> {% endfor %} </ul> {% endblock %}

31 Includes Includes Includes front-page.php front-page.twig Layout (fullwidth.twig) Structural Timber Macro Front Page

32 Layout (full-width.twig) Layout {% import 'macros/macro-file.twig' as util %} <html> {% include 'sections/head.twig' %} <body> <header> {% block header %} {% include 'sections/navigation.twig' %} {% endblock %} </header> <section> {% block content %} Sorry, no content {% endblock %} </section> </body> </html>

33 Includes Includes Includes front-page.php front-page.twig Layout (fullwidth.twig) Structural Timber Macro Front Page

34 Includes Includes Includes front-page.php front-page.twig Layout (fullwidth.twig) Structural Timber Macro Front Page

35 Includes Includes Includes Includes {% import 'macros/macro-file.twig' as util %} <html> {% include 'sections/head.twig' %} <body> <header> {% block header %} {% include 'sections/navigation.twig' %} {% endblock %} </header> <section> {% block content %} Sorry, no content {% endblock %} </section> </body> </html>

36 Includes Just partials of a file, to reuse across your site. {% include 'sections/footer.twig' %} Or sandbox an include! {% include 'partials/post-teaser.twig' with { teasepost: post, info: 'Look!' } %}

37 Includes Includes Includes front-page.php front-page.twig Layout (fullwidth.twig) Structural Timber Macro Front Page

38 Macros (DRY!) Macro {% macro button(url, text, classes) %} <a href= {{ url }} class= btn {{ classes }} > {{ text }} </a> {% endmacro %} {% import 'macros/macro-file.twig' as util %}... {{ util.button( Base!, red ) }}

39 Macros (DRY!) Macro {% macro button(url, text, classes) %} <a href= {{ url }} class= btn {{ classes }} > {{ text }} </a> {% endmacro %} {% import 'macros/macro-file.twig' as util %}... {{ util.button( Base!, red ) }}

40 Includes Includes Includes front-page.php front-page.twig Layout (fullwidth.twig) Structural Timber Macro Front Page

41 functions.php functions.php Global context items, such as navigation.

42 Adding new templates

44 Templates can share views Views can (should) share layouts

45 Key Timber Features

46 The WP Loop is dead... <ul> <?php $query = new WP_Query( array( 'post_type' => 'post' ) );?> <?php if ( $query->have_posts() ) :?> <?php while ( $query->have_posts() ) : $query->the_post();?> <li><a href="<?php the_permalink()?>"> <?php the_title()?> </a></li> <?php endwhile;?> <?php else :?> <li><?php _e( 'Sorry, no posts matched your criteria.' )?></li> <?php endif; wp_reset_postdata();?> </ul>

47 ...long live the loop <ul> {% for post in posts %} <li><a href="{{ post.permalink }}"> {{ post.title }} </a></li> {% else %} <li>sorry, no posts matched your criteria</li> {% endfor %} </ul>

48 Image Thumbnails <?php if( has_post_thumbnail() ) :?> <?php the_post_thumbnail()?> <?php else:?> <img src="<?php bloginfo( 'stylesheet_directory' )?>/images/thumbnaildefault.jpg" /> <?php endif;?> {% if post.thumbnail %} <img src="{{post.thumbnail.src default(bloginfo('stylesheet_directory') ~'/images/thumbnail-default.jpg')" /> {% endif %}

49 Objects TimberPost TimberImage TimberMenu TimberComment TimberMenuItem TimberSite TimberTerm TimberTheme

50 Timber Object Timber::get_post($args); Timber::get_posts($args); Timber::get_pagination();

51 Wordpress Features

52 Twig Shortcodes! add_shortcode('youtube', 'youtube_shorttag'); function youtube_shorttag($atts) { if(isset($atts['id'])) { $id = sanitize_text_field($atts['id']); } else { $id = false; } // this time we use Timber::compile since shorttags should return the code return Timber::compile('youtube-short.twig', array('id' => $id)); }

53 Advanced Custom Fields Timber gives you ACF integration with TimberPost. {{ post.acf_field_name }} That s it! Done!

54 Plugins WPML (Multi Language) Contact Form 7

55 Get out of jail {{ function( function_name, argument_1 ) }} For when you really need to run a function. {% set post = TimberPost(post) %} For when you want to turn a normal post into a TimberPost.

56 Don t forget WP Functions {{ wp_head }} {{ wp_footer }}

57 Timber is really fun to Google...

61 And the docs aren t great for searching. But they re pretty good.

62 Back-End Logic Builds data to a spec Does NOT care what form markup comes in Front-End Markup Builds markup Specifies data required Does NOT care where data comes from

63 Timber works great with Bedrock. L L CA! K C A B

64 Back-End Logic Builds data to a spec Does NOT care what form markup comes in Front-End Markup Builds markup Specifies data required Does NOT care where data comes from

65 To put it another way... Back-End Front-End

66 To put it another way... Back-End CSS, ew! Front-End Leave my markup alone!

67 Yay! Back-End Logic Yay! Front-End Markup

68 Once you use it, you ll never want to go back.

69 Extending TimberPost

70 What Timber means for you: Faster development Enjoyable development Wordpress is awesome again Protects both parties Don t Repeat Yourself! Clean Code!

71 Home: upstatement.com/timber/ Docs: github.com/jarednova/timber/ Object ref: jarednova.github.io/timber/

72 The best way to learn is to try it

73 Taming Wordpress Theming with Twig & Timber Jonathan Ginn PHP Dorset Nov 2015

Build a WordPress Theme Classroom

Build a WordPress Theme Classroom The Loop It the main structure of WordPress It s extremely powerful Allows developers to creatively display data Overview The loop is a simply a block of code that displays