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

Wordless, stop writing WordPress themes like it...

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. 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
  2. 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.
  3. 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.
  4. 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.
  5. We needed conventions We needed a more structured organization, a

    “framework”: always know where to put files and where to find them.
  6. Style guides, Wikis, Docs ๏ Kind of hard to write

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

    ๏ Very easy to forget ๏ Very easy to ignore We needed something else!
  8. ✓ Default theme structure ✓ Initializers and helpers ✓ Better

    frontend tools Wordless, a WordPress plugin
  9. awesome_theme ├──── index.php ├──── assets │ ├──── fonts │ ├────

    images │ ├──── javascripts │ └──── stylesheets ├──── config │ ├──── initializers │ └──── locales └──── theme ├──── assets │ ├──── javascripts │ └──── stylesheets ├──── helpers │ └──── README.mdown └──── views ├──── layouts └──── posts Folder structure
  10. Why Wordless is good ✓ Every Wordless theme has this

    same, identical structure ✓ You always know where to find things ✓ Conventions are good <3
  11. 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
  12. 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:
  13. Wordless supports ✓ HAML for writing beautiful HTML ✓ SASS

    for writing concise CSS ✓ CoffeeScript for writing safer JavaScript
  14. Your production server will just use PHP, HTML, CSS and

    JavaScript. No worries! Wordless automatically compiles all these great languages for you.
  15. 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.
  16. <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
  17. <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
  18. 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.
  19. 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
  20. 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
  21. 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!”
  22. 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
  23. 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
  24. 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; })();
  25. <?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
  26. - $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
  27. - $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
  28. Why Wordless ✓ Wordless makes themes familiar ✓ Wordless makes

    you more productive ✓ Wordless lets you use better tools
  29. ✓ Ju Liu @arkh4m ✓ Filippo Gangi Dino @mukkoo ✓

    weLaika dev.welaika.com http://github.com/welaika/wordless QUESTIONS! Open Source