Slide 1
Slide 1 text
Agile WordPress
@Pioneer_Skies @mukkoo
Torino Coding Society 24/02/2014
Slide 2
Slide 2 text
What is WordPress?
Slide 3
Slide 3 text
WordPress is a free and open source blogging tool and a CMS based on PHP
and MySQL. Features include a plug-in architecture and a template system.
WordPress is used by more than 18.9% of the top 10 million websites as of
August 2013. WordPress is the most popular blogging system in use on the
Web, at more than 60 million websites.
It was first released on May 27, 2003, by its founders, Matt Mullenweg and
Mike Little, as a fork of b2/cafelog. As of February 19, 2014, version 3.8 had
been downloaded more than 20 million times.
WORDPRESS
Slide 4
Slide 4 text
Why WordPress?
Slide 5
Slide 5 text
✓ CMS standard
✓ So many plugins!
✓ Huge community
Slide 6
Slide 6 text
Lots of freedom!
Slide 7
Slide 7 text
Freedom is good.
Slide 8
Slide 8 text
Some of them want to abuse you
Some of them want to be abused
FREEDOM
Slide 9
Slide 9 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 10
Slide 10 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 11
Slide 11 text
Write everything in functions.php
Source: twentythirteen
๏ 3 filters
๏ 6 actions
๏ 15 functions
๏ 527 lines
Slide 12
Slide 12 text
Okay, this works.
Slide 13
Slide 13 text
3 months later...
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
Our story
Slide 16
Slide 16 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 17
Slide 17 text
Developer Lock-in Theorem
A developer can work on a project
if and only if he has built it.
Slide 18
Slide 18 text
The problems we had
We have a team of 6 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 19
Slide 19 text
We needed conventions
We needed a more structured organization,
a “framework”: always know where to put
files and where to find them.
Slide 20
Slide 20 text
A better workflow
We want to make projects repeatable
and familiar. We like familiar.
Slide 21
Slide 21 text
Style guides, Wikis, Docs
๏ Kind of hard to write
๏ Very easy to forget
๏ Very easy to ignore
We needed something else!
Slide 22
Slide 22 text
So we made Wordless.
Slide 23
Slide 23 text
✓ Default theme structure
✓ Initializers and helpers
✓ Better frontend tools
Wordless, a WordPress plugin
Slide 24
Slide 24 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 Rails tree
Slide 25
Slide 25 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 26
Slide 26 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 27
Slide 27 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 28
Slide 28 text
BETTER FRONTEND TOOLS
Slide 29
Slide 29 text
Wordless supports
✓ HAML for writing beautiful HTML
✓ SASS for writing concise CSS
✓ CoffeeScript for writing safer JavaScript
Slide 30
Slide 30 text
Your production server will just use PHP,
HTML, CSS and JavaScript. No worries!
Wordless automatically compiles
all these great languages for you.
Slide 31
Slide 31 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 32
Slide 32 text
Ciao TCS!
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
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 35
Slide 35 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 36
Slide 36 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 37
Slide 37 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 38
Slide 38 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 40
Slide 40 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 41
Slide 41 text
Why Wordless
✓ Wordless makes themes familiar
✓ Wordless makes you more productive
✓ Wordless lets you use better tools
Slide 42
Slide 42 text
No content
Slide 43
Slide 43 text
Wordmove
Capistrano for Wordpress
Slide 44
Slide 44 text
To install, test and implement
a computer system or application.
DEPLOY
/dɪˈplɔɪ/
Slide 45
Slide 45 text
✓ 46% freelancer
✓ 78% uses FTP for deploying
✓ 76% worked live on production
✓ No common approach for database
via Smashing Magazine | http://bit.ly/1atrWRp
WordPress usage
Slide 46
Slide 46 text
Bad habits
Manual tasks
Slide 47
Slide 47 text
Good habits
Automation
Slide 48
Slide 48 text
Bad habits
No conventions
Slide 49
Slide 49 text
Shared practices
Good habits
Slide 50
Slide 50 text
Bad habits
Late deploy & Live coding
Slide 51
Slide 51 text
Deploy early, deploy often
Good habits
Slide 52
Slide 52 text
wordmove
Slide 53
Slide 53 text
$ gem install wordmove
$ cd ~/dev/blog
$ wordmove init
Slide 54
Slide 54 text
Movefile
local:
vhost: "http://wpday.local"
wordpress_path: "/home/welaika/sites/wpday.local"
database:
name: "wpday"
user: "root"
password: "root"
host: "localhost"
remote:
vhost: "http://wpday.welaika.com"
wordpress_path: "/var/www/wpday.welaika.com"
database:
name: "wpday"
user: "welaika"
password: "p4ssw0rd"
host: "localhost"
ssh:
user: "welaika"
password: "sshpass"
host: "mt.welaika.com”
Slide 55
Slide 55 text
Is SSH an
expensive dream?
Keep calm and use FTP.
It is supported as well :)
Slide 56
Slide 56 text
Let’s move your code
Slide 57
Slide 57 text
$ wordmove push --all
Slide 58
Slide 58 text
$ wordmove help push
Usage:
wordmove push
Options:
-w, [--wordpress]
-u, [--uploads]
-t, [--themes]
-p, [--plugins]
-l, [--languages]
-d, [--db]
-v, [--verbose]
-s, [--simulate]
-e, [--environment=ENVIRONMENT]
-c, [--config=CONFIG]
[--no-adapt]
[--all]
Slide 59
Slide 59 text
Multistage
Slide 60
Slide 60 text
Movefile
local:
vhost: "http://wpday.local"
wordpress_path: "/home/welaika/sites/wpday.local"
database:
[...]
demo:
vhost: "http://wpday.demo.welaika.com"
wordpress_path: "/var/www/wpday.demo.welaika.com"
database:
[...]
ftp:
[...]
production:
vhost: "http://wpday.welaika.com"
wordpress_path: "/var/www/wpday.welaika.com"
database:
[...]
ssh:
[...]
Slide 61
Slide 61 text
$ wordmove push -t -e [demo | production]
Slide 62
Slide 62 text
$ wordmove help pull
Usage:
wordmove pull
Options:
-w, [--wordpress]
-u, [--uploads]
-t, [--themes]
-p, [--plugins]
-l, [--languages]
-d, [--db]
-v, [--verbose]
-s, [--simulate]
-e, [--environment=ENVIRONMENT]
-c, [--config=CONFIG]
[--no-adapt]
[--all]
Slide 63
Slide 63 text
Good to know!
✓ DB serialized arrays translation (cForms anyone?)
✓ DB deploy over FTP? Yes, we can!
✓ Invoke wordmove from anywhere in your project tree
Slide 64
Slide 64 text
WORDMOVE
✓ Fully automated, only one command to deploy
✓ Frequent and fast deploy... on multiple environments
✓ Push and pull operations
✓ If it doesn’t work, than fix it!
Slide 65
Slide 65 text
✓ Alessandro Fazzi @Pioneer_Skies
✓ Filippo Gangi Dino @mukkoo
✓ weLaika dev.welaika.com
http://github.com/welaika/wordless
QUESTIONS!
Open Source
http://github.com/welaika/wordmove
Slide 66
Slide 66 text
No content