How to Automatically Deploy WordPress Theme Changes using GitHub and Deploy

Do you want to automatically deploy WordPress theme changes to your website? Most professional web developers use a version control system like GitHub or BitBucket and automatically deploy their changes to staging or live site. In this article, we will show you how to automatically deploy WordPress theme changes using GitHub and Deploy.

Automatically deploy WordPress theme changes with GitHub and Deploy

Why Use Version Control System for WordPress Theme Development?

First, we need to understand what version control means:

… a system that records changes to a file or set of files over time so that you can recall specific versions later http://git-scm.com/book/en/v2/Getting-Started-About-Version-Control

In other words, every time we change a WordPress theme template, image or CSS file, a version control system keeps track of these changes. At particular points, we can label (commit) a batch of changes. If those changes cause an issue, we can revert (or roll back) to an existing ‘version’ of our WordPress Theme.

Git is a common version control system, and allows multiple users (web developers) to work on the same code base (such as a WordPress Theme). If two developers edit the same file, Git has built in controls to deal with these issues (known as merge conflicts).

Hosted, third party Git version control systems, such as GitHub and BitBucket, allow users to leave issues (or tickets) if they spot a problem with your code. Your code changes can be committed (labelled) against a particular issue, to show the exact code changes made to fix an issue. This is really useful when you look back on code in 6 or 12 months time and want to know why you did something in a particular way.

Why Use a Deployment System?

A deployment system, which integrates with services such as GitHub, allows you to automatically or manually upload changes you have made to your WordPress theme.

You can see it as a one way synchronisation system – for example, if you delete a file from your WordPress Theme, you’d have to remember to delete it via FTP too. With a deployment system, this is automatically done for you when you commit your code changes to GitHub.

Setting up a GitHub Repository for Your WordPress Theme

First we’ll setup an account on GitHub, use the GitHub client for Windows or Mac to store our WordPress Theme in GitHub.

Head over to https://github.com and sign up for a free account.

Once you’ve registered and confirmed your email address, click the plus icon towards the top right corner of the screen, and choose New Repository (a repository is a container for your code – in this case, our WordPress Theme).

Adding a new repository in GitHub

Start by setting the repository name – your WordPress Theme’s folder name is a good idea.  Then, choose whether this is a Public or Private repository. Public repositories are available for everyone to see your code, but they can’t make changes to it. Private repositories are available just for you to see.

Finally, tick the checkbox below Initialize this repository with a README, and then click the Create repository button.

Creating a new repository for your WordPress theme on GitHub

If everything has worked, you should see your new repository on screen:

New GitHub repository

Install GitHub for Windows / Mac

Next, we need to put our WordPress Theme’s code into our repository.  We can do this using the GitHub client, which installs onto your computer.

Simply visit GitHub Desktop website and download GitHub Desktop client available for Windows and Mac.

Once downloaded, start the installation process by clicking Continue

GitHub desktop install welcome screen

On the next screen, enter your GitHub Login (Username) and Password, which you created when you registered on GitHub. Click the Sign In button when done.

Login to GitHub

If the login details are correct, your account will be displayed. Click the Continue button to proceed:

Logged into GitHub

We can leave the Git Config section as the default settings.  Make sure you click the Install Command Line Tools option, before clicking the Continue button:

Configure git and install command line tools

Finally, click Done, and you’ll be presented with the GitHub screen.

Let’s add our GitHub repository that we created earlier. To do this, click the plus icon on the top right hand corner, and then the Clone option. You will see a list of your GitHub repositories, including the one we created earlier:

Clone repositories

Click the repository you created earlier, and then click the Clone button.

Choose where on your computer you want to store this repository, and click the Clone button once you’ve chosen this.

We’ve now cloned (copied) our repository hosted on GitHub to our computer.  

Next, we need to add our WordPress Theme code to the repository’s folder, and then commit and sync this code to GitHub.

Start by finding the folder you selected in the above step on your computer. It should have a README.md file in the folder. Depending on your computer’s settings, you may also see the hidden .git folder:

Clone repository folder on your computer

Copy and paste your WordPress Theme’s code into this folder:

Copy and paste your theme files in the repository folder on your computer

Open the GitHub Mac or Windows app, and you’ll now see the files you’ve just added appear in the window:

Uncomitted changes

You will see the changes highlighted in green. These are the changes that you have saved in local repository but you haven’t yet committed those changes.

Next, we need to commit (upload) these files to GitHub.  To do this, enter some text into the Summary box to explain the changes we’ve made (e.g. My first commit), and click the Commit to master button.

Commit changes

This commits the changes you’ve made to the repository. To upload those changes to GitHub, click the Sync button on the top right hand corner of the GitHub application window.

Sync your local and GitHub repositories

To check your commit has been uploaded to GitHub, visit your repository on GitHub website. If everything worked, you’ll see your code:

Changes successfully uploaded to GitHub

Setting up Deploy

So far, we’ve setup GitHub and committed our WordPress Theme’s code to your GitHub repository. The final step is to upload any changes on your GitHub repository to your WordPress website.

DeployHQ or simply Deploy, is a web based service which will monitor changes to your GitHub repository, and automatically or manually upload just those changes to your WordPress website.

Imagine it as a connection in the middle of your code and web server:

First you need to visit Deploy website and signup. Deploy is a paid service, but it offers a free account for one project and 10 deployments per day.

After finishing sign up, you can login to your Deploy dashboard. Click on create a new project to get started.

Add new project in Deploy

Next you need to provide a name for your project and select your code hosting platform, GitHub. Click on the create project button to continue.

Deploy project name and code hosting

Deploy will now redirect you to GitHub. If you are not already signed in, then you will be asked to login. After that, you will be asked to allow Deploy to access your GitHub account.

Give Deploy permission to access your GitHub account

Click on ‘Authorize application’ button to continue.

Deploy will fetch the list of your repositories from GitHub and will ask you to select a repository for this project.

Select your repository

Simply click on your WordPress theme repository and Deploy will import it for you.

In the next step, Deploy will ask you to provide server information. This is where you tell Deploy how to upload files to your WordPress server.

You will need your FTP credentials for that.

Deploy FTP Details

  • Name: Provide a name for this connection
  • Protocol: FTP or if you have SFTP or SSH then you can use those as well
  • Hostname: Your web site’s SFTP/FTP host.
  • Port: Your web site host’s SFTP/FTP port (typically SFTP = 22, FTP = 21)
  • Username and Password: FTP username and password.
  • Deployment Path: The path you’d navigate to before uploading your WordPress theme files. For example, public_html/example.com/wp-content/themes/MyTheme, where MyTheme is the WordPress theme you have committed to GitHub.

Click on the save button to continue.

Deploy will now test your server connection and if everything works correctly, then it will show you a success message.

Server added proceed to deployment

You can now click on the Deploy Now button to upload your GitHub files to your website.

New deployment

Deploy will show you the details of this deployment. Simply click on the Deploy button at the bottom.

You will now see the progress of deployment. Once Deploy has finished, you will see a success message.

Successfully deployed

You have successfully deployed changes from GitHub to your website using Deploy. Now when you make changes to your WordPress theme on your computer, you need to commit them to GitHub. After that you need to visit Deploy website to start the deployment manually.

Let’s see how to setup automatic deployment so that any changes you commit to GitHub are automatically deployed to your website.

Setting Up Automatic Deployment

First you need to visit your Deploy dashboard and go to Projects page. Click on the name of your project.

Deploy Projects

From your project page take the mouse to the Settings menu and then select Servers & Groups.

Project settings - Servers and groups

Click on the edit icon next to your server.

Edit server

This will bring you to edit server screen. In the right hand column you will find the Automatic deployment settings.

Make sure that it is turned on. Below that you will see a URL. Copy this URL as you will need it in the next step.

Automatic deployment settings

Log into your GitHub account in a new browser tab. Click on your repository and then click on Settings. Click on the Webhooks and Services link.

GitHub Webhooks and Services

Click on the Add Webhook button.

Paste the URL you copied from Deploy server settings page in Payload URL field. Select application/x-www-form-urlencoded as the Content type and hit Add webhook.

Adding webhook

That’s all, your GitHub repository will now notify Deploy when there are new changes to your repository. Deploy will then automatically deploy those changes to your website.

Testing Automatic Deployment

To test automatic deployment simply make some changes to your WordPress theme repository on your computer.

Open the GitHub desktop app and then commit those changes.

Testing automatic deploy by adding commits to GitHub

Don’t forget to click on the sync button.

Now visit your project on Deploy dashboard. Click on the deployments and you will find your automatic deployment listed there.

deployments

That’s all, we hope this article helped you learn how to automatically deploy WordPress theme changes Using GitHub and Deploy. You may also want to see our guide on how to create staging environment for a WordPress site.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.