Skip to content

A modern WordPress development environment

WordPress development can sometimes feel a bit cumbersome, especially when you’re used to more modern frameworks. But with the right tools and a few key plugins, you can bring in some powerful Laravel components that make everything smoother. Sage, in particular, adds Blade templating, which makes the WordPress experience cleaner and more intuitive.

I’m writing this down for myself to remember the setup process, but hopefully, it helps others looking to streamline their own WordPress workflow. Here’s how to set up your own modern WordPress development environment and make your workflow way more enjoyable.

Set Up Local

First off, you need a local WordPress setup, and Local by Flywheel is perfect for the job. It’s free, easy to use, and makes spinning up WordPress sites a breeze. Install it, create a site, and you’re good to go. Nowadays there’s plenty of alternatives, like Laravel Herd.

Sage

Here’s where the magic happens. Sage is a starter theme that’s built for developers who love clean, organized code. It uses Blade for templating, Bud.js for asset management, and follows modern development practices.

To install it, jump into your themes folder and run this command:

$ composer create-project roots/sage your-theme-name

Acorn

Acorn is like a secret weapon for modern WordPress development. It’s a PHP framework that works behind the scenes, powering Sage and letting you use Blade templating (yes, the same templating engine from Laravel).

To install Acorn, follow the steps here: Roots Acorn Installation.

Handy Add-Ons

Sage gets even better when you pair it with these add-ons. These are my preferred ones:

Core Essentials

  • roots/acorn: The backbone of modern Sage development. — Required
  • roots/acorn-prettify[*]: Acorn Prettify contains a collection of modules to apply theme-agnostic front-end modifications to your Acorn-powered WordPress sites.

Tools to Save Time

  • log1x/acf-composer: ACF Composer is the ultimate tool for creating fields, blocks, widgets, and option pages using ACF Builder
  • log1x/navi: A developer-friendly alternative to the WordPress NavWalker.
  • log1x/pagi: A developer-friendly alternative to the WordPress pagination.
  • log1x/poet: Easily register custom post types and taxonomies.

Nice-to-Haves

  • log1x/acorn-disable-media-pages: Disable media attachment pages.
  • log1x/sage-directives: Adds extra shortcuts for Blade templates.
  • log1x/sage-svg: Lets you inline SVGs directly into your Blade templates.

Linting

I don’t like to think about formatting and code structure, so adding linting tools to your project is a no-brainer. Tools like ESLint, Stylelint, and PHP_CodeSniffer catch errors and keep your code consistent.

Follow the guide here to set up linting: Adding Linting.

[*]

Prettify has bitten me before with two specific settings:

// config/prettify.php
'clean-up' => [
        /**
         * Enable clean up.
         */
        'enabled' => false,
         ...

         /**
         * Disable gallery CSS.
         */
        'disable-gallery-css' => false,
];
  • clean-up is set to true by default. However, this broke some JS features on some plugins. Specifically Lightbox with PhotoSwipe.
  • disable-gallery-css is also set to true. Obviously, you need to set this to false if you want to keep the native WordPress galleries.

References & links