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
   

   View Slide

2. Why WordPress?
   

   View Slide

3. ✓ CMS standard
   ✓ So many plugins!
   ✓ Huge community
   

   View Slide

4. Lots of freedom!
   

   View Slide

5. Freedom is good.
   

   View Slide

6. Some of them want to abuse you
   Some of them want to be abused
   FREEDOM
   

   View Slide

7. Always mix PHP and HTML
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   Source: twentythirteen/index.php, line 20
   

   View Slide

8. You can mix PHP and Javascript...
   1
   2 <br/>3 .appearance_page_custom-header #headimg {<br/>4 border: none;<br/>5 -webkit-box-sizing: border-box;<br/>6 -moz-box-sizing: border-box;<br/>7 box-sizing: border-box;<br/>8 }<br/>9
   Source: twentythirteen/custom-header.php, line 143
   and you can mix PHP and CSS.
   

   View Slide

9. Write everything in functions.php
   Source: twentythirteen
   ๏ 3 filters
   ๏ 6 actions
   ๏ 15 functions
   ๏ 527 lines
   

   View Slide

10. Okay, this works.
    

    View Slide

11. 3 months later...
    

    View Slide

12. View Slide

13. Our story
    

    View Slide

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.
    

    View Slide

15. Developer Lock-in Theorem
    A developer can work on a project
    if and only if he has built it.
    

    View Slide

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.
    

    View Slide

17. We needed conventions
    We needed a more structured organization,
    a “framework”: always know where to put
    files and where to find them.
    

    View Slide

18. A better workflow
    We want to make projects repeatable
    and familiar. We like familiar.
    

    View Slide

19. Style guides, Wikis, Docs
    ๏ Kind of hard to write
    ๏ Very easy to forget
    ๏ Very easy to ignore
    

    View Slide

20. Style guides, Wikis, Docs
    ๏ Kind of hard to write
    ๏ Very easy to forget
    ๏ Very easy to ignore
    We needed something else!
    

    View Slide

21. So we made Wordless.
    

    View Slide

22. ✓ Default theme structure
    ✓ Initializers and helpers
    ✓ Better frontend tools
    Wordless, a WordPress plugin
    

    View Slide

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
    

    View Slide

24. Why Wordless is good
    ✓ Every Wordless theme has this same,
    identical structure
    ✓ You always know where to find things
    ✓ Conventions are good <3
    

    View Slide

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
    

    View Slide

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:
    

    View Slide

27. BETTER FRONTEND TOOLS
    

    View Slide

28. Wordless supports
    ✓ HAML for writing beautiful HTML
    ✓ SASS for writing concise CSS
    ✓ CoffeeScript for writing safer JavaScript
    

    View Slide

29. Your production server will just use PHP,
    HTML, CSS and JavaScript. No worries!
    Wordless automatically compiles
    all these great languages for you.
    

    View Slide

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.
    

    View Slide

31. 
    
    Ciao WPDay!
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    HTML
    

    View Slide

32. 
    
    Ciao WPDay!
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    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
    

    View Slide

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.
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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!”
    

    View Slide

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; iresult.push(fill(ingredients[i]));
    }
    JavaScript
    

    View Slide

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

    View Slide

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;
    })();
    

    View Slide

40. WTF? I don’t need this sh*t
    

    View Slide

41. That's cool bro, you can use
    HTML, CSS and Javascript.
    

    View Slide

42. We have been using it in
    production for two years
    on more than 50 projects
    

    View Slide

43. Why we use it
    

    View Slide

44. $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(); ?>
    
    
    
    
    class="alignleft" />
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
    do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    
    endwhile;
    } else { ?>
    
    wp_reset_postdata();
    ?>
    WordPress
    

    View Slide

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
    

    View Slide

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
    

    View Slide

47. Why Wordless
    ✓ Wordless makes themes familiar
    ✓ Wordless makes you more productive
    ✓ Wordless lets you use better tools
    

    View Slide

48. ✓ Ju Liu @arkh4m
    ✓ Filippo Gangi Dino @mukkoo
    ✓ weLaika dev.welaika.com
    http://github.com/welaika/wordless
    QUESTIONS!
    Open Source
    

    View Slide