Wordless, stop writing WordPress themes like it's 1998

All the power of Haml, Compass and Coffeescript, in your WordPress theme. Stop writing themes like it's 1998.

http://welaika.github.com/wordless

Transcript

1. WORDLESS Stop writing themes... like it's 1998 @arkh4m @mukkoo WP Day 13/09/13
2. Why WordPress?
3. ✓ CMS standard ✓ So many plugins! ✓ Huge community
4. Lots of freedom!
5. Freedom is good.
6. Some of them want to abuse you Some of them want to be abused FREEDOM
7. Always mix PHP and HTML 1 <div id="content" class="site-content" role="main"> 2 <?php if ( have_posts() ) : ?> 3 <?php /* The loop */ ?> 4 <?php while ( have_posts() ) : the_post(); ?> 5 <?php get_template_part( 'content', get_post_format() ); ?> 6 <?php endwhile; ?> 7 8 <?php twentythirteen_paging_nav(); ?> 9 10 <?php else : ?> 11 <?php get_template_part( 'content', 'none' ); ?> 12 <?php endif; ?> 13 </div> Source: twentythirteen/index.php, line 20
8. You can mix PHP and Javascript... 1 <?php $header_image = get_header_image(); ?> 2 <style type="text/css" id="twentythirteen-admin-header-css"> 3 .appearance_page_custom-header #headimg { 4 border: none; 5 -webkit-box-sizing: border-box; 6 -moz-box-sizing: border-box; 7 box-sizing: border-box; 8 } 9 </style> Source: twentythirteen/custom-header.php, line 143 and you can mix PHP and CSS.
9. Write everything in functions.php Source: twentythirteen ๏ 3 filters ๏ 6 actions ๏ 15 functions ๏ 527 lines
10. Okay, this works.
11. 3 months later...
13. Our story
14. Everyone is different Every client has different needs. Every team has different tools. Every project is unique. It’s very cumbersome to pass a project made by a developer to another developer.
15. Developer Lock-in Theorem A developer can work on a project if and only if he has built it.
16. The problems we had We have a team of 8 developers. That means lot of different people with very different coding styles. We couldn’t move across projects quickly and be agile and dynamic.
17. We needed conventions We needed a more structured organization, a “framework”: always know where to put files and where to find them.
18. A better workflow We want to make projects repeatable and familiar. We like familiar.
19. Style guides, Wikis, Docs ๏ Kind of hard to write ๏ Very easy to forget ๏ Very easy to ignore
20. Style guides, Wikis, Docs ๏ Kind of hard to write ๏ Very easy to forget ๏ Very easy to ignore We needed something else!
21. So we made Wordless.
22. ✓ Default theme structure ✓ Initializers and helpers ✓ Better frontend tools Wordless, a WordPress plugin
23. awesome_theme ├──── index.php ├──── assets │ ├──── fonts │ ├──── images │ ├──── javascripts │ └──── stylesheets ├──── config │ ├──── initializers │ └──── locales └──── theme ├──── assets │ ├──── javascripts │ └──── stylesheets ├──── helpers │ └──── README.mdown └──── views ├──── layouts └──── posts Folder structure
24. Why Wordless is good ✓ Every Wordless theme has this same, identical structure ✓ You always know where to find things ✓ Conventions are good <3
25. config/initializers ├──── backend.php ├──── custom_post_types.php ├──── default_hooks.php ├──── hooks.php ├──── login_template.php ├──── menus.php ├──── shortcodes.php ├──── thumbnail_sizes.php └──── wordless_preferences.php Wordless initializers Every customization is isolated in its own file
26. Wordless helpers ✓ link_to, image_tag, video_tag, truncate ✓ placeholder_text, placeholder_image ✓ latest_posts_of_type ✓ latest_posts_of_category Wordless ships with 50+ default helpers:
27. BETTER FRONTEND TOOLS
28. Wordless supports ✓ HAML for writing beautiful HTML ✓ SASS for writing concise CSS ✓ CoffeeScript for writing safer JavaScript
29. Your production server will just use PHP, HTML, CSS and JavaScript. No worries! Wordless automatically compiles all these great languages for you.
30. HAML haml.info A small language which compiles to HTML, which fundamental principle is: “Markup should be beautiful” HAML makes markup templates faster to write and easier to read.
31. <div id="content"> <div class="left column"> <h2>Ciao WPDay!</h2> <?php $info = "Siete caldi?"; ?></p> <p><?php echo $info; ?></p> </div> <div class="right column"> <ul> <li class="post highlight"> <img src="one.jpg" /> </li> <li class="post"> <img src="two.jpg" /> </li> <li class="post"> <img src="three.jpg" /> </li> </ul> </div> </div> HTML
32. <div id="content"> <div class="left column"> <h2>Ciao WPDay!</h2> <?php $info = "Siete caldi?"; ?></p> <p><?php echo $info; ?></p> </div> <div class="right column"> <ul> <li class="post highlight"> <img src="one.jpg" /> </li> <li class="post"> <img src="two.jpg" /> </li> <li class="post"> <img src="three.jpg" /> </li> </ul> </div> </div> HTML #content .left.column %h2 Ciao WPDay! - $info = "Siete caldi?" %p= $info .right.column %ul %li.post.highlight %img(src="one.jpg") %li.post %img(src="two.jpg") %li.post %img(src="three.jpg") HAML
33. SASS sass-lang.com An extension of CSS3 which compiles to CSS and adds nested rules, variables and mixins. Compass is a SASS framework which adds many mixins for browser compatibility.
34. div.button{ margin: 2em 0; -webkit-box-shadow: 0px 0px 5px #000; -moz-box-shadow: 0px 0px 5px #000; box-shadow: 0px 0px 5px #000; filter: progid: DXImageTransform. Microsoft.Alpha(Opacity=10); opacity: 0.1; } div.button span{ text-align: right; } li{ -webkit-border-radius: 25px; -moz-border-radius: 25px; -ms-border-radius: 25px; -o-border-radius: 25px; border-radius: 25px; font-family: serif; font-weight: bold; font-size: 1.2em; } CSS
35. div.button{ margin: 2em 0; -webkit-box-shadow: 0px 0px 5px #000; -moz-box-shadow: 0px 0px 5px #000; box-shadow: 0px 0px 5px #000; filter: progid: DXImageTransform. Microsoft.Alpha(Opacity=10); opacity: 0.1; } div.button span{ text-align: right; } li{ -webkit-border-radius: 25px; -moz-border-radius: 25px; -ms-border-radius: 25px; -o-border-radius: 25px; border-radius: 25px; font-family: serif; font-weight: bold; font-size: 1.2em; } CSS div.button margin: 2em 0 +box-shadow(#000, 0, 0, 5px) +opacity(0.1) span text-align: right li +border-radius(25px) font: family: serif weight: bold size: 1.2em SASS & Compass
36. CoffeeScript coffeescript.org A little language that compiles to JavaScript, which main motto is: CoffeeScript takes the good parts of it and makes you write better, safer and faster code. “It’s just JavaScript!”
37. var fill = function(container, liquid) { if (container == null){ container = "cup"; } if (liquid == null){ liquid = "coffee"; } return "Filling the " + container + " with " + liquid + "..."; }; var result = [], ingredients = ["coffee", "milk", "syrup", "ice"]; for (i=0; i<ingredients.length; i++) { result.push(fill(ingredients[i])); } JavaScript
38. var fill = function(container, liquid) { if (container == null){ container = "cup"; } if (liquid == null){ liquid = "coffee"; } return "Filling the " + container + " with " + liquid + "..."; }; var result = [], ingredients = ["coffee", "milk", "syrup", "ice"]; for (i=0; i<ingredients.length; i++) { result.push(fill(ingredients[i])); } JavaScript fill = (container = "cup", liquid = "coffee") -> "Filling the #{container} with #{liquid}..." ingredients = ["coffee", "milk", "syrup", "ice"] result = (fill(elem) for elem in ingredients) CoffeeScript
39. Compiled CoffeeScript var elem, fill, ingredients, result; fill = function(container, liquid) { if (container == null) { container = "cup"; } if (liquid == null) { liquid = "coffee"; } return "Filling the " + container + " with " + liquid + "..."; }; ingredients = ["coffee", "milk", "sugar", "ice"]; result = (function() { var _i, _len, _results; _results = []; for (_i = 0, _len = ingredients.length; _i < _len; _i++) { elem = ingredients[_i]; _results.push(fill(elem)); } return _results; })();
40. WTF? I don’t need this sh*t
41. That's cool bro, you can use HTML, CSS and Javascript.
42. We have been using it in production for two years on more than 50 projects
43. Why we use it
44. <?php $the_query = new WP_Query(array('post_type' => 'recipe', 'posts_per_page' => -1)); if ( $the_query->have_posts() ) { while ( $the_query->have_posts() ) : $the_query->the_post(); ?> <h2> <a href="<?php the_permalink() ?>"><?php the_title(); ?></a> </h2> <p class="content" id="recipe-<?php the_ID(); ?>"> <img src="<?php bloginfo('template_url'); ?>/images/flour.jpg" class="alignleft" /> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> <?php endwhile; } else { ?> <h4><?php echo __('No posts found'); ?></h4> <?php } wp_reset_postdata(); ?> WordPress
45. - $the_query = latest_posts_of_type( 'recipe' ) - if ( $the_query->have_posts() ) - while ( $the_query->have_posts() ) - $the_query->the_post() %h2= link_to(get_permalink(), get_the_title()) %p.content(id = "recipe-#{get_the_ID()}") = image_tag('flour.jpg', array('class' => 'alignleft')) = placeholder_text(20) - else %h4= __('No posts found') Wordless
46. - $the_query = latest_posts_of_type( 'recipe' ) - if ( $the_query->have_posts() ) - while ( $the_query->have_posts() ) - $the_query->the_post() %h2= link_to(get_permalink(), get_the_title()) %p.content(id = "recipe-#{get_the_ID()}") = image_tag('flour.jpg', array('class' => 'alignleft')) = placeholder_text(20) - else %h4= __('No posts found') Wordless
47. Why Wordless ✓ Wordless makes themes familiar ✓ Wordless makes you more productive ✓ Wordless lets you use better tools
48. ✓ Ju Liu @arkh4m ✓ Filippo Gangi Dino @mukkoo ✓ weLaika dev.welaika.com http://github.com/welaika/wordless QUESTIONS! Open Source