This document discusses Wordless, a WordPress plugin that aims to standardize theme development. It provides default theme structures, initializers, and helpers to make projects more repeatable and familiar. Wordless also supports preprocessing languages like HAML, SASS, and CoffeeScript to write HTML, CSS, and JavaScript more efficiently. The document explains how these features help developers work across projects more quickly by enforcing conventions and structure.

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

2. Why WordPress?

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

4. Lots of freedom!

5. Freedom is good.

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

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. 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. Write everything in functions.php
Source: twentythirteen
๏ 3 filters
๏ 6 actions
๏ 15 functions
๏ 527 lines

10. Okay, this works.

11. 3 months later...

13. Our story

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.

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

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.

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

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

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

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

21. So we made Wordless.

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

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

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

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

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:

27. BETTER FRONTEND TOOLS

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

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

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.

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

32. <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

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.

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

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

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

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

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

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

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

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

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

43. Why we use it

44. <?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

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. - $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

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

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