How to Deploy WordPress themes using Git

How to Deploy WordPress Themes using Git

So if you’re a developer worth your feed, you version control your projects. When I started using Git to version control my projects (custom WordPress themes) I quickly discovered deploybot.com, which let me deploy all updates and changes directly to the Wanderoak staging server where we test/debug sites and share with the client before an actual launch. It’s also the best way for my business partner, Bobbi, to view what I’m up to and give design feedback if I need it.

DeployBot is awesome, but you can only have one free repository and we usually have more than one project going at once. I almost signed up for the paid tier, but you see, I’m a cheap-skate sometimes, so I figured, there has to be a way for me to do this with git natively, I mean remote pushes are something I do all the time!

It took about 2 hours, 7 billion Chrome tabs and a lot of frowning at my computer but I figured it out! This is only the first version so it may be a bit more verbose than it needs to be, but it works and is easy to replicate.

Here’s the situation: 

I work on projects on my computer where I host a local git repository (called repo from now on). I backup my work on BitBucket. I have a staging server that I also want to be able to push all updates to.

What I’m working with:

  • local git repo
  • BitBucket repo
  • staging server hosted on Dreamhost

Note: This tutorial requires a basic working knowledge of Git and some familiarity with the command line.

First initialize a new git repo in your project folder if you haven’t already.

Now go to BitBucket (or GitHub, etc, I’m just going to refer to it as BitBucket) and set up the repo there. Since you already have an existing local repository, you’re going to be adding your BitBucket repo as a remote. It’ll be something like:

Go through your usual routine to connect the two and test it so it’s working.

Now you need to set up a git repo on your staging server.

Note: You may have to refer to your hosting provider’s docs on how to set up and access a git repo, the following instructions are pretty general but you may need to do extra things depending on your provider.

Dreamhost has some pretty amazing documentation, it’s never failed me. You can check out their Git instructions for further explanations if the following doesn’t make sense to you.

Dreamhost servers come with Git preinstalled. If you aren’t already accessing your server using ssh or sftp, you have to go into your C-Panel and set that up first, because in order to do the rest, you have to ssh into your server.

Log into your server:

You’ll be prompted for your password and then you’ll be logged in. The first thing you have to do is set up your Git identity.

I work on a lot of themes, so I decided to create a folder in my root directory called theme-gitrepos and inside this folder I’ll create new repos for each of my themes. Let’s say I’m working on a theme called Mint:

Now I’m going to initialize a bare repo in this directory. A bare repo doesn’t have a working directory, it’s structured differently and used to share work. We don’t need working files in this repo, we just need to share our work and transfer it to themes/your-theme-folder (make sure you’ve created a folder for your theme inside the themes folder!) from here.

Every time we push a new update, we want this repo to export all the files to themes/your-theme-folder  of our wordpress directory. In order to do that, we are going to use a git hook. Git hooks are custom scripts that fire every time a particular action occurs. In this case, we want something to happen when the action post-update occurs.

So we’re going to navigate to the hooks folder inside our bare repo and create a file called post-update.

The vim editor is going to open up, now if you don’t know how to use the vim editor, I’m going to walk you through it, don’t worry.

Click a, this allows you to start inserting text. Here’s what you’re going to write:

Note the path to your live files. In my case, I have to jump out of the current folder, back to my root and THEN navigate to my themes folder, hence the ‘../../’. You change that path to reflect how you set things up.

This checks out your files to the themes/your-theme-folder folder. (If you don’t know or need to refresh your memory on what checkout is in git, here you go.)

To save the file and quite vim, hit ESC, and then type :x.

Now in order for the hook to fire when we push an update, we need to make sure the hooks have permission to execute.

Now everything is set up on our staging server and we just have to connect it to our local repo.

Open up a new tab in Terminal (or iTerm 2 in my case) and navigate to your local project folder.

Quick refresher on how remotes work in Git.

This sets up the url for pushing and fetching changes, and you make it happen by going:

However, most of us only use one remote so we can easily get away with:

When you have multiple remotes, you can specify which remote you want to push changes to:

We are going to add the staging server as another remote with the alias staging

You’ll be prompted for your password perhaps, and you can enter it. (To save the ssh password and not keep retyping it, follow these super helpful instructions from GitHub.)

Now any time you want to push updates to the staging server you can just go:

But you see, I’m pretty lazy and I want to be able to type in a single command that pushes changes to both BitBucket and my staging server. To set that up, we’re going to create a remote alias called all that points to both urls. This requires a little bit of vim work again. Make sure you’re in the local project folder.

Once again, you’ll press a so you can edit the file, then navigate to the bottom of the file and add this:

You’ll be able to type in git push all and update both BitBucket and the staging server.

Except that’s still too much typing for me. So we’re going to create a command line alias for it. Now, you may already have many aliases and know how to add them, or this may be your first one! If you use git a lot, I recommend creating aliases for your most used commands. git add may not seem like a lot of typing, but when you’re working on a large project and you have to type it at least 7000 times in a day, it gets old really fast, so I use ga.

If you don’t know how, basically you’re going to navigate to your home folder, check if a file called bash_profile exists, and if not, you’ll create one using the Terminal text editor Nano and add aliases to it:

Now, to create an alias gpa that executes the command git push all you type in the following:

Save your changes by pressing ctrl + o and exit Nano by pressing ctrl + x

Now quit your command line program (Terminal, iTerm, etc), re-open and navigate to your project folder and test the alias! Here’s a really intense and cool bash_profile to check out, if you want.

Now go test everything. It should all work, beautifully. 🙂 If you have questions, ask! This was my first foray into a technical tutorial, I tried to be as clear and thorough as possible, but I’m open to improving it.