Agile Wordpress

AgileWordPress
@Pioneer_Skies @mukkoo
Torino Coding Society 24/02/2014

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 ﬁrst 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

✓ CMS standard
✓ So many plugins!
✓ Huge community

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 ﬁlters
๏ 6 actions
๏ 15 functions
๏ 527 lines

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

We needed conventions
We needed a more structured organization,
a “framework”: always know where to put
ﬁles and where to ﬁnd 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!

✓ 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 Rails tree

Why Wordless is good
✓ Every Wordless theme has this same,
identical structure
✓ You always know where to ﬁnd 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 ﬁle

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:

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 TCS!</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 TCS!
- $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
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

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

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

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

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

Wordmove
Capistrano for Wordpress

To install, test and implement
a computer system or application.
DEPLOY
/dɪˈplɔɪ/

✓ 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

Bad habits
Late deploy & Live coding

Deploy early, deploy often
Good habits

$ gem install wordmove
$ cd ~/dev/blog
$ wordmove init

Movefilelocal:
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”

Is SSH an
expensive dream?
Keep calm and use FTP.
It is supported as well :)

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

Movefilelocal:
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:
[...]

$ wordmove push -t -e [demo | production]

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

Good to know!
✓ DB serialized arrays translation (cForms anyone?)
✓ DB deploy over FTP? Yes, we can!
✓ Invoke wordmove from anywhere in your project tree

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 ﬁx it!

✓ 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

Agile Wordpress

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Agile Wordpress

Similar to Agile Wordpress (20)

Recently uploaded

Recently uploaded (20)

Agile Wordpress