A modern web stack for WordPress plugins or themes in 2024.

I think the deepest way of learning something is by attempting to write about it or to teach others and since I was out-of-date with this subject I’ve decided to do a freshup about what a WordPress plugin or theme should contain in its development repository.

Let’s start with an obvious spoiler for people who are just starting in this field, in order to build a modern stack of tools for WordPress development you need to have on your device things like:

  • NodeJS
  • Docker
  • git – if you want to be modern
  • svn – if you want to publish on wordpress.org

I also think that your life would be easier in the WordPress development world if you understand the basics of:

  • NPM / Yarn
  • WebPack
  • Composer
  • ReactJS

WordPress environment

I want to say that the most important thing nowadays is to have a WordPress environment ready to start a click and even if the coolest thing at the moment is Playground(which is useful to end users), I’m rather happy to talk about the @wordpress/env npm package which is more useful to developers.

This npm package relies on Docker to start a WordPress instance as fast as you can blink. It can start a WordPress site based on a certain configuration held in the .wp-env.json file which looks like this:

{
  "core": "https://wordpress.org/wordpress-5.4-beta2.zip",
  "plugins": [
    "../../my-fancy-plugin/",
    "https://downloads.wordpress.org/plugin/classic-editor.1.5.zip",
    ".",
    "WordPress/gutenberg#master"
  ],
  "port": 1000,
  "testsPort": 1001,
  "config": {
    "WP_DEBUG_DISPLAY": true
  }
}

No more docker-compose headaches, no more different setups between developers, and hopefully, we will hear the phrase “But it works on my machine!” fewer times.

This is just a glimpse of what it can do, and maybe the first thing that comes to your mind is “Hey, I can replace Xamp or LocalWP with wp-env” which would not be wrong at all. Basic configurations are possible like:

  • PHP version.
  • WordPress version.
  • List of plugins to start with.
  • The theme of the started site can be local or from the WordPress repository.
  • Local port to start on.

But in my opinion, the most important thing is that it opens the possibility to run scripts, unit tests, code coverages, or continuous integration/continuous delivery way easier than ever. Some advanced things we will be able to do with wp-env:

  • Run wp-cli commands at different lifecycles of the instance.
  • Import settings or content before starting the website.
  • Compile assets, check coding styles, or do anything within the npm run spectrum before starting the instance. Basically, prepare the product for production before testing it.
  • Run Unit tests or end-to-end tests.
  • Xdebug and IDE support is available. This should make things easier to debug.
  • PHP and Apache custom configurations.

All of these combined with the power of GitHub actions will help you make a production setup that will make even some big corporations envy you.

By the way, all of this is free and open-source 😉 

Simple start

Assuming you have Docker running and NodeJs installed on your machine it is surprisingly simple to start a WordPress instance.

First, we need to make sure we have wordpress-env installed globally, so we open the terminal and run this only once:

npm -g i @wordpress/env

Whenever you need a WordPress instance with a user admin with password password just run this:

npx wp-env start --update

Here’s a preview, isn’t this the fastest way of running a testing ground?

A gif displaying how you can start a WordPress instance with wordpress-env.

Note: This preview comes from a macOS environment, but I’ve been testing it on a Windows machine with Docker and WSL 2 and it works as well as on my Macbook.

Unexpected wrap-up

I wanted to write a long article with many examples of how could we use this tool but now I’ve changed my mind. I will end this one right now and I’ll come back with articles on some specific examples of how to use the @wordpress-env package because I feel like each example would require a better description.

Let’s keep up with this list:

  • To be continued

My Journey at WordCamp Europe 2017

My fellows from Pixelgrade and I attended WordCamp Europe 2017 in Paris, and I must admit it was a blast. Again. Luckily, I haven’t lost anything this year. Yaaay!

This was my first time in Paris, but visiting a vastly cultural city didn’t overcome my expectations as the event itself did. I admit that I’m not such a great fan of Paris. Instead, I truly enjoyed the beauty of WordCamp and the warm of people from 79 countries all over the world.

In this article, I want to share with you some specific thoughts about my journey: the talks that I enjoyed most, the people who changed my perspective, the WordPress mates who shared useful stuff.

Continue reading

The art of assumption making

Don’t ask yourself what is the art of assumption making yet, just ask if you have ever seen the assumption-making as an art? Can you see it now if you take your time to think about it deeply? First time when I asked myself this question, I was like, “Well, at least the person who assumes right all the time must be a successful one, no?”

Continue reading

Add theme suggestions for plugins for real

This article is about my thoughts on different scenarios regarding the moment when a WordPress theme adds plugin suggestions in a clear and useful way.

I think the whole WordPress community raises a strong need for a visible and clear relationship between plugins and themes. I came across situations when a theme adds a style for a certain plugin, but the same WordPress doesn’t offer a clear way to tell us “What plugins can I use with this theme?

Continue reading

Automated Testing, what can they bring

Please let me set your expectations from scratch. I really want to highlight the fact that I’m NOT an Automated Testing Guru, neither a testing-driven developer. I wrote a few tests in my “coding” life, and half of them I’ve already deleted because I’m way too embarrassed to showcase them. However, I see the added value they bring, and honestly, I want to pitch my colleagues at PixelGrade that we should take advantage of automatic tests. We want to deliver flawless WordPress products from top to toe.

Continue reading