Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Supercharging WordPress Development - Wordcamp Brighton 2019

190 views

Published on

Slide links:
- https://lumberjack.rareloop.com
- https://docs.lumberjack.rareloop.com
- https://github.com/Rareloop/lumberjack-bedrock-installer
- https://github.com/Rareloop/lumberjack
- https://github.com/Rareloop/lumberjack-validation
- https://github.com/Rareloop/hatchet
- rareloop.com/careers
- https://www.rareloop.com/posts/comparing-modern-mvc-wordpress-frameworks/

- https://lizkeogh.com/2017/08/31/reflecting-reality/amp
- https://www.youtube.com/watch?v=uQUxJObxTUs
- https://www.upstatement.com/timber
- https://roots.io/bedrock
---

Often WordPress themes are not easy to change, maintain or fun to work on. This can rule WordPress out as a viable option for bespoke, non-trivial websites.

In this talk we’ll dive into how this happens & look at how we can benefit from software engineering techniques to help make your code easier to change. I’ll also show how using Lumberjack, a powerful MVC framework built on Timber, can be used to power-up your themes.

Published in: Software
  • Be the first to comment

  • Be the first to like this

Supercharging WordPress Development - Wordcamp Brighton 2019

  1. 1. Supercharging 
 WordPress Development by Adam Tomat @adamtomat Slack
  2. 2. Digital Product Studio
  3. 3. Projects vs Products
  4. 4. Projects Cost of Introduction - Only adding new code (e.g. controllers, models etc)
  5. 5. Cost of Change - Making changes to existing code Cost of Ownership - Refactoring, writing tests etc Products Cost of Introduction - Only adding new code (e.g. controllers, models etc)
  6. 6. Konstantin Kudryashov - Laracon EU 2015
  7. 7. – Liz Keogh “You’re not really ‘done’ until the software has been retired and is no longer used at all”
  8. 8. Make your website
 easier to change.
  9. 9. I ❤ PHP I ❤ WordPress
  10. 10. Photo from Unsplash
  11. 11. Photo by Headway on Unsplash
  12. 12. “Not Waving But Drowning” - Stevie Smith Photo by Ian Espinosa on Unsplash
  13. 13. Starts with drips
  14. 14. Cognitive Behavioural Therapy
  15. 15. • Traffic on the way to work • Worrying about your body image • Not getting enough sleep • Financial difficulties • Worries about keeping a job • Being isolated Life: What can fill up your bathtub?
  16. 16. • Slow getting setup on project • Applying the same change/code across multiple files • Unstructured and undocumented setup • Introducing bugs or regressions • Painful deployments • Different conventions/style within the code (inconsistent) • Unable to change the current situation WordPress: What fills your bathtub?
  17. 17. What does this code look like?
  18. 18. $the_query = new WP_Query([ 'posts_per_page' => 5, 'tag' => 'club' ]); if ($the_query->have_posts()) : ?> <h4>Recent Articles</h4> <ul> <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?> <li class="article"> <h3><?php the_title(); ?></h3> <?php the_excerpt(10); ?> <a href="<?php the_permalink(); ?>">Read more</a> </li> <?php endwhile; ?> </ul> <?php endif; ?> t Mix of concerns: Presentation logic & Database queries " This file has multiple reasons to change index.php
  19. 19. $the_query = new WP_Query([ 'posts_per_page' => 5, 'tag' => 'club' ]); if ($the_query->have_posts()) : ?> <h4>Recent Articles</h4> <ul> <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?> <li class="article"> <h3><?php the_title(); ?></h3> <?php the_excerpt(10); ?> <a href="<?php the_permalink(); ?>">Read more</a> </li> <?php endwhile; ?> </ul> <?php endif; ?> t Procedural " Procedural code is often not DRY or reusable.
 
 It’s difficult to change. Hard to read. index.php
  20. 20. odel C M V iew ontroller
  21. 21. https://www.rareloop.com/posts/comparing-modern-mvc-wordpress-frameworks/ WordPress MVC Frameworks
  22. 22. CONTENT SITE BESPOKE SYSTEM Project Spectrum
  23. 23. Photo from Unsplash
  24. 24. Timber https://giphy.com/gifs/oVsOZtcdAjvgs
  25. 25. <?php $context = Timber::get_context(); $context['posts'] = Timber::get_posts([ 'posts_per_page' => 5, 'tag' => 'club' ]); Timber::render('index.twig', $context); {% if posts is not empty %} <h4>Recent Articles</h4> <ul> {% for post in posts %} <li class="article"> <h3>{{ $post->title }}</h3> {{ $post->preview }} <a href="{{ $post->link }}">Read the full story</a> </li> {% endfor %} </ul> {% endif %} index.twig index.php
  26. 26. What are the problems with Timber controllers?
  27. 27. <?php $context = Timber::get_context(); $context['posts'] = Timber::get_posts([ 'posts_per_page' => 5, 'tag' => 'club' ]); Timber::render('index.twig', $context); index.php t Procedural " Procedural code is often not DRY or reusable.
 
 It’s difficult to change. Hard to read.
  28. 28. index.php class IndexController { } public function handle() { $context = Timber::get_context(); $context['posts'] = Timber::get_posts([ 'posts_per_page' => 5, 'tag' => 'club' ]); } extends BaseController return view('index.twig', $context);
  29. 29. index.php class IndexController extends BaseController { public function handle() { $context = Timber::get_context(); $context['posts'] = $this->getPosts(); return view('index.twig', $context); } private function getPosts() { return Timber::get_posts([ 'posts_per_page' => 5, 'tag' => 'club' ]); } }
  30. 30. Benefits • Write Object Orientated code rather than Procedural code • Separation of concerns • Easier to write DRY code • Can use inheritance to extend a base class for common functionality • Can encapsulate more complex routines in private functions
  31. 31. Setting up a project
 &
 Deploys
  32. 32. Traditional WordPress Theme WordPressTimber Yoast ACF
  33. 33. Bedrock https://giphy.com/gifs/the-flintstones-NZqSk0vCSYLnO
  34. 34. Theme Bedrock Bedrock WordPress v5.2.* Timber v1.9.* Wordpress SEO v11.8.* ACF v5.8.2
  35. 35. How does Lumberjack fit into this?
  36. 36. Lumberjack Starter Theme Lumberjack + Bedrock = ❤ Bedrock Lumberjack Core v4.3.* WordPress v5.2.* Timber v1.9.* Wordpress SEO v11.8.* ACF v5.8.2
  37. 37. Take Lumberjack for a spin
  38. 38. Benefits • Structured file system • Dependencies managed (install with 1 command) • Easier & safer deploys • Quicker to get setup on a project
  39. 39. Querying Data
  40. 40. $args = [ 'post_type' => 'product', 'posts_per_page' => 10, 'orderby' => 'title', 'order' => 'ASC', 'meta_query' => [ 'relation' => 'AND', [ 'key' => 'available_from_date', 'value' => [$from_date, $to_date], 'compare' => 'BETWEEN', 'type' => 'DATE', ], [ 'key' => 'available_to_date', 'value' => [$from_date, $to_date], 'compare' => 'BETWEEN', 'type' => 'DATE', ], ] ]; $query = new WP_Query($args); $posts = $query->get_posts();
  41. 41. use TimberPost; $post = new Post(1); $collection = Timber::get_posts($wpQueryArray); Timber Post Object
  42. 42. use RareloopLumberjackPost; use AppPostTypesProduct; $post = new Post(1); $collection = Post::query($wpQueryArray); $product = new Product(1); $collection = Product::query($wpQueryArray); Lumberjack Post Object
  43. 43. class Product extends Post { public function getPhotos() : array { // Do database query to get the assigned photos } } Encapsulate Business Logic $product = new Product(123); $photos = $product->getPhotos();
  44. 44. class Product extends Post { } Register Custom Post Types // config/posttypes.php return [ 'register' => [ AppPostTypesProduct::class, ], ]; protected static function getPostTypeConfig() { return [ 'labels' => [ 'name' => __('Products'), 'singular_name' => __('Product'), ], 'public' => true, 'has_archive' => false, ]; } public static function getPostType() { return 'product'; }
  45. 45. Supercharged Queries
  46. 46. Advanced Queries $productType = new ProductType; $products = Product::builder() ->whereMeta('type', '"' . $productType->id . '"', 'LIKE') ->limit(10) ->orderBy('title', 'asc') ->get();
  47. 47. Using the Query Builder directly $products = QueryBuilder::wherePostType([ Product::getPostType(), GiftSet::getPostType(), ]) ->limit(10) ->orderBy(‘title', 'asc') ->get();
  48. 48. Supercharged Custom Requests
  49. 49. Router::get('hello/world', function () { return HtmlResponse('<h1>Hello World!</h1>'); }); Simple Routes use RareloopLumberjackFacadesRouter; use ZendDiactorosResponseHtmlResponse;
  50. 50. Router::get('hello/{name}', function ($name) { return HtmlResponse('<h1>Hello ' . $name . '!</h1>'); }); echo Router::url('hello.world', ['name' => 'adam']); ->name('hello.world'); Params & Named Routes
  51. 51. Router::get('hello/world', 'HelloController@show'); Controller Definitions
  52. 52. AJAX endpoint that returns JSON class ArticleCommentController { } Router::post('articles/{id}/comments', 'ArticleCommentController@store'); public function store(int $id) { } $comment = request()->input('comment'); wp_new_comment([ 'comment_post_ID' => $id, 'comment_author' => get_current_user_id(), 'comment_content' => $comment, ]); return new JsonResponse([ 'data' => [ 'content' => $comment, ] ], 201);
  53. 53. • Extend WordPress site with custom URL endpoints (e.g. for ajax, forms) • Access to all REST based verbs • Can add Groups, for collecting similar resources together • Named routes • You have a convention & documentation Router benefits
  54. 54. • Config • PSR11 Dependency Injection Container (using PHP-DI) • Facades • Exception Handling (PSR3) • Validation (currently an external package) • View Models More power at your fingertips ✨ • Service Providers • Hatchet (CLI) • Global helper functions (e.g. config(‘app.environment’); ) • ‘Responsable’ objects (from Laravel) - in, but currently undocumented • Sessions
  55. 55. • Slow getting setup on project • Applying the same change/code across multiple files • Unstructured and undocumented setup • Introducing bugs or regressions • Painful deployments • Different conventions/style within the code (inconsistent) • Unable to change the current situation WordPress: What fills your bathtub?
  56. 56. • Evaluate the product mindset for you (and your team?) • WordPress is awesome, we can make it even more awesome! • Challenge and push your stack forward. Don’t accept dripping taps • Write code which is easier to change, where applicable • Give MVC WordPress a go • Use only what you need to in Lumberjack In summary…
  57. 57. Photo by tanialee gonzalez on Unsplash
  58. 58. docs.lumberjack.rareloop.com Documentation rareloop.com/careers Join Our Team lumberjack.rareloop.com Website
  59. 59. Get Involved ⭐
  60. 60. https://giphy.com/gifs/just-thanks-KJ1f5iTl4Oo7u

×