Agile Wordpress

download Agile Wordpress

of 66

  • date post

  • Category


  • view

  • download


Embed Size (px)


Wordless and Wordmove, Torino Coding Society, 24/02/2014

Transcript of Agile Wordpress

  • AgileWordPress @Pioneer_Skies @mukkoo Torino Coding Society 24/02/2014
  • What is WordPress?
  • 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
  • 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
    2 3 4 5 6 7 8 9 10 11 12 13
    Source: twentythirteen/index.php, line 20
  • You can mix PHP and Javascript... 1 2 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
  • 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. Its 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 couldnt 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!
  • 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 Rails tree
  • Why Wordless is good Every Wordless theme has this same, identical structure You always know where to nd things Conventions are good

HTML #content .left.column %h2 Ciao TCS! - $info = "Siete caldi?" %p= $info .right.column %ul %img(src="one.jpg") %img(src="two.jpg") %img(src="three.jpg") HAML SASS 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 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. Its 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 "Filling the #{container} with #{liquid}..." ingredients = ["coffee", "milk", "syrup", "ice"] result = (fill(elem) for elem in ingredients) CoffeeScript 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; })(); Why we use it

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

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 /dpl/ 46% freelancer 78% uses FTP for deploying 76% worked live on production No common approach for database via Smashing Magazine | WordPress usage Bad habits Manual tasks Good habits Automation Bad habits No conventions Shared practices Good habits Bad habits Late deploy & Live coding Deploy early, deploy often Good habits wordmove $ 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: "" wordpress_path: "/var/www/" database: name: "wpday" user: "welaika" password: "p4ssw0rd" host: "localhost" ssh: user: "welaika" password: "sshpass" host: " Is SSH an expensive dream? Keep calm and use FTP. It is supported as well :) Lets move your code $ wordmove push --all $ 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] Multistage Movefilelocal: vhost: "http://wpday.local" wordpress_path: "/home/welaika/sites/wpday.local" database: [...] demo: vhost: "" wordpress_path: "