WORDLESSStop writing themes... like it's 1998
@arkh4m @mukkoo
WP Day 13/09/13
Why WordPress?
✓ CMS standard
✓ So many plugins!
✓ Huge community
Lots of freedom!
Freedom is good.
Some of them want to abuse you
Some of them want to be abused
FREEDOM
Always mix PHP and HTML
1 <div id="content" class="site-content" role="main">
2 <?php if ( have_posts() ) : ?>
3 <?php /* ...
You can mix PHP and Javascript...
1 <?php $header_image = get_header_image(); ?>
2 <style type="text/css" id="twentythirte...
Write everything in functions.php
Source: twentythirteen
๏ 3 filters
๏ 6 actions
๏ 15 functions
๏ 527 lines
Okay, this works.
3 months later...
Our story
Everyone is different
Every client has different needs.
Every team has different tools.
Every project is unique.
It’s very...
Developer Lock-in Theorem
A developer can work on a project
if and only if he has built it.
The problems we had
We have a team of 8 developers. That
means lot of different people with very
different coding styles.
...
We needed conventions
We needed a more structured organization,
a “framework”: always know where to put
files and where to ...
A better workflow
We want to make projects repeatable
and familiar. We like familiar.
Style guides, Wikis, Docs
๏ Kind of hard to write
๏ Very easy to forget
๏ Very easy to ignore
Style guides, Wikis, Docs
๏ Kind of hard to write
๏ Very easy to forget
๏ Very easy to ignore
We needed something else!
So we made Wordless.
✓ Default theme structure
✓ Initializers and helpers
✓ Better frontend tools
Wordless, a WordPress plugin
awesome_theme
├──── index.php
├──── assets
│ ├──── fonts
│ ├──── images
│ ├──── javascripts
│ └──── stylesheets
├──── conf...
Why Wordless is good
✓ Every Wordless theme has this same,
identical structure
✓ You always know where to find things
✓ Con...
config/initializers
├──── backend.php
├──── custom_post_types.php
├──── default_hooks.php
├──── hooks.php
├──── login_temp...
Wordless helpers
✓ link_to, image_tag, video_tag, truncate
✓ placeholder_text, placeholder_image
✓ latest_posts_of_type
✓ ...
BETTER FRONTEND TOOLS
Wordless supports
✓ HAML for writing beautiful HTML
✓ SASS for writing concise CSS
✓ CoffeeScript for writing safer JavaSc...
Your production server will just use PHP,
HTML, CSS and JavaScript. No worries!
Wordless automatically compiles
all these ...
HAML haml.info
A small language which compiles to HTML,
which fundamental principle is:
“Markup should be beautiful”
HAML ...
<div id="content">
<div class="left column">
<h2>Ciao WPDay!</h2>
<?php $info = "Siete caldi?"; ?></p>
<p><?php echo $info...
<div id="content">
<div class="left column">
<h2>Ciao WPDay!</h2>
<?php $info = "Siete caldi?"; ?></p>
<p><?php echo $info...
SASS sass-lang.com
An extension of CSS3 which compiles to CSS
and adds nested rules, variables and mixins.
Compass is a SA...
div.button{
margin: 2em 0;
-webkit-box-shadow: 0px 0px 5px #000;
-moz-box-shadow: 0px 0px 5px #000;
box-shadow: 0px 0px 5p...
div.button{
margin: 2em 0;
-webkit-box-shadow: 0px 0px 5px #000;
-moz-box-shadow: 0px 0px 5px #000;
box-shadow: 0px 0px 5p...
CoffeeScript coffeescript.org
A little language that compiles to JavaScript,
which main motto is:
CoffeeScript takes the g...
var fill = function(container, liquid) {
if (container == null){
container = "cup";
}
if (liquid == null){
liquid = "coffe...
var fill = function(container, liquid) {
if (container == null){
container = "cup";
}
if (liquid == null){
liquid = "coffe...
Compiled CoffeeScript
var elem, fill, ingredients, result;
fill = function(container, liquid) {
if (container == null) {
c...
WTF? I don’t need this sh*t
That's cool bro, you can use
HTML, CSS and Javascript.
We have been using it in
production for two years
on more than 50 projects
Why we use it
<?php
$the_query = new WP_Query(array('post_type' => 'recipe',
'posts_per_page' => -1));
if ( $the_query->have_posts() ) {...
- $the_query = latest_posts_of_type( 'recipe' )
- if ( $the_query->have_posts() )
- while ( $the_query->have_posts() )
- $...
- $the_query = latest_posts_of_type( 'recipe' )
- if ( $the_query->have_posts() )
- while ( $the_query->have_posts() )
- $...
Why Wordless
✓ Wordless makes themes familiar
✓ Wordless makes you more productive
✓ Wordless lets you use better tools
✓ Ju Liu @arkh4m
✓ Filippo Gangi Dino @mukkoo
✓ weLaika dev.welaika.com
http://github.com/welaika/wordless
QUESTIONS!
Open...
Wordless, stop writing WordPress themes like it's 1998
Upcoming SlideShare
Loading in …5
×

Wordless, stop writing WordPress themes like it's 1998

615 views

Published on

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

http://welaika.github.com/wordless

Published in: Software
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
615
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Wordless, stop writing WordPress themes like it's 1998

  1. 1. WORDLESSStop writing themes... like it's 1998 @arkh4m @mukkoo WP Day 13/09/13
  2. 2. Why WordPress?
  3. 3. ✓ CMS standard ✓ So many plugins! ✓ Huge community
  4. 4. Lots of freedom!
  5. 5. Freedom is good.
  6. 6. Some of them want to abuse you Some of them want to be abused FREEDOM
  7. 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. 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. 9. Write everything in functions.php Source: twentythirteen ๏ 3 filters ๏ 6 actions ๏ 15 functions ๏ 527 lines
  10. 10. Okay, this works.
  11. 11. 3 months later...
  12. 12. Our story
  13. 13. 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.
  14. 14. Developer Lock-in Theorem A developer can work on a project if and only if he has built it.
  15. 15. 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.
  16. 16. We needed conventions We needed a more structured organization, a “framework”: always know where to put files and where to find them.
  17. 17. A better workflow We want to make projects repeatable and familiar. We like familiar.
  18. 18. Style guides, Wikis, Docs ๏ Kind of hard to write ๏ Very easy to forget ๏ Very easy to ignore
  19. 19. Style guides, Wikis, Docs ๏ Kind of hard to write ๏ Very easy to forget ๏ Very easy to ignore We needed something else!
  20. 20. So we made Wordless.
  21. 21. ✓ Default theme structure ✓ Initializers and helpers ✓ Better frontend tools Wordless, a WordPress plugin
  22. 22. awesome_theme ├──── index.php ├──── assets │ ├──── fonts │ ├──── images │ ├──── javascripts │ └──── stylesheets ├──── config │ ├──── initializers │ └──── locales └──── theme ├──── assets │ ├──── javascripts │ └──── stylesheets ├──── helpers │ └──── README.mdown └──── views ├──── layouts └──── posts Folder structure
  23. 23. Why Wordless is good ✓ Every Wordless theme has this same, identical structure ✓ You always know where to find things ✓ Conventions are good <3
  24. 24. 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
  25. 25. 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:
  26. 26. BETTER FRONTEND TOOLS
  27. 27. Wordless supports ✓ HAML for writing beautiful HTML ✓ SASS for writing concise CSS ✓ CoffeeScript for writing safer JavaScript
  28. 28. Your production server will just use PHP, HTML, CSS and JavaScript. No worries! Wordless automatically compiles all these great languages for you.
  29. 29. 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.
  30. 30. <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
  31. 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 #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
  32. 32. 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.
  33. 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
  34. 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 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
  35. 35. 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!”
  36. 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; i<ingredients.length; i++) { result.push(fill(ingredients[i])); } JavaScript
  37. 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 fill = (container = "cup", liquid = "coffee") -> "Filling the #{container} with #{liquid}..." ingredients = ["coffee", "milk", "syrup", "ice"] result = (fill(elem) for elem in ingredients) CoffeeScript
  38. 38. 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; })();
  39. 39. WTF? I don’t need this sh*t
  40. 40. That's cool bro, you can use HTML, CSS and Javascript.
  41. 41. We have been using it in production for two years on more than 50 projects
  42. 42. Why we use it
  43. 43. <?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
  44. 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
  45. 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. 46. Why Wordless ✓ Wordless makes themes familiar ✓ Wordless makes you more productive ✓ Wordless lets you use better tools
  47. 47. ✓ Ju Liu @arkh4m ✓ Filippo Gangi Dino @mukkoo ✓ weLaika dev.welaika.com http://github.com/welaika/wordless QUESTIONS! Open Source

×