Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Wordless, stop writing WordPress themes like it's 1998

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

Ju Liu

September 13, 2013
Tweet

More Decks by Ju Liu

Other Decks in Programming

Transcript

  1. WORDLESS
    Stop writing themes... like it's 1998
    @arkh4m @mukkoo
    WP Day 13/09/13

    View full-size slide

  2. Why WordPress?

    View full-size slide

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

    View full-size slide

  4. Lots of freedom!

    View full-size slide

  5. Freedom is good.

    View full-size slide

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

    View full-size 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 full-size 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 full-size slide

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

    View full-size slide

  10. Okay, this works.

    View full-size slide

  11. 3 months later...

    View full-size slide

  12. 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 full-size slide

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

    View full-size slide

  14. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  19. So we made Wordless.

    View full-size slide

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

    View full-size slide

  21. 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 full-size slide

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

    View full-size slide

  23. 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 full-size slide

  24. 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 full-size slide

  25. BETTER FRONTEND TOOLS

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  28. 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 full-size slide



  29. Ciao WPDay!

















    HTML

    View full-size slide



  30. 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 full-size slide

  31. 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 full-size slide

  32. 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 full-size slide

  33. 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 full-size slide

  34. 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 full-size slide

  35. 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 full-size slide

  36. 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 full-size slide

  37. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  41. Why we use it

    View full-size slide

  42. $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 full-size slide

  43. - $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 full-size slide

  44. - $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 full-size slide

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

    View full-size slide

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

    View full-size slide