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.

[Black Friday Savings] Unleash the power of managed cloud hosting at 40% OFF for 4 months. GET THE DEAL

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

Updated on September 6, 2022

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

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.

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.

create new github repository

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 PanelMaster CredentialsLaunch 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. Using the correct path, you can also push a specific folder such as wp-content or themes folder/files.

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; you need to download and install Git on 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-ClickGit 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. 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 ToolsCommand Palette.

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.

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

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

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

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.

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 log in.

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 the GitHub repository, navigate to Settings Deploy Keys Add Deploy Key, set the 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 will exchange the changes.

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

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

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

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.

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?

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.

installing git

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

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

github repository folder

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

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

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

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
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!

Unleash The Cloud.
Not Budgets.

For 4 Months +
Up To 30 Free Migrations

Black Friday

SAVINGS
Time Left In Offer
  • 0

    Days

  • 0

    Hours

  • 0

    Minutes

  • 0

    Seconds

40% OFF

On All Plans

GET THE DEAL NOW
Nov 26, 2022 12:00:00