Tag: coding

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?

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