WordPress and GitHub Integration – Live and Local Environment

In this article, I will discuss setting up a development environment for your WordPress site. For this purpose, I’ll use GitHub, a very popular code hosting platform.

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 server and want to push the files directly to the GitHub repository (this helps developers collaborate effortlessly). I’m going to 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 GitHub repository.

How to Use WordPress and GitHub – Live Environment

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

Step 1: Create Repository on GitHub

Log into GitHub and create a repository by following this link.

Give a name to your repository (in my case, it’s GitHub). You can also 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 need to push all your WordPress files and folders from the live server to the brand new GitHub repository.

As I mentioned earlier, I’m going to 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 that is a command-line interface (CLI) through which you can handle your application files.

To launch SSH Terminal, you need to 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. You can also push a specific folder such as wp-content or themes folder/files by using the correct path.

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 and for that, you need to download and install Git at 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. For that, I’m going to 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. Now, you need to install the Package Control that 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 in full as you will have a good understanding of the GitSavvy basics. You can also get help within Sublime Text by pressing CTRL+SHIFT+P and typing GitSavvy: help.

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, wp-login.php is in unstaged mode. You can do a lot with this file by following the instructed commands. But first, you need to stage this file, commit it, and then push it to 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 the staged mode.

To commit this change, press c. A new tab will open describing the changes I have done 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 your name and email so that the commit could be submitted under your name.

Step 7: Push from Local to GitHub

Now, I need to tell Sublime Text about the repository I am going to push the change. Use 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 login.

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 GitHub repository and navigate to Settings > Deploy Keys > Add Deploy Key, set title, and enter the downloaded SSH Keys.

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

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

Now, get back to the Cloudways Platform where it 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 am going to connect 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

OK so, everything is configured and working well. Now, we need to pull changes from the GitHub repository to a WordPress site on Cloudways.

From 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?

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

The whole live environment process might look complex, but 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.

How to Use 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!

Step1: 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 the fields and click Create repository.

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

I’m going to push the local WordPress theme files (the Twenty Twenty theme) to the GitHub repository.

For this, go to the WordPress theme folder and 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.

Final Words

I hope this article helped you integrate WordPress with GitHub. 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 section below.