Logo

dev-resources.site

for different kinds of informations.

Setting Up a WordPress Development Environment with DDEV

Published at
10/31/2024
Categories
wordpress
development
docker
devtools
Author
sarahcssiqueira
Author
15 person written this
sarahcssiqueira
open
Setting Up a WordPress Development Environment with DDEV

DDEV is a powerful tool that simplifies the process of setting up local development environments for PHP applications, including WordPress. In this guide, I'll walk you through the steps to install DDEV and configure a WordPress development environment.

Requirements:

Once you have this, create your WordPress project directory:

mkdir wp-test-site

Into your directory run

ddev config

Then, choose the project name and the project type, which in this case will be WordPress. Run

ddev start

You will see the output with the path to access your WordPress installation: https://wp-test.ddev.site https://127.0.0.1:port

Access through your choose browser and finish WordPress install.

Simple as that! (Or should be).

Seems kind of dumb for looking at it now, but on the first time I came across it a few months ago, while setting the dev environment for a new project I was assigned to, in the agency I worked, I got stuck with the error: 403 forbidden nginx for quite some time.

Image description

It took me a few to me realize the thing was: there were no WordPress core files into my root project folder.

The solution?

Download the WordPress files to the root folder, duuh.But, it not practical do it everytime I had to start the project. So, my plan here:

Edit the config.yml on .ddev folder

Within the root project folder, find the ./ddev/config.yml file and add this:

hooks:
  post-start:
    - exec: "curl -O https://wordpress.org/latest.tar.gz"
    - exec: "tar -xzf latest.tar.gz --strip-components=1"
    - exec: "rm latest.tar.gz" on config.yml.
Enter fullscreen mode Exit fullscreen mode

What this does is:

  • post-start: This hook runs commands after the DDEV project starts.

And the commands:

  • curl -O https://wordpress.org/latest.tar.gz: Downloads the latest version of WordPress.

  • tar -xzf latest.tar.gz --strip-components=1: Extracts the contents of the tar file into the current directory, removing the top-level directory from the extracted files.

  • rm latest.tar.gz: Cleans up by removing the downloaded tar file.

You can also add a conditional check to verify if the WordPress core files are present, otherwise, everytime you run ddev stop and then ddev start again, it will download the WordPress core files all over again, we don't need that.

Command updated with conditional checks:


hooks:
  post-start:
      - exec: '[ ! -f wp-load.php ] && (curl -O https://wordpress.org/latest.tar.gz && tar -xzf latest.tar.gz --strip-components=1 && rm latest.tar.gz) || echo "WordPress core files already present, skipping download."'
Enter fullscreen mode Exit fullscreen mode

This ensures that the hooks only run the installation if WordPress is not already present. By run ddev start on your terminal, if the WordPress core files are present, you will see the message "WordPress core files already present, skipping download." instead.

Finally, start Your DDEV Project

Run:

ddev start

The first time, may take more time, depending on your internet connection, as it will need to install the core files. But the next times, will be easy peasy.

Important Note: Make sure to run ddev start from your project root directory, where the config.yaml file is located.

It's incredibly useful to share projects among teams, we can also add some other features like ddev pull, to pull the DB of a staging website your team is working for example. You can a*dd environment variables and so on*, but this is out of the scope of this article, which was simply to explain how to start a DDEV environment in a few steps.

I had an old docker environment I developed for personal use over time, wrote about it here. It was a such improvement for me back then (moving from ancient XAMPP), but now, it seems so poor compared to DDEV lol.

That's it for now. Start work with DDEV and Happy coding!

devtools Article's
30 articles in total
Favicon
Simplify Email Testing with a Local Papercut SMTP Server Using Docker
Favicon
Performance Audit: Analyzing Namshi’s Mobile Website with Live Core Web Vitals
Favicon
How Daytona Helped Me Streamline My Development Workflow
Favicon
Live core web vitals (local metrics) in browser devtools
Favicon
15 Best Chrome Extensions for Devs 🧑‍💻
Favicon
My 2025 Tech Stack: Tools & Tech I'm Using This Year
Favicon
Chrome DevTools: Everything You Need to Know
Favicon
Latest DocWire SDK Release: Modern Features for C++ Developers
Favicon
LobeChat uses Namespace for action labels in DevTools configuration
Favicon
How to configure DevTools for your Zustand store?
Favicon
Interceptando Requisições com DevTools
Favicon
Validate Your FreeBSD rc.conf
Favicon
Proyect Fugu
Favicon
Introduction to Helm for Kubernetes
Favicon
It's 2AM. Your coffee's cold. The code is flowing.
Favicon
Manual Coding vs Auto-Generated Code: Which One Improves Code Quality?
Favicon
Setting Up a WordPress Development Environment with DDEV
Favicon
Automatizando Formulários com DevTools
Favicon
Full Page Screenshots in Chrome
Favicon
Browser Developer Tools: Essential Tips for Debugging and Optimizing Code
Favicon
A New Reliable AI Tool for Developers
Favicon
Push Express
Favicon
Best Open-Source React Dashboards on GitHub
Favicon
🚀 New open-source alert!
Favicon
Log Streaming - what we got wrong and how we fixed it
Favicon
Buildstash joins Techstars NYC
Favicon
Building a Developer-First SaaS
Favicon
The Changes tab in Google Chrome DevTools
Favicon
Why we're making Buildstash - build-to-release management for app and game devs
Favicon
Let me automate your Github project to showcase my platform!

Featured ones: