This website uses cookies

Our website, platform and/or any sub domains use cookies to understand how you use our services, and to improve both your experience and our marketing relevance.

WordPress and GitHub Integration – Live and Local Environment

October 28, 2021

11 Min Read
wordpress and github

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.

Virtual teams with globally distributed members have rapidly become the way WordPress development is done these days, with proper version control and code access processes being vital to the operation of the team. With the launch of different Git platforms such as GitHub and BitBucket, the WordPress development workflow has become a lot 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 use of Git in WordPress development and how developers can set up a Git-enabled WordPress development workflow.

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.

Boost Your WordPress Site

Slow loading can eliminate all your content efforts.
Download our Ebook to learn the hacks to speed up your WordPress site.

Thank You

Your Ebook is on it’s Way to Your Inbox.

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.

create new github repository

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).

ssh terminal cloudways

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.

wordpress folder

git init

This initializes the empty Git repository.

git initialize

git add .

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

git command add files

git checkout -b master

Switch to the master branch.

master branch

git commit -m "first commit"

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

first git commit

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"

setting account identity

Replace the email and name with your own.

config user email and name

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.

github repository url

In my case, the entire command will be:

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

git remote add origin

git push origin master

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

push all files

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

github username and password

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

rm -rf .git/

remove the file

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.

successfully pushed to github

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.

download and install git

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

pull wordpress files from github

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.

pulled wordpress files

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.

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.

install package on sublime

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

gitsavvy package

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

welcome message from gitsavvy

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.

open wordpress 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.

adding code

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

check file 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.

unstagged mode

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.

stagged 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.

submitting 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.

setting remote URL

setting remote name

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

pushing changes

Select the origin and the branch name master.

setting branch name and origin

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

successfully pushed file to GitHub

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.

generate ssh key

Click VIEW SSH KEY and download SSH Keys.

view and download ssh key

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

adding ssh key in github deploy 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.

cloning via 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.

connecting cloudways and github

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

message on successful repository cloning

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.

pulling changes from github

Bingo!

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

checking pulled file

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.

installing git

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

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

github repository folder

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

creating a new 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.

git bash here

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

git init

initialized empty git repository

git add .

adding all files via git

git commit -m "first commit"

first git commit

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

adding GitHub repository URL

You can copy your URL from here:

repository https url

git push -u origin master

pushing all files

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.

checking github repository

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.

Share your opinion in the comment section. COMMENT NOW

Share This Article

Customer Review at

“Cloudways hosting has one of the best customer service and hosting speed”

Sanjit C [Website Developer]

Farhan Ayub

Farhan is a community manager at Cloudways. He loves to work with WordPress and has a passion for web development. Mostly, he spends his time interacting with the people in the WordPress community. Apart from his work life, Farhan spends his time gaming and playing sports. Feel free to contact him at [email protected]

×

Get Our Newsletter
Be the first to get the latest updates and tutorials.

Thankyou for Subscribing Us!

×

Webinar: How to Get 100% Scores on Core Web Vitals

Join Joe Williams & Aleksandar Savkovic on 29th of March, 2021.

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!

x

For 4 Months

Promo: BFCM2021
  • 28

days

  • 28

Hours

  • 28

Mins

  • 28

Secs