wordless, stop writing wordpress themes like it's 1998
DESCRIPTION
All the power of Haml, Compass and Coffeescript, in your WordPress theme. Stop writing themes like it's 1998. http://welaika.github.com/wordlessTRANSCRIPT
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