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