Custom WordPress Theme Development With Docker Compose and Live Reload:

For better or for worse (for my SEO) this is all there is to it.

git clone https://github.com/rlewkowicz/modern-wordpress-development-environment.git
cd modern-wordpress-development-environment
mkdir -p wordpress mariadb
UID=$(id -u) docker-compose up -d --build --remove-orphans
while ! docker logs wordpress 2>&1 | grep -o "WordPress setup finished"; do 
    sleep 1; 
done; echo "\nYour site should now be ready\n"

Everything just works out of the box. For a quick test open your browser to localhost (or your interface ip) and then in a terminal:

sed -i.bak -e "s/flex-wrap: wrap;/background-color: red;/g" wordpress/wp-content/themes/twentytwentyone/assets/sass/06-components/header.scss 

A custom plugin will install that enables live reload. I use the same name as an actual plugin, don’t update it. Mine is better. You’ll probably want to visit the site via your primary interface IP address. The reason is, uploaded images get absolute paths related to your base domain. So if you use your primary interface ip, you not only get livereload from that ip address, images will work from any device on your lan. This is very useful for viewing the site via mobile devices etc.


There’s some other customization as well during the build process that allows your user to own the files in the wordpress directory. It makes the development process a lot easier. There’s difficulty running this as root. If you need to, I’d say just run the stock bitnami images.


By default, the environment is pointed at the twentytwentyone theme. That is actually what this site is, albeit aggressively customized. It’s it’s nice to have guidance through their templating structure, but if I had to do this again I wouldn’t modify an existing theme. For all intents and purposes this is a brand new theme. It was cool to start but there was JavaScript and CSS coming in from everywhere. I installed bootstrap and customized functions etc etc. I’m no CSS guru, but with the velocity this environment provides it doesn’t really matter. My outcome here is a clean, simple, professional interface you won’t see on anyone else’s site



See more at: https://github.com/rlewkowicz/modern-wordpress-development-environment