WordPress and GitHub Integration: Live and Local Environment (A Step-by-Step Guide)

With more and more people contributing to open source projects, efficient version control is key to avoiding confusion and delivering the best (and the most recent) version to the users.

Globally distributed teams have rapidly become how WordPress development is these days, with proper version control and code access processes vital to the team’s operation. With the launch of different Git platforms such as GitHub and BitBucket, the WordPress development workflow has become much easier.

While the idea of version control is decades old, with popular tools such as Git being available for some time, the idea and implementation of version control via Git is still a bit challenging for users. This article outlines the advantages of using GitHub and how to integrate WordPress and GitHub for a seamless development workflow.

Advantages of Using GitHub With WordPress

GitHub is a repository tool for developers who keep their code online, public or private, to the rest of the other users. It allows developers to share their code with others and inspires them to collaborate on projects of all kinds. So what are the advantages of GitHub? To convince yourself of the efficiency of this site, you will find below its main advantages.

GitHub allows you to:

• Keep track of versions;
• Have multiple backups;
• Share your work more easily;
• Facilitate team collaboration;
• Create social relationships;
• Build your personal profile.

How to Use WordPress and GitHub?

After receiving a lot of queries from the users, I’ve decided to create this ultimate WordPress GitHub guide that will help you systematically manage your WordPress projects.

To cover most of the ground, I have covered two major scenarios in WordPress development:

1. When you have a live WordPress site on a live hosting server and want to push the files directly to the GitHub repository (this helps developers collaborate effortlessly), I will create a development environment and deploy changes to the live site.
2. When you have a local environment and want to push WordPress files to the GitHub repository.

Try our GitHub-Friendly Platform for a Seamless Development Workflow!

Whether you’re a beginner or an expert, Cloudways Platform is based on UI, where you can make changes in a few seconds.

Try 3 Days Free!

WordPress and GitHub: Live Environment

I assume that you have a WordPress site on your live server. In my case, my WordPress site is hosted on Cloudways.

• Step 1: Create a Repository on GitHub
• Step 2: Push Live WordPress site files to the GitHub Repository
• Step 3: Install Git
• Step 4: Pull to Local Folder from GitHub Repository
• Step 5: Build Development Environment on the Local Machine
• Step 6: Connect Sublime to GitHub
• Step 7: Push from Local to GitHub
• Step 8: Connect GitHub with Live Environment
• Step 9: Pull Changes to a Live Environment from GitHub

Step 1: Create a Repository on GitHub

Log in to GitHub and create a repository by following this link.

Give a name to your repository (in my case, it’s GitHub). You can add a description and access control (I selected Public) and click Create repository.

Step 2: Push Live WordPress site files to the GitHub Repository

After creating a new repository, you must push all your WordPress files and folders from the live server to the new GitHub repository.

As I mentioned earlier, I will use the Cloudways Platform to demonstrate the live environment.

I am going to launch the server SSH Terminal. If you’re a Cloudways customer, you may be familiar with the SSH terminal, a command-line interface (CLI) through which you can handle your application files.

To launch SSH Terminal, you must navigate to Cloudways Server Management Panel → Master Credentials → Launch SSH Terminal and paste your server Master Credentials (username and password).

Next, run the following commands.

cd applications/xxxxxx/public_html (xxxxxx is the folder name of your WordPress application).

This is the path of your WordPress folder. Using the correct path, you can also push a specific folder such as wp-content or themes folder/files.

git init

This initializes the empty Git repository.

git add .

This command adds all files to the local GitHub repository and stages them for the first commit.

git checkout -b master

Switch to the master branch.

git commit -m "first commit"

Commit the changes that have been tracked and prepare them for the push to the GitHub repository.

If you see this message “Please tell me who you are”, you need to run these commands:

git config --global user.email "[email protected]"                                                                                           
git config --global user.name "Your Name"

Replace the email and name with your own.

git remote add origin remote repository URL

The URL of your GitHub repository where all files will be pushed. Copy HTTPS remote URL and paste it to the remote repository URL.

In my case, the entire command will be:

git remote add origin https://github.com/farhanayub/GitHub.git

git push origin master

This command will finally push all the files to the GitHub repository in the master branch.

Note: You will need to enter your GitHub username and password.

If you see any errors, use the following command, and repeat all commands in sequence.

rm -rf .git/

Note: If you have a public repository, a good practice is to delete the wp-config.php from the GitHub repository because it contains credentials of your WordPress application. You can always edit it directly on the live site.

Next, check your GitHub repository, and tada! You’ve successfully pushed your WordPress files.

Step 3: Install Git

Now, you can pull your files from GitHub to your local PC; you need to download and install Git on your local system.

Step 4: Pull to Local Folder from GitHub Repository

After installing Git, let’s start pulling files and folders to a local folder.

Create a folder, get into it and press Right-Click → Git Bash Here. It will open a window (resembling the command prompt), where you can enter Git commands to connect this folder to the online GitHub repository.

Enter the following Git commands one by one.

git init

git add .

git remote add origin https://github.com/farhanayub/GitHub.git

/* Don’t forget to replace the URL with your own. */

git pull origin master

It will take some time, depending on your connection speed and the size of your WordPress repository.

Once the process finishes, go to your local WordPress folder. You can see that all the files from the GitHub repo have been pulled successfully.

Step 5: Build Development Environment on the Local Machine

Now, let’s create a development environment for WordPress and GitHub on the local machine. I will install Sublime Text and a GitHub package known as GitSavvy.

1. Install Sublime Text;
   I am using Sublime Text as my code editor. You need to download and install the latest version of the Sublime Text editor.
2. Install GitHub Package for Sublime Text Editor;
   You will find many GitHub Tools for Sublime Text. I am using GitSavvy, a popular package.

GitSavvy has a complete list of GitHub commands that can help you manage your Push and Pull processes. To install the package, open the Command Palette by pressing CTRL+SHIFT+P or navigate to Tools → Command Palette.

A new popup will appear, asking you to perform a task. You need to install Package Control, which will enable adding different Sublime Text packages. Search for Install Package and press enter.

Within a few seconds, you will see a new popup displaying a complete list of available packages. Now, search and install GitSavvy.

On the successful installation of the GitSavvy package, a new tab will be opened, displaying a welcome message from the GitSavvy team.

Note: I would suggest reading this fully as you will understand the GitSavvy basics well. You can also get help within Sublime Text by pressing

Step 6: Connect Sublime Text to GitHub

Next, you need to connect Sublime Text with GitHub so that you can easily push changes from the local environment to the WordPress repository on GitHub.

Open the local WordPress folder in Sublime Text by going to File → Open Folder.

To test this environment, I am going to edit the wp-login.php file and add echo “Hello World!”; at the top of the file just below <?php and Save it.

Then, initialize GitHub on Sublime Text by opening the Command Palette, search for status, and press enter, where it says git: status.

This command will compare the local folder with the GitHub repository version and let you know the name of the files that you changed.

You can see that wp-login.php is in unstaged mode. You can do a lot with this file by following the instructed commands. But first, you must stage this file, commit it, and then push it to the GitHub repository.

Press S to stage this file and check the status through the git: status command. You will notice that the file has been moved to staged mode.

To commit this change, press c. A new tab will open describing my changes in the wp-login.php file. Write “my commit” at the top of the file and press CTRL+ENTER to submit the commit.

Note: It might ask for your name and email so that the commit can be submitted under your name.

Web Hosting Savings Calculator

Save up to $7k+ annually by finding the ideal host based on your requirements & get a detailed comparison of top providers with one click.

CALCULATE SAVINGS

Step 7: Push from Local to GitHub

I need to tell Sublime Text about the repository I will push the change. Use the git: remote add command to set the remote URL.

Once you are connected with the GitHub repository, use git: push to push the changes.

Select the origin and the branch name master.

Note: If you are not logged into your GitHub account, it may ask you to log in.

Step 8: Connect GitHub with Live Environment

After connecting Sublime Text to GitHub, you need to log in to your Cloudways account and get into the WordPress application. From the left panel in the dashboard, go to Deployment via Git and tap on Generate SSH Keys.

Click VIEW SSH KEY and download SSH Keys.

Go back to the GitHub repository, navigate to Settings → Deploy Keys → Add Deploy Key, set the title, and enter the downloaded SSH Keys.

As you can see, I have marked the checkbox where it says Allow write access because I will exchange the changes.

Within your GitHub repository, navigate to the Code tab, copy SSH Key, and make sure you have selected use SSH.

Get back to the Cloudways Platform, which says Deployment via Git. Paste the SSH Key in the Git Remote Address field, click Authenticate, and choose the branch of your Git repository (I am using master).

The deployment path is left empty because I will connect the WordPress application’s public_html folder with the GitHub repository. Now tap on Start Deployment to connect the Cloudways Platform with GitHub.

Once it is done, you will get a notification at the top right corner of the screen.

Step 9: Pull Changes to a Live Environment from GitHub

Everything is configured and working well. We must pull changes from the GitHub repository to a WordPress site on Cloudways.

From the Cloudways platform, get into your application and then navigate to Application Management → Deployment via Git; hit the Pull button.

Bingo!

All changes have been updated on the live site. Here is how they look.

Why Isn’t The Pull Automated?

Pulling all the changes may seem a hassle because you must do it manually. The reason is to avoid unwanted pushes to the GitHub repo that can happen by mistake. It is advisable only to make a Pull request when you are confident enough to apply changes on the live site.

The whole live environment process might look complex. Still, once everything is properly configured, you just need to make changes in the local WordPress folder using the Sublime Text editor, push to GitHub and Pull on the live site.

WordPress and GitHub: Local Environment

This is the second case where you’re working on your local machine and want to push your WordPress files to the GitHub repository.

Here, I’m assuming that you have a local setup ready (if not, here’s a complete guide that will help you to do that).

So, let’s get started!

• Step 1: Download and Install Git
• Step 2: Sign in to GitHub and Create a New Repository
• Step 3: Push WordPress files from the local environment to GitHub
• Step 4: Check the GitHub repository

Step 1: Download and Install Git

First, you need to download and install Git on your local machine. Choose the version that is compatible with your OS.

Step 2: Sign in to GitHub and Create a New Repository

After installing Git, log in to your GitHub account → Respostories → New.

Next, you need to fill in the fields and click Create repository.

Step 3: Push WordPress files from the local environment to GitHub

I will push the local WordPress theme files (the Twenty Twenty theme) to the GitHub repository.

Go to the WordPress theme folder, right-click for the context menu, and click Git Bash Here.

A command prompt will pop up, and all you need to do is use the following commands.

git init

git add .

git commit -m "first commit"

git remote add origin https://github.com/farhanayub/MyWordPress.git

You can copy your URL from here:

git push -u origin master

Step 4: Check GitHub Repository

Now, go to GitHub and refresh the repository page. As you can see, all theme files (the Twenty Twenty) have been successfully pushed to this GitHub repo.

Summary

GitHub for WordPress is useful whether you’re working on your projects or in a team. The seamless integration makes it easier for you and your team members to collaborate in real time. You can track and test all your code changes before pushing them to your WordPress. I’ve discussed two scenarios of working with a live and a local environment of WordPress and GitHub. If you have any questions, feel free to ask in the comments below. Also, you can learn all about cloning a GitHub repository using Cloudways Api.

Frequently Asked Questions

Q. What are the best GitHub plugins for WordPress?

The following are the best and most popular GitHub plugins for WordPress:

1. GitHub Embed
2. WordPress GitHub Sync
3. Git Updater

Q. How do I create a WordPress repository on GitHub?

Creating a WordPress repository on GitHub is quite simple:

1. Sign up/log in to a GitHub account and create a new repository
2. Give a name to your repository, such as WordPress
3. Push your WordPress site files to the GitHub repository

Q. How do I deploy WordPress to GitHub?

Follow the four steps to deploy a WordPress site to GitHub.

1. First, download and install Git to your desktop
2. Sign in to GitHub and create a new repository
3. Next, push WordPress files from the local environment to GitHub
4. Check GitHub repository