How to Automatically Deploy WordPress Theme Changes Using GitHub and Deploy

Do you need to routinely deploy WordPress theme modifications to your web site?

{Most professional} internet builders use a model management system like GitHub or Bitbucket and routinely deploy their modifications to staging or stay websites. You should use a deployment system comparable to DeployHQ to behave as an middleman between your Git repository and your server.

On this article, we’ll present you how you can routinely deploy WordPress theme modifications utilizing GitHub and Deploy.

Why Use a Model Management System for WordPress Theme Improvement?

A model management system means that you can file modifications to a file or set of recordsdata over time so to recall particular variations later. In different phrases, each time we alter a WordPress theme template, picture, or CSS file, a model management system retains observe of those modifications.

As an illustration, let’s say you determine to run a batch of modifications. If these modifications trigger a difficulty, then you possibly can revert (or roll again) to an present ‘model’ of our WordPress Theme.

Git is a typical model management system, and permits a number of customers to work on the identical code base, comparable to a WordPress Theme. If two builders edit the identical file, Git has built-in controls to take care of these points (often called merge conflicts).

For extra info, take a look at our beginner’s guide to using Git with WordPress.

Why Use a Deployment System?

A deployment system that integrates with companies comparable to GitHub means that you can routinely or manually add modifications you may have made to your WordPress theme.

You may see it as a one-way synchronization system. For instance, when you delete a file out of your WordPress theme, you’d additionally must delete it by way of FTP as nicely. With a deployment system, that is routinely executed for you once you commit your code modifications to GitHub.

On this article, we’ll be working with a deployment system referred to as DeployHQ, or just Deploy. Deploy works with different Git repository suppliers like Bitbucket, however we’re going to stay with GitHub for this tutorial.

Setting Up a GitHub Repository for Your WordPress Theme

First, you’ll must arrange an account on GitHub after which use the GitHub consumer for Home windows or Mac to retailer modifications to your WordPress Theme.

To begin, you possibly can go to the GitHub website and enter your e mail deal with to create a brand new account.

Subsequent, you’ll must enter a username and password.

GitHub will even ask you to decide on e mail preferences.

After that, you possibly can scroll down and confirm your account by fixing a puzzle.

It’s similar to reCAPTCHA in your WordPress web site.

As soon as your account is verified, you will note the GitHub dashboard.

From right here, you possibly can click on the ‘+’ icon on the high and choose the ‘New repository’ possibility.

Subsequent, you can begin by setting the repository identify, like your WordPress theme’s folder identify.  

Then, you’ll want to decide on whether or not this can be a Public or Personal repository. Public repositories permit everybody to see your code however can’t make modifications to it. Personal repositories can be found solely so that you can see.

Lastly, you possibly can tick the checkbox if you wish to add a README file.

As soon as that’s executed, merely click on the ‘Create repository’ button.

Your GitHub repository will now be prepared to be used.

Set up GitHub for Home windows or Mac

Subsequent, you must put our WordPress Theme’s code into our repository. A easy method of doing that is through the use of the GitHub consumer, which installs in your laptop.

Merely go to the GitHub Desktop web site and obtain the Desktop consumer obtainable for Home windows or Mac.

As soon as the obtain is full, launch the GitHub consumer.

Subsequent, you’ll must check in utilizing your GitHub account. You may click on the ‘Check in to GitHub.com’ button.

This can launch GitHub in your internet browser.

Merely click on the ‘Authorize desktop’ button to permit GitHub Desktop to entry your account.

After that, you possibly can open the GitHub Desktop consumer.

Subsequent, you will have to configure Git. Merely choose the ‘Use my GitHub account identify and e mail deal with’ possibility and click on the ‘End’ button.

Subsequent, let’s add the GitHub repository that you simply created earlier.

To do that, click on the ‘Clone a repository from the web’ possibility.

You will note an inventory of your GitHub repositories, together with the one you created earlier.

Merely choose the repository and select the place you need to retailer it in your laptop below the ‘Native Path’ subject. As soon as that’s executed, you possibly can click on the ‘Clone’ button.

You’ve now cloned (copied) your repository hosted on GitHub to our laptop.  

Subsequent, you must add our WordPress theme code to the repository’s folder after which commit and sync this code to GitHub.

You can begin by discovering the folder you chose within the above step in your laptop. It ought to have a README.md file within the folder. Relying in your laptop’s settings, you might also see the hidden .git folder.

Whenever you’ve made modifications to your WordPress theme’s code, merely copy and paste them into this folder.

After that, you possibly can open the GitHub Mac or Home windows app and see the recordsdata you’ve simply added seem within the window:

You will note the modifications highlighted in inexperienced. These are the modifications that you’ve got saved within the native repository, however you haven’t but dedicated these modifications.

Subsequent, you will have to commit (add) these recordsdata to GitHub. To do that, merely enter some textual content into the Abstract field to clarify the modifications we’ve made and click on the ‘Decide to grasp’ button.

This commits the modifications you’ve made to the repository.

To add these modifications to GitHub, you possibly can click on the ‘Push origin’ button.

To examine your commit has been uploaded to GitHub, go to your repository on the GitHub web site. If every part works, you’ll see your code modifications.

Setting Up Deploy

The ultimate step is to make it possible for any modifications in your GitHub repository are pushed to your WordPress website.

DeployHQ, or Deploy, is a web-based service that may monitor modifications to your GitHub repository, and routinely or manually add simply these modifications to your WordPress web site.

Think about it as a connection between your code and the net server.

First, you must go to the Deploy website and join a brand new account. Deploy is a paid service, however it presents a free account for one venture and 5 deployments per day.

After ending signing up, you possibly can log in to your Deploy dashboard.

From right here, you possibly can click on the ‘Create a venture’ button to get began.

Subsequent, you must present a reputation to your venture.

After that, you possibly can choose GitHub as your code internet hosting platform.

If you happen to scroll down, you’ll discover extra choices like selecting a zone to your venture and superior choices.

As soon as that’s executed, click on the ‘Create Challenge’ button to proceed.

Deploy will now redirect you to GitHub.

If you’re not already signed in, then you’ll be requested to login. After that, you’ll be requested to permit Deploy to entry your GitHub account.

Merely click on the ‘Authorize krystal’ button to proceed.

Deploy will fetch the checklist of your repositories from GitHub and can ask you to pick out a repository for this venture.

Merely click on in your WordPress theme repository, and Deploy will import it for you.

Within the subsequent step, Deploy will ask you to supply server info. That is the place you inform Deploy how you can add recordsdata to your WordPress server.

You can begin by getting into a reputation and choosing ‘FTP‘ because the protocol possibility.

Subsequent, you will have to scroll down and enter your FTP credentials.

• Hostname: Your web site’s SFTP/FTP host
• Port: Your web site host’s SFTP/FTP port (usually SFTP = 22, FTP = 21)
• Username and Password: FTP username and password
• Deployment Path: The trail you’d navigate to earlier than importing your WordPress theme recordsdata. For instance, public_html/instance.com/wp-content/themes/MyTheme, the place MyTheme is the WordPress theme you may have dedicated to GitHub.

After getting into these particulars, click on the ‘save ‘Create Server’ button.

Deploy will now check your server connection and if every part works appropriately, then it can present you a hit message.

Now you can click on on the ‘Deploy’ button to add your GitHub recordsdata to your web site.

You’ll now see the progress of deployment.

As soon as Deploy has completed, you will note a hit message.

You might have efficiently deployed modifications from GitHub to your web site utilizing Deploy. Now, once you make modifications to your WordPress theme in your laptop, you must commit them to GitHub. After that, you must go to the Deploy web site to begin the deployment manually.

Let’s see how you can arrange automated deployment in order that any modifications you decide to GitHub are routinely deployed to your web site.

Setting Up Automated Deployment

First, you must go to your Deploy dashboard and go to the ‘Tasks’ web page. From right here, merely click on on the identify of your venture.

Subsequent, you possibly can head to the ‘Automated Deployments’ tab from the menu on the left.

Right here, you will have to allow the choice subsequent to your server for auto-deployments.

After that, you’ll have to repeat the Webhook URL and add it to your GitHub account.

Merely log into your GitHub account in a brand new browser tab. Then click on in your repository and head to the Settings tab. From right here, you possibly can go to the Webhooks part from the menu on the left and click on the ‘Add webhook’ button.

Now paste the webhook URL you copied from the Deploy server settings web page within the Payload URL subject.

After that, choose software/x-www-form-urlencoded because the Content material sort from the dropdown:

Subsequent, you possibly can scroll down and choose which occasions ought to set off the webhook. You should use the default setting.

As soon as that’s executed, merely click on the ‘Add webhook’ button.

That’s all. Your GitHub repository will now notify Deploy when there are new modifications to your repository. Deploy will then routinely implement these modifications to your web site.

We hope this text helped you learn to routinely deploy WordPress theme modifications Utilizing GitHub and Deploy. You might also need to see our information on how to create a staging environment for a WordPress site and must-have WordPress plugins for business sites.

If you happen to favored this text, then please subscribe to our YouTube Channel for WordPress video tutorials. It’s also possible to discover us on Twitter and Facebook.