Web Development
My Current WordPress Process
October 3, 2019
I’ve been a WordPress developer for almost four years. In that time, I’ve experimented with multiple processes for WordPress design and development. My first WordPress project was to develop a new homepage for my then employer, Practice Fusion. The visual designer of that page wanted a lot of animated panels that needed to be mobile responsive so that was more of a Javascript coding challenge than a process problem. (You can read about my solution here and see the HTML/CSS/JS solution on CodePen). Later, I designed a developed a site called Zenmove.com that connects people to moving companies. That project was a lot of fun and gave me the opportunity to create some animated CSS and SVG, as well as schooling me on the use of Google Analytics and MixPanel.
For Zenmove.com, I used a blank theme called Bones that provided me with total autonomy over the look and interactive responsiveness of the site. It also made setting up the A/B tests for Google Analytics a very simple. However, time marches on and newer and more useful blank themes came to market which altered my WordPress development process.
For my next project, I was specifically looking for a theme constructor that would allow me to use Bootstrap 4 and SASS seamlessly. I found what I was looking for with Understrap which is a cool mashup of Bootstrap and Underscores. Understrap fit my requirements to a “T” so I quickly incorporated it into my workflow.
Here is my current WordPress process, presented step-by-step:
Step 1: Set up a server
First step is to set up a development server that I can share with the client. (In practice, I would actually use an existing server that I own, but I want to describe the complete process.) This involves creating a virtual server on DigitalOcean, AWS, or Google. For all of these services I use ssh to access the virtual server which requires the usual public key setup. I prefer to use DigitalOcean as they have a very refined UI and a variety of pre-made server images to choose from. I typically spin up a PHPMyAdmin instance on Ubuntu (although I only use PHPMyAdmin in a pinch; more on that later.) I like to do this rather than use the pre-built WordPress instance as it gives me more control over my WordPress implementation, although this requires that I install WordPress myself which adds a few minutes to the set up.)
Next, I set up a MySQL database for WordPress which is very straightforward; the only variations are the name of the database and the name which wordpress will use to access the db. I usually leave the default Apache settings except to add rewrite rules to the configuration file. I also ensure that all my permissions are set for correctly and that the WordPress folder is owned by “www-data”.
I like to ensure that tmux is installed on Ubuntu (as it usually is with a DigitalOcean instance) as utilizing tmux’s “always on” capability will be an important aspect of the continual build process. I will need node in order to use gulp to build the CSS file the Understrap will use. I like to use Node Version Manager (nvm) so that I can switch between node versions easily and ensure that I am using the correct version for the task at hand.
Step 2: Install the Understrap and Understrap Child themes
The next step is to install the Understrap and Understrap child themes. Using git (which should be pre-installed on Ubuntu like tmux) I clone the themes from their respective repositories on Github (and here for Understrap Child. In the Understrap Child theme). I delete the .git folder of the child theme as it will be heavily modified and I don’t want to risk overwriting any of my work. Also, in the next step I will be creating a new repository for the entire wp-content folder so the child theme will be part of THAT repository. After both themes are installed, I can log into my new WordPress instance via a browser and set the Understrap child theme as the theme for the site.
At this point I will usually set up a repository on Atlassian Bitbucket to store my work and work history. As I mentioned, I only store the wp-content folder on Bitbucket as this folder has all everything that I need to clone the site when I deploy (the reset is default WordPress files or server specific configuration like the .htaccess file.) When creating the repository, git will alert me that I already have a nested repository in wp-content (the Understrap theme) and allows me to configure a pointer to the Github repo where Understrap is stored rather than including it in my new repo. Later, I’ll come back to Bitbucket and make a second repository to store the WordPress database for my site.
Step 3: Running npm and gulp install and setting up a tmux session
After installation of the themes, I cd into the Understrap Child theme folder and run “npm install”. This will load all the node modules Understrap and gulp will need. It’s important to also “git ignore” the node modules folder as I don’t want to be needlessly posting all the node modules onto my repository. Following the installation procedures on the Understrap documentation page at this point I will globally install gulp and then run gulp copy-assets to set up the src folder. At this point, I’m almost ready to start site development.
An important part of my process is to run gulp watch in a tmux session. The reason I do this is to utilize tmux’s “always on” functionality so that my SASS files will always compile even when I’m logged out of an ssh session with my dev server. It’s relatively easy to start a tmux session, cd into the Understrap Child folder, run gulp watch, then leave the running session and log out of the initial session. Now any changes I make to a SASS file will compile whether I’m logged into the server or not.
Step 4: Editing with VS Code Insiders and database management with Sequel Pro
Previous to my current process, I would have all my development files on my local computer and serve the pages using MAMP Pro. This is still a good process, but I prefer to now have my development files stored on a centralized server that I can access from either my MacBook Pro or my Windows/Linux box in my office. The key to making this process work is to use Visual Studio Code Insiders and work directly on the remote files using Insiders’ ssh capability. The inline terminal is also great for monitoring gulp to make sure my SASS files are compiling correctly or to tell me where my mistake is if they are not. This definitely streamlines the debugging process.
Another key to my remote development process is to use Sequel Ace on my MacBook Pro to interact with my WordPress database. Sequel Ace allows me to easily make changes to tables and to export SQL files for database backup, storage, restoring and versioning via git. As I mentioned earlier, I can still use PHPMyAdmin for these tasks if I need to, but I find Sequel Ace so convenient that I have never needed to resort to using PHPMyAdmin.
Conclusion
That’s it! This is pretty much my process for developing and maintaining a WordPress site. Using git repositories for my wp-content folder and my database files means that cloning and deploying to production is a snap. In the future, I may look into tools such as Docker for deployments but I have not found the need yet on the sites I manage. Let me know in the comments if you have any questions.
