wordless, stop writing wordpress themes like it's 1998

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 /* 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

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.

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 cumbersome to pass a project made

by a developer to another developer.

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 couldn’t move across projects quickly

and be agile and dynamic.

We needed conventions

We needed a more structured organization,

a “framework”: always know where to put

files and where to find them.

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

We needed something else!

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├──── config│ ├──── initializers│ └──── locales└──── theme ├──── assets │ ├──── javascripts │ └──── stylesheets ├──── helpers │ └──── README.mdown └──── views ├──── layouts └──── posts

Folder structure

Why Wordless is good

✓ Every Wordless theme has this same,

identical structure

✓ You always know where to find things

✓ Conventions are good <3

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

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:

BETTER FRONTEND TOOLS

Wordless supports

✓ HAML for writing beautiful HTML

✓ SASS for writing concise CSS

✓ CoffeeScript for writing safer JavaScript

Your production server will just use PHP,

HTML, CSS and JavaScript. No worries!

Wordless automatically compiles

all these great languages for you.

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.

<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

<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

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.

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 SASS & Compass

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

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

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

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

CoffeeScript

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

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

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 yearson 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() ) { 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

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

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

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 Source