Wordless, stop writing WordPress themes like it's 1998

1a45b192d0bbaf167afb43a41859e313?s=47 Ju Liu
September 13, 2013

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

1a45b192d0bbaf167afb43a41859e313?s=128

Ju Liu

September 13, 2013
Tweet

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...

  12. None
  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