Saptak MandalAs you guys know WordPress is a very powerful tool and controls a big part of the internet websites you are seeing right now. WordPress development is also a great thing, In WordPress, there is a lot of potential in actually developing something for it. Companies are making hundreds of millions of dollars just by making some plugins and themes for WordPress. There is a very big opportunity in front of us that can change your life entirely.
WordPress's Gutenberg just recently started being adopted in the mainstream and there is a lot of potential marketing opportunities available for Gutenberg itself. If you start now you can take leverage from it. Keeping that in mind we are starting a new series of articles on how you can actually develop something for WordPress and create a fortune from it.
Even if you are not planing for building something for commercial use you can use your skill to build our website themes, plugins, and blocks which you can't find on any third-party plugin. Since most plugins and themes are open source you can even modify them to get the output as you want.
In this article, we are going to take a look at how we can set up a Gutenberg WordPress development environment in our local machines such as your windows or mac PC. To develop or code something for Gutenberg. If you want to create a custom theme, plugin, block, block pattern, or anything for Gutenberg with your own custom code this guide is for you.
For setting a Gutenberg WordPress development environment we are going to set up three things in our system.
Node/NPM Development Tools to run npm packages.
WordPress Development Site to actually use and test our code on the website.
Code Editor for writing and debugging our code.
Enable debug mode in WordPress
Node Development Tools
The first thing that we need to have in our system is to have Node install. But wait... If you are thinking about why node since you may have created themes and plugins before without node then why it is required now? Also if you are completely new to programming you might be wondering what exactly is a node? So let's first know about these two questions.
What is Node?
Node to be precise Node.js is an open-source, cross-platform, backend JavaScript runtime environment. Node lets you run your JavaScript code outside your web browsers and uses the V8 engine to execute codes. With Node.js you can run applications written in Node.js in Node's runtime environment in OS X, Microsoft Windows, and Linux.
Note just runtime environment but it also provides a lot of rich libraries and various JavaScript modules which can really help you in making a web application, it can help you to the great extent and you'll require to write a lot less code.
Why Node?
As for why Node then the main reason is that Gutenberg is built on the React library and React is a JavaScript Library and node makes things a lot easier if you are trying to develop something with JavaScript. If you are thinking previously while making themes and plugins you mostly use PHP and basic JavaScript.
Let me get it clear PHP is a backend language it has nothing to do with the frontend and if you want to design something for the frontend then there is no escape from JavaScript. Another thing is Gutenberg is mostly on changing the frontend of the WordPress very few changes in the core backend so to develop something for Gutenberg we'll need JavaScript.
Another thing I want to clear is Node is not an absolute requirement, you can skip it. But I don't think it would be a wiser decision to not use the node since even the WordPress team can't think of doing this without Node. The Node can make things very easier for you with its packages.
With node packages that WordPress provides, you can save a lot of time that you spent writing similar code repeatedly. Also managing and debugging your codes will be much easier and simpler. The node itself is a pretty powerful tool and can make your WordPress development a lot easier.
Along with node we also need two other things NPM and NPX. NPM stands for Node Package Manager and is used for managing(installing, uninstalling, and updating) required packages for running our code. NPX stands for Node Package Execute, a high-level explanation this script lets you run packages that are not installed.
Both NPM and NPX scripts come pre-installed with Node so you don't need to do any extra steps to use them. Don't worry if you don't completely understand these tools at the end of the article we have shared some resources where you can learn more about them.
Now let's jump to the actual installation part, to install Node in your system head over to nodejs.org/downloads and download the version based on your operating system. Choose LTS(Long Term Support) version, not the current one because the current is a sort of beta version where you may find bugs or performance issues.
If you are on Mac or Linux, I'll recommend you to use Node Version Manager (nvm) to install the node in your system. It allows you to install a specific version of the node and also install it in your home directory and handle any global permission issues.
Is PHP Only Possible?
The simple answer is no! Gutenberg WordPress development is not possible. Gutenberg is completely based on React.js and developing something for Gutenberg is not possible using only PHP, previously you may have able to developed themes and plugins using PHP but not in the new Gutenberg.
Also, JavaScript is taking over the internet by storm, developers are loving it and more and more people are turning towards it. If till now you are a PHP lover you should consider javascript your new crush.
Basics of NPM
In this guide, we are not going into a full explanation of npm but will try to clear the basics so even if you are a beginner, you won't feel any issue while using it. In our following articles, we are going to take a look at mainly two things using npm: one is for installing required libraries and the second is to use it for running commands to build and compile our code.
Npm is a CLI tool and used for installing any publically available open-source JavaScript libraries or packages. For example, if you want to develop a website with React you will install React library and other supporting packages for React. Similarly for developing Gutenberg WordPress offers a wide range of libraries that you can install using npm, however, we are mostly interested in one particular package: @wordpress/scripts – it can help us a lot in simplifying our configuration.
To install any package you need to run the command in terminal: npm install "package name", and the package will be installed. When you install a library, npm automatically creates a subfolder "node_modules" in the directory where the libraries you have installed will be stored. One thing to keep in mind is that you never need to make any changes manually in this folder, in this folder literally thousands of different files content codes. The libraries installed in this folder are only for development purposes and never need to commit them in our version control system or pushed with themes and plugins files.
Npm didn't itself actually run any installed packages instead you define your packages in the package.json file, After setting up your environment you can use npm to run scripts define in your package.json file.
Basics of NPX
NPX is also a command-line tool, it is used for installing and managing Node.js libraries more easily, you can also say it's kinda an upgraded version of npm. NPX made running executables of Node.js a lot easier than installing and using them with npm.
With NPX you can execute any package from the Node.js library without having to install them it will automatically install that if it's not already installed and execute it directly no need to add it in package.json or typing the package path to run it.
How to Install WordPress Development Site?
Now the second thing that we need is to have a WordPress site to actually run and test the code we write. There are multiple ways of running a WordPress site locally on your system. And we are going to talk in brief about most of the possible options.
1. Local by Flywheel
By far the easiest option to install WordPress locally on the website is to use Local by Flywheel. You just need to download this software and install it. And within few clicks, everything will be set up for you automatically. We have written a complete article on How to install WordPress using Local by Flywheel, head over to that article if you are facing any issue while installing it.
One thing that you need to know while using the Local is your WordPress Plugin directory, your WordPress plugin will be accessible in ~\Local Sites\mywp\app\public\wp-content\plugins
2. WampServer/MAMP
You can also locally install WordPress using WampServer or MAMP software. Both of these tools are very similar and can set up a local server on your system for Gutenberg WordPress development. However, these tools are not WordPress specific so you need to download WordPress separately and use these tools to run WordPress on your locally created server.
You also need to be aware of your WordPress installation directory, since you need to install it manually you'll know where you have installed it. You can follow this guide to install WordPress using WampServer and this guide to install WordPress using MAMP.
3. Docker
Another option is to use Docker to create a local WordPress development environment on your machine. This method is also WordPress's recommended method for running development sites locally.
To run a WordPress site first you need to install Docker on your machine. Based on your system operating system you can see the complete installation process docker from the following links:
Windows 10 Pro
other versions of Windows 10
macOS
Linux
Ubuntu
The WordPress wp-env package is a node package that lets you set up a local WordPress environment for building and testing plugins and themes on your local machine, and the best part it didn't require any additional configuration.
Requirments
The wp-env tool uses Docker to create a virtual machine to run the WordPress site so docker is a must for installing it. You'll also need Node.js and NPM for using the wp-env package so make sure to have them installed in your system too.
Installation of wp-env
After installing the Docker from the above-given links next step is to install the wp-env tool in your system. To install this tool run the following command in your terminal.
npm -g install @wordpress/env
To confirm it is installed and available, use the following command:
wp-env --version
Installation as a local package
If your project already has a package.json, you can use wp-env as a local package. To that first you need to install wp-env locally as a dev dependency:
$ npm i @wordpress/env --save-dev
After that modify your package.json and add an extra command to npm scripts
"scripts": {
"wp-env": "wp-env"
}
To start the environment run the command
wp-env start
You can access your environment in any of your browsers at: http://localhost:8888/, and for this environment by default username is admin and the password is password.
To stop the environment you can run the following command:
$ wp-env stop
If you wanna get more information regarding the Docker Environment check out this documentation @wordpress/env package readme.
Note: One thing I want to clear is Docker and wp-env is not an absolute requirement for Gutenberg WordPress development and other methods such as Local, WAMP, and MAMP are absolutely fine. However, Node is still required to run packages and develop Gutenberg. So make sure to install node even if you don't use wp-env and docker.
4. Remote Server
The fourth but not so recommended option is to use a Remote Server, most of the hosting providers give the option to install WordPress on your server and you can use that too. However, using a Remote Server is not a very appropriate solution for WordPress development, not just the cost but also syncing the changes to the server and running and editing codes there is not so efficient. Instead after developing something completely in the local environment, you should test it on Remote Server.
Code Editor
The third requirement for a WordPress development environment is a Code Editor, and any code editor will work even your notepad. However, you should use advanced code editors such as VS Code, Sublime, Atom, Notepad++, and so on.
Currently, VS Code is a top choice for most developers around the world because it is open source and actively being maintained by Microsoft. Also, it has great community support and tons of extensions available to make your workflow easier.
One VS Code extension I suggest is WordPress Gutenberg Snippets. This plugin is very useful if you are developing your own custom blocks. It has more than 90 powerful snippets that can improve your workflow drastically. Developers of this plugin are planning to add more snippets in upcoming updates.
And in the following articles, we are also going to use VS Code, however, if you prefer any other editor that is also totally fine and you don't need anything extra for coding. The important part is to open edit and save files rest is your personal preference.
How to enable debug mode in WordPress
For WordPress development, it is recommended to enable debug mode for WordPress so if we have any issue in our code we can easily identify and resolve this issue. So let's know about it.
What is WordPress debug mode?
When we made changes in our WordPress website those changes might conflict with other plugins or themes or peace of code and in that case, WordPress gets an error. Sometimes these errors do not occur immediately that's where debug mode comes in handy.
When you enable debug mode for WordPress, it will display a log of PHP errors and potential warnings, even if that is not currently causing any issues. That's why if you are a web developer and want to deliver the best quality products to your customer then debug mode is a must for you, it can make help you code better and cleaner.
Note: It's obvious but still, I am mentioning that debug mode will show your error on the frontend, so if any visitor visits your website will see the error, and that information can be harmful and lead to a bad user experience. So always only enable it on test or stage website.
Now let's see how we can enable it, there are two methods to enable it. Let's take a look at both of them.
Using Plugin
The easiest way of doing this is via a plugin, just install WP Debugging plugin and activate it. After the activation debugging mode for your website will enable automatically no extra steps are required. To stop the debugging mode just simply deactivate the plugin and debugging mode will be turned off.
Using Code
If you don't wanna use an extra plugin for enabling debug mode, then you can make changes in your site configuration, and debug mode will be enabled without any plugin. To do that you need to add a line of code in your config.php file.
Just access your config.php via FTP or if on local then from your file manager and in that file just add the code given below:
define( 'WP_DEBUG', true);
And that's it debug mode for your website is ready now.
Later when you wanna stop debug mode on your site just remove the code or you can also make 'WP_DEBUG', false if you want, both work in the same way.
Resources
The above content is enough to get started on your journey of creating WordPress development, creating custom blocks and plugins. However, you do need some background knowledge of web development. But if you are completely new in web development you might not completely understand what you have read above.
That's why we are sharing some extra resources and these resources will be helpful for both, if you already know about web development or if you are completely new to this.
Learn HTML/CSS
Learn about JS
Node official website
NPM official website
NPX Docs
Docker Docs
Conclusion
You are now ready to start developing things for your WordPress website, we have shared all the details you need to start your WordPress development journey. If you have any doubt, questions, suggestions, or anything at all comments are open for you. We love to hear what you think and how we can improve our content.
Also, keep this in mind Gutenberg is changing a lot and things can change later based on the updates that come in the future. It is highly unlikely requirements change anytime soon but if they did we will try to update it accordingly if we miss anything make sure to drop a comment.
Also, since we are talking about Gutenberg and you are not a developer and didn't wanna get into codes you can do everything without using any codes or programming. I'll recommend you to check our other articles on Gutenberg we have shared many well-detailed articles for you.
