Our WordPress WorkflowJun 03, 2016
WordPress’ popularity has skyrocketed in recent years, transforming it from it’s primary purpose of blogging to being used as the CMS of choice for web designs of all scales. It has become an indispensable tool for web designers, and as such, there have been many workflows created to optimize the process. In this post we will share ours. Ours is simply how we do it — we’re not claiming it to be the best or even an efficient workflow for that manner.
After looking into many configurations, we settled with this workflow for a number of reasons:
- Super-simple configuration
- Minimal troubleshooting at first
- Easy to transfer sites from dev to staging to production servers
- Automated tasks
Getting Started
MAMP
We begin with an installation of MAMP, a local server environment for Apache, PHP & MySQL development. Some may ask why don’t we run a Vagrant server instead and utilize Varying Vagrant Vagrants (VVV) to create a more robust WordPress environment? I will get into this later when talking about the wordmove tool.
Installing WordPress
We simply download and install the most recent version of WordPress from their site. (https://wordpress.org/download) Using the phpMyAdmin installation from MAMP, we setup a new database and configure it by going through the simple steps on the newly installed WordPress site.
Automating Tasks with Grunt.js
Now that our barebones WordPress install is setup, we create our custom theme. Here’s where the magic happens. Using grunt.js (http://gruntjs.com), we set up a process for automating many of the redundant tasks, making the development phase much quicker. (We will be writing a blog in the near future detailing our Grunt config) We automate image optimization, JS and CSS minification, and SASS compilation. Additionally, I utilize Grunt to livereload the page saving my hand from a constant barrage of Command-R. At this stage, we develop the theme and implement all necessary plugins.
Let’s move that WordPress site to a staging/production server
So, the theme is all developed, and we’re ready to either push it to a staging server to show clients or push it live. We use a nifty little tool called wordmove (https://github.com/welaika/wordmove). Wordmove uses either SSH or FTP to connect to the web server and move all necessary files such as the database, theme files, core files, content files, etc, using an intuitive “Movefile” and command line based tool. I highly recommend that you facilitate this move using SSH rather than FTP as they will be discontinuing FTP support soon, and the process in which it uploads the database is a bit sketchy. (Using an uploaded PHP script, it takes the MySQL dump and uploads it)
So, why not use vagrant and make my life easier?
When first utilizing this workflow, I noticed that wordmove was by far the most useful tool. Coupled with Vagrant, I found issues pertaining to uploading files through SSH that I could not resolve after days of troubleshooting. Ideally, I would like to use Vagrant for development to create a more stable, predictable environment; however, until I figure out the reason for these errors, I will stick with MAMP.
As I previously stated above, this flow may not be the most efficient and as with anything, can always be improved; however, this is the current flow we utilize when building WordPress sites, and it works pretty well! If you have any questions regarding optimizing your WordPress development workflow, please email us at hello@kadalystdesign.com — we’d be glad to help!
