Agile Wordpress

671 views

Published on

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

Published in: Software
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
671
On SlideShare
0
From Embeds
0
Number of Embeds
247
Actions
Shares
0
Downloads
3
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Agile Wordpress

  1. 1. AgileWordPress @Pioneer_Skies @mukkoo Torino Coding Society 24/02/2014
  2. 2. What is WordPress?
  3. 3. 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
  4. 4. Why WordPress?
  5. 5. ✓ CMS standard ✓ So many plugins! ✓ Huge community
  6. 6. Lots of freedom!
  7. 7. Freedom is good.
  8. 8. Some of them want to abuse you Some of them want to be abused FREEDOM
  9. 9. 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
  10. 10. 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.
  11. 11. Write everything in functions.php Source: twentythirteen ๏ 3 filters ๏ 6 actions ๏ 15 functions ๏ 527 lines
  12. 12. Okay, this works.
  13. 13. 3 months later...
  14. 14. Our story
  15. 15. 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.
  16. 16. Developer Lock-in Theorem A developer can work on a project if and only if he has built it.
  17. 17. 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.
  18. 18. We needed conventions We needed a more structured organization, a “framework”: always know where to put files and where to find them.
  19. 19. A better workflow We want to make projects repeatable and familiar. We like familiar.
  20. 20. Style guides, Wikis, Docs ๏ Kind of hard to write ๏ Very easy to forget ๏ Very easy to ignore We needed something else!
  21. 21. So we made Wordless.
  22. 22. ✓ Default theme structure ✓ Initializers and helpers ✓ Better frontend tools Wordless, a WordPress plugin
  23. 23. 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
  24. 24. Why Wordless is good ✓ Every Wordless theme has this same, identical structure ✓ You always know where to find things ✓ Conventions are good <3
  25. 25. 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
  26. 26. 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:
  27. 27. BETTER FRONTEND TOOLS
  28. 28. Wordless supports ✓ HAML for writing beautiful HTML ✓ SASS for writing concise CSS ✓ CoffeeScript for writing safer JavaScript
  29. 29. Your production server will just use PHP, HTML, CSS and JavaScript. No worries! Wordless automatically compiles all these great languages for you.
  30. 30. 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.
  31. 31. <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
  32. 32. 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.
  33. 33. 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
  34. 34. 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!”
  35. 35. 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
  36. 36. 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; })();
  37. 37. Why we use it
  38. 38. <?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
  39. 39. - $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
  40. 40. Why Wordless ✓ Wordless makes themes familiar ✓ Wordless makes you more productive ✓ Wordless lets you use better tools
  41. 41. Wordmove Capistrano for Wordpress
  42. 42. To install, test and implement a computer system or application. DEPLOY /dɪˈplɔɪ/
  43. 43. ✓ 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
  44. 44. Bad habits Manual tasks
  45. 45. Good habits Automation
  46. 46. Bad habits No conventions
  47. 47. Shared practices Good habits
  48. 48. Bad habits Late deploy & Live coding
  49. 49. Deploy early, deploy often Good habits
  50. 50. wordmove
  51. 51. $ gem install wordmove $ cd ~/dev/blog $ wordmove init
  52. 52. 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”
  53. 53. Is SSH an expensive dream? Keep calm and use FTP. It is supported as well :)
  54. 54. Let’s move your code
  55. 55. $ wordmove push --all
  56. 56. $ 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]
  57. 57. Multistage
  58. 58. 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: [...]
  59. 59. $ wordmove push -t -e [demo | production]
  60. 60. $ 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]
  61. 61. Good to know! ✓ DB serialized arrays translation (cForms anyone?) ✓ DB deploy over FTP? Yes, we can! ✓ Invoke wordmove from anywhere in your project tree
  62. 62. 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!
  63. 63. ✓ 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

×