I used to develop a WordPress theme and one problem is that I took a lot of time figuring what editor to use and trying to set up a LAMP stack which had issues porting it over to another OS.
In this article I’ll cover the main tools for starting your development for WordPress. You’ll just need two items, the IDE and the Local Server.
This should hopefully take you less than an hour’s worth of work so you can start cracking on your very first plugin! Or Theme or Gutenberg Block.
Let’s go! First stop, the IDE.
IDE
I use VSCode. It’s free and it has a lot of extensions to aid in your development. The extensions I have installed are PHP Intelephense, PHP Debug and WordPress Snippets.
Definitely install WordPress Snippets because it will save you a lot of time finding that WordPress function!
Local Server
I’ve been using Docker for all my dev environments. Docker is a platform that uses OS-level virtualization to deliver your apps in packages called containers. It’s similar to a VM like VirtualBox and Vagrant but more lightweight. It’s available in Linux, Mac OSX and Windows so you won’t have issues installing it. If you’re new to Docker, I recommend reading it up @ https://www.docker.com/101-tutorial
The good thing is WordPress already came out with a Docker image. On their docker hub page, they provided a template to bring up the entire WordPress stack including MySQL using Compose.
For a quick refresher, the Docker Compose brings up multiple containers and establishes links between them. So if you have an app that needs to interact with a database, rather than putting all in one container, you can separate them and have Compose orchestrate the containers.
I’ve also tweaked the template to bring up volumes and automatically include my plugins folder. This way my local WordPress instance will automatically install any plugins I put in the folder. The changes in your plugin should also reflect immediately. You can do the same for themes.
Here’s the docker-compose.yml I’ve tweaked:
version: '3.1'
services:
wordpress:
image: wordpress
restart: always
ports:
- 8080:80
environment:
WORDPRESS_DB_HOST: db
WORDPRESS_DB_USER: exampleuser
WORDPRESS_DB_PASSWORD: examplepass
WORDPRESS_DB_NAME: exampledb
volumes:
- wordpress:/var/www/html
- ./plugins:/var/www/html/wp-content/plugins
- ./config/uploads.ini:/usr/local/etc/php/conf.d/uploads.ini
db:
image: mysql:5.7
restart: always
environment:
MYSQL_DATABASE: exampledb
MYSQL_USER: exampleuser
MYSQL_PASSWORD: examplepass
MYSQL_RANDOM_ROOT_PASSWORD: '1'
volumes:
- db:/var/lib/mysql
adminer:
image: adminer
restart: always
ports:
- 8081:8080
volumes:
wordpress:
db:
docker-compose.yml
If for whatever reason you want to upload a large plugin into your local WordPress site, you might encounter a file upload max limit error. To resolve this, simply overwrite the PHP settings with a config file with the Docker volume.
file_uploads = On upload_max_filesize = 256M post_max_size = 256M
uploads.ini
After setting up the Compose file, you can now simply run docker-compose up. This will bring up your local WordPress website on http://localhost:8080. You can also access the MySQL database at http://localhost:8081 with Adminter. The first time you visit your site you will be prompted to fill in the Site details and Admin Credentials. Just keep it simple.
When you want to stop serving your site, you can run docker-compose down. To tear down the whole volume, add the -v parameter. But take note! Taking down the volume means losing all your site and database data! You’ll have to fill in the site details again.
That’s all for now!
Is this the dev environment you use as well? Is it enough? Let me know below in the comments section! Or if you have any feedbacks.
Join my FB Group if you want to discuss anything related to WordPress development!