Continuously Deploy your Wordpress Theme to WPEngine with Codeship

One of my latest tasks as Frontend Developer at Codeship was to update our Blog that runs on WPengine and therefor is powered by Wordpress.

The new Wordpress Theme for the Codeship Blog

Because the new Design is totally different from the previous one it was necessary to create a new Wordpress Theme. Although I never really was a big friend of Wordpress previously I wanted to create a theme from scratch so I could learn as much as possible on this project.

In this post I don’t want to talk about how to develop a theme as there are way better Tutorials on this topic, but I want to share how I made sure that it will be very easy for us to push updates to our theme fast and easy.

Github is your friend

Code-versioning, and in my case Github, is a no-brainer solution for me in nearly every project. So I created a private Codeship “wordpress-theme” repository on Github to have everything in one place. I just want to keep track the new Wordpress theme as I have a local Wordpress setup for developing and wpengine offers a live and a staging version of our Blog so it would be easy to test it afterwards on the final system.

After developing and testing stuff and having fun with my git repo I looked into deploying the stuff on wpengine. Naturally I used SFTP as I always did this with wordpress things and pushed stuff to the staging Servern. Everything was fine till I had to fix some bugs and realised it really sux to upload the updated files manually each time.

Wpengine supports git push (http://wpengine.com/git/). I use GitHub. There must be an option to make this work perfectly and automated.

Codeship to the rescue

Codeship is a Service that helps you to continuous deliver your software projects with automated testing and deployment. As it supports GitHub things should be doable for me. I mean I am the frontend-developer at this company but I am pretty bad regarding server topics and stuff.

I created a new project. Easy. For the beginning I passed on configuring any tests as I just wanted to give it a go for using Codeship for easy deployment.

Connecting Services

Now I wanted to somehow connect Codeship with wpengine. For this I navigated to the git section in the wpengine administration area where I could add a git ssh-key and username.

The ssh-key I wanted to enter was easily found in the project settings on Codeship under the point “General”. I just copy and pasted the key to the textfield on wpengine, entered a name ( In my case: Roman-Codeship) and saved it. Perfect.

Next I used the awesome SSH Debug Feature on Codeship to connect with my build through the terminal. When connected I typed in

cd ~/clone

which takes me to the root of my repository where all my files from the GitHub repository where listed. From there I played around with some git commands to set a username and an email as git global values.

git config --global user.name "Codeship Deploy"
git config --global user.email "roman@codeship.com"

Finally I used the commands found in the wpengine documentation to add a new remote target for the current git repository and made a push.

git remote add staging git@git.wpengine.com:staging/codeship.git
git push staging HEAD:master

And voilà, the terminal output showed me that everything got pushed. ( of course you have to change codeship.git into your wpengine blogname. For example my-food-blog-with-funny-catgifs.git)

To save and automate what I did there I opened the Codeship project settings one more time and clicked on Deployment. Automatically Codeship shows me the master branch by default. I chose custom script ($script) as my deployment option and just pasted all previous lines in the textarea and saved it.

# All necessary Commands 
git config --global user.name "Codeship Deploy"
git config --global user.email "services@codeship.com"
git remote add staging git@git.wpengine.com:staging/codeship.git
git push staging HEAD:master

Final Adjustments to the Repository

Using my FTP Client I connected to the wpengine staging server and was happy to see new files where there, but not so happy that all those files where placed in the root directory of the Wordpress installation. Well, this totally makes sense as I haven’t told any of the services where I want to push things.

Logically I opened my local working folder of the theme and moved everything in a logical folder structure that would tell the repository where to place my files. The Final Repository structure would look like this.

wp-content/
└── themes/
└── codeship-theme/
... all the theme files ...

I pushed those changes to GitHub and immediately Codeship took care of the rest. My repository got checked out and after I was lazy to not write any tests yet, things got pushed to wpeninge.

One more check in my FTP Client and it worked. Yeah… happy time.
( Immediately afterwards I opened a beer, so you maybe want to do this as well. Victory tastes awesome. )

Conclusio

While reviewing the theme on staging I had to fix some bugs and add several new features. It was a breeze to push the updates to staging now as I would commit and push change to GitHub anyway. No opening up a FTP client, drop in new and changed files and hope to not forget something. Afterwards I also configured a “production” branch in my Repository which would push the theme to the production server on wpengine. I am pretty happy in the end how everything worked out and using this technique my disliking of Wordpress got a little smaller as it actually was pretty easy working with.

Show your support

Clapping shows how much you appreciated Roman Kuba’s story.