Jack Harner 🚀

Posted on Aug 17, 2018

Looking For a Simpler Way To Develop WordPress Themes Locally.

#wordpress #discuss #help

This might be a strange or impossible request, but I'm looking for a kind of specific way to develop WordPress themes locally.

At work I primarily work on a BigCommerce web store on their Stencil framework. It has it's issues, but what I like most about is the fact that when working on the local version it essentially pulls the data for products, urls, and everything directly from the live site. I work on the changes locally with live content, then use the stencil CLI to bundle and push the theme to the live site.

Is something like that possible with WordPress?

My current workflow involves a new local WordPress install for each site I'm working on and then I have to manually re-create the test content (especially with custom post types), set up all the databases, etc.

I know you can export posts, etc, from the live site, but it seems to have issues when importing and doesn't compare anything, just adds whatever you exported to the local install.

Is it possible to have a local version of WordPress just use the remote's database for posts and all that?

As far as pushing updates to the sites I currently use Git, a bare git repo on the remote server, and a post-receive hook to move the updated files to the correct spot on the server.

Can any of y'all share some insight into your WordPress theme development and maintenance strategies.

I mostly work with One off themes for specific sites. I haven't yet ventured into the whole "Themes for the masses" path, but I'd love some insight there as well if you have it.

cover photo by Clément H

Top comments (11)

Andrea Barghigiani • Aug 18 '18 • Edited

Hi Jack,
I've been developing WordPress websites for a long time and I have to admit that I've tried a bunch of solutions to work locally and push my changes online as simple as possible.

At the beginning I was usign MAMP and a nice PHP script to do the search/replace once the database was uploaded into the online server.

Then I started to use Vagrant and Git, but the database part was always left apart with the script I linked before.

Later on I found WordMove, a great ruby gem that will let me pull/push all my changes (files and database) via an SSH connection. This was like the holy grail of WordPress development since I can download the online database into my local environment with a simple shell command: wordmove pull -d.

Nowadays I am usign a bash script create from a collague of mine that will create a Docker container with WordMove installed on it.

This scripts helps me a lot because I can create a separate container where I can also experiment with the server configuration and be safe because, instead of a Vagrant solution, if I compromise the web server I am working on all the others will simply run.

The only downside I see in usign this solution with Docker instead of a Vagrant machine is that I can only run a WordPress installation at time because all of them are pointing to 0.0.0.0:8080, but if you edit the docker-compose.yml and configure the Apache Virtual Hosts I think you can solve this little problem.

At the end of the day this is a no brainer for me because shut down a container is simple as:

docker-compose stop
cd /path/wordpress/
docker-compose up -d

(I use the -d option because it gives me back the terminal instead to show all the operations in a verbose manner)

Hope this can help, I'll link below a coupple of article we've written on WordMove and Docker. They are in italian but I hope Google Translate can help you out ;)

Weston Wedding • Aug 17 '18

Not specific to Wordpress but from PHP/MySQL work in general (and Drupal):

The approach I take with the database, which works because I have full control of both sides of the equation, is to just do a database dump on the remote server and then use the file I've generated to replicate the database locally. I've got all the content and configuration done, boom, on to coding!

Remote connecting to the DB is possible but you'll need it to be a copy of the database. And requires a little bit of tech savvy, potentially. And introduces some security concerns.

Jack Harner 🚀 • Aug 17 '18

Interesting approach. I'll definitely look into that.

Drew Knab • Aug 17 '18 • Edited

The problem with doing that with Wordpress is the url gets hardcoded in so many places.

While it can be replaced with localhost or what have you, it’s kinda pain in the butt.

Drew Knab • Aug 17 '18 • Edited

I really liked to use vagrantup.com/ when I was still doing PHP on a daily basis. There's a great vagrant setup at vccw.cc

You could, actually, have the vagrant box automatically give you a ton of dummy data by running some key SQL scripts. Especially true if you find yourself consistently using the same sorts of custom post types.

As for remote db, yeah, you can totally do that if your remote server is set up to handle that interaction. I'm not sure how much direct control you have over the databases you work with.

Jack Harner 🚀 • Aug 17 '18

Is Vagrant similar to Docker? I'd started looking into docker but haven't really gotten around to playing with it.

As far as server access, everything I'm working with is running on DigitalOcean droplets so I'd assume that means I have full control over the MySQL and the firewall between the two. Is there a recommended way to make that connection happen securely?

Drew Knab • Aug 17 '18

It is similar to Docker, but Vagrant is basically a wrapper for a vm. Docker is some kinda magic I don't fully understand yet, but if you have more experience with that, I'm sure you could do the same thing with a container.

Basically, you would open up your MySQL instance to remote connections and whitelist your own IP connection.

cyberciti.biz/tips/how-do-i-enable...

⚡️ • Aug 19 '18

What you want is definitely possible, but as with a lot of things it might take a bit of time to get it to behave in exactly the way you want.

I use a combination of Docker and a whole bunch of Bash scripts to do what I want — used to use Vagrant, but a VM like that really burned up my laptop battery.
Whenever I start a new WordPress project, I start it off with some NPM commands:

npm run docker:create-image — makes a new docker image based on the apache:php7.1 image
npm run docker:create-container — create a new container based on the image, name it, and open up the relevant ports (80 and 3306)
npm run docker:collect — collects a whole database, plugins and themes from the existing site, using SSH, based on information in env.sh
npm run docker:start — starts the docker instance
npm run docker:provision — provisions the container with the collected data, again based on env.sh in the folder root.

At this point I can run npm start to fire up browser-sync, that automatically gives me an IP and opens up a port so that other machines can visit too.

I personally combine this with webpack and browser-sync for most of the front-end stuff, but I think that's more dependant on your use case. When needed I can also log into the docker instance.

I'd really recommend messing around with all this yourself for a bit, especially the Docker bit took me a while to understand.

KimLongUn • Aug 18 '18

i use mostly de.wordpress.org/plugins/wp-migrat... the db migrate tool. you can export the databases from your remote server to your local environment and vice versa directly from the wordpress backend. the free version only allows for downloads of the database but the pro version allows for direct syncing. it will do a search and replace for the hardcoded url´s in the database as well.

i would definitely recommend spending the time and creating a customized base theme with common components, plugins like above mentioned and tools already ready like grunt etc. it saves a lot of time and unneccessary repetitive work

Jack Harner 🚀 • Aug 18 '18

Cool. I'll definitely check that plugin out. I'd stumbled across it but didn't really dig in to it.

I've actually started working on your second point for myself:

harnerdesigns / blank2

Blank Wordpress Theme. Speed Up Development. Make Money.

Blank2

Speed Up WordPress Development. Make More Money.

Blank2 is a blank wordpress to start off with. It includes Gulp functions to handle JS, SASS, BrowserSync, and more.

Gulp Functions

Make sure to sent the environment variables in the gulpfile.js to match your environment.

gulp

Runs gulp sass, then gulp js, then finally gulp serve.

Use to start up development.

gulp sass

Compiles the SASS from the sassFiles var, source maps it, and puts it in the sassDest folder;

Adds the standard Wordpress Header Comment to the top of style.css with Theme Name, Version, Repo Link, etc pulled from the package.json file.

Don't add the header comment to style.scss

gulp js

Pulls all the files from jsFiles, adds the source map, concats it down to theme.js and minifies it. Places output in jsDest folder.

gulp watch

Watches both watchSassFiles and watchJsFiles and runs gulp sass and…

View on GitHub

The more I learn about designing WordPress themes the more I add to that to kick start.

Noah Betzen • Aug 19 '18

github.com/Nezteb/I_Hate_WordPress...

View full discussion (11 comments)

DEV Community