In WordPress | Last updated: September 20, 2023

Jira Software is the #1 project management tool used by agile teams to plan, track, release, and support great software.

WordPress GitHub Integration: The Best Code Collaboration Bliss

By Titus Kamunya and edited by Narendra Mohan Mittal

WordPress GitHub Integration The Best Code Collaboration Bliss

You will often encounter the terms GitHub and WordPress in the development world. Integrating WordPress and GitHub can simplify the developer’s workflow and make them more productive.

GitHub is a cloud platform that allows you to track, manage, and store your source code. On the other hand, WordPress is a content management system (CMS) for creating websites.

Why do you need to integrate the two?

Version control: With GitHub, you can track all the changes to the WordPress source code over time. You can thus manage your custom code, WordPress themes, and plugins easily.
Branching: After integrating WordPress with GitHub, you no longer have to keep the website ‘under maintenance’ state. Create new branches, work on individual features, test them, and deploy them once you are satisfied that everything works as expected.
Collaboration: You might be building a big website requiring different developers’ input. GitHub allows you to onboard your team members and assign them different roles.
Code review: Things can go wrong when building a WordPress application and your app breaks down. GitHub allows you to review all changes to the WordPress source code before deploying to development.
Code backup and recovery: Storing your WordPress source code in your computer can be risky as the machine can crash or be damaged. GitHub stores the source code in the cloud, allowing you to clone it back to your machine if a misfortune occurs.
Transparency and accountability: GitHub gives a clear track of all the changes made to the WordPress source code and by whom.

What is WordPress?

WordPress is an open-source content management system that individuals without coding experience can use to build websites. This platform was originally designed for blogs but has now evolved, and users can build e-commerce platforms, forums, social platforms, mobile applications, and business websites.

The fact that WordPress is open source is one of the biggest attractions to developers and designers. Thus, you can download WordPress source code, and edit and redistribute it. However, you must buy a domain name and hosting to publish your website online.

Why use WordPress?

Easy to use: WordPress is designed to be user-friendly, irrespective of whether you are new to coding or an expert. You can use the drop-and-drag editor to create a professional website without writing a single line of code.
A variety of themes: WordPress has thousands of themes you can edit to suit your needs. You can also create a custom theme and upload it to your website.
Various plugins: You don’t have to create everything from scratch, as you can use plugins. For instance, you can integrate a WordPress app with payment gateways using plugins.
Large community: If you get stuck, you can always bank on the large WordPress community. You can also use tons of resources to troubleshoot and solve different challenges.

What is GitHub?

GitHub is a cloud software development platform. This platform can store, track, and collaborate on various development projects. GitHub allows users to create free accounts, create repositories, and invite collaborators for various projects. The platform works seamlessly with Git, a version control platform that allows you to track changes to your project locally.

GitHub offers free hosting for static websites through GitHub Pages and can be a good option for portfolio pages. You can also use GitHub as a social networking platform, as it allows you to display projects publicly. This feature also makes it easy for developers to explore open-source projects they can contribute to.

Why use GitHub?

Easy to use: Setting up a GitHub account is easy even if you aren’t tech-savvy.
Cloud-based: GitHub stores your source code on the cloud, meaning you can access it remotely or even recover your files when your machine breaks.
Version control: GitHub tracks all the changes made to the source code. You can also create different branches for easy tracking.
Collaboration: You can invite teammates to your GitHub project to collaborate. This platform also allows you to create an Organization where you can give members different roles and rights.

How to use GitHub for WordPress

You must create a local development server before developing and integrating a WordPress site with GitHub.

There exist different solutions for creating a development server. However, we can use Local WP for this article.

Requirements for WordPress Github integration

Git. It comes preinstalled if you have a machine running on the latest Linux or macOS. You can use this command to check if it is available: git –version.
Working GitHub account. If you don’t have Git and GitHub, you can use this guide.
Understanding of how WordPress works

Install Local WP

On the release page, select a distribution that matches your operating system (I am using Ubuntu).
After downloading, follow the installation guide based on your operating system.

Local WP will prompt you to create a free account. You can skip this step by clicking the ‘X’ button.

Create the first site

Select the first option that allows you to create a new WordPress site.

Give your website a name

Select your environment. For now, let us go with “Preferred”.

Set up your username and password.

Install an add-on to help you use a code editor. You navigate to the extension button on the left side of WP Local. If you are using VS Code, you can install this:

You now have a WordPress site that you can develop locally. Our next step will be integrating our site into GitHub.

Connect WordPress with GitHub

On the WP Local interface, you can click “Go to site folder,” as shown in this screenshot.

We can now open the source code of the WordPress site that we created locally. Since I am using VS Code, the folder structure will be as shown below:

For now, don’t worry much about the different folders and files.

Create a GitHub repository

Assuming you have Git and GitHub configured, you can follow these steps to create a repo and use Git as the version control:

Give your repository a memorable name, check the relevant boxes, and hit “Create repository”.

Initialize your source code from the WordPress project folder. GitHub will give you several commands you can copy-paste to your terminal to get started. You will have commands similar to this:

echo "# GitHub-WordPress" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin git@github.com:username/repository-name.git
git push -u origin main

Replace “username” and “repository-name” with your username and the repository name you chose in step two.

Push the WordPress source to GitHub. You use these commands:

git add . (This stages all the files in your project)

git commit -m “commit the project folder”

git push (This commit pushes all the files to GitHub”

After these steps, you have integrated your local WordPress site with GitHub.

Check this screenshot:

You will note that it has a similar folder structure to the one we had when we opened our source code on the code editor.

Your team can now clone the repository to their local machines, create branches, work on different features, commit them, and push them to GitHub for storage.

Edit your WordPress site

Most of the coding/ building will be in the themes folder. You can locate this folder using this path: app/public/wp-content/themes

My folder has three themes, and I can select the latest. My site looks like this before I start editing:

If I follow this path: app/public/wp-content/themes/templates/home.html, I can edit the contents of the homepage.

I can change the contents of the <H1> on the homepage to “This is a WordPress-GitHub integration sample”.

If I refresh the contents of the local development server, this is what will be displayed:

How to push changes to GitHub

The changes I have made above are only available locally. We can stage, commit, and push them to GitHub for storage. Follow these steps:

Run this command: git status

As you can see, there are untracked files on app/public/wp-content/themes/twentytwentythree/templates/home.html

Stage your edits. You can use this command: git add .
Commit. Use this command git commit -m “this commit edits the homepage”
Push the changes. Use this command: git push.

If we go back to the repository on GitHub, we can see that we have a new commit, as shown in this screenshot.

Your team can now pull the changes, edit the files, and push them to this repository.

Best Practices for Maintaining a Smooth GitHub Integration

Take advantage of version control: The biggest advantage of integrating WordPress with GitHub is the version control feature. Ensure you track all the code you write or modify using version control (Git)
Create a staging environment: The local development server is your staging environment. Check all the changes you make to your WordPress site through the local development server before you commit and push them to the live site.
Use .gitignore feature: You don’t need to track every folder and file when developing a WordPress site. Your main focus will be on themes. You can use the .gitignore feature to ensure you track relevant changes only.
Use branches: You can have multiple developers working on different features concurrently. You can create branches for such features and merge them with the Main/ Master after testing that everything works.
Develop a workflow: A good developer should have a clear flow that shows all the steps to be followed in development. Your workflow should indicate when to test and deploy your site and which criteria must be met.
Automate testing: Use continuous integration and continuous deployment (CD/CI) pipelines like Jenkins to test your code automatically as you develop.
Document your work: Documentation should indicate what every feature does in your WordPress code.

Conclusion

Integrating WordPress with GitHub is easy when you follow the above steps. The next step is giving your teammates the link to the GitHub repository and assigning them different features to work on. If you are the team lead, you can always review all the commits before you approve them. GitHub also makes it easy to access the source code as it will be stored on the cloud.

On the other hand, when you have WordPress on your local machine, you can host it on GitHub Pages if you are looking for a static website. You can also install various plugins from their repositories to your local development environment.

You can check out our article on GitHub vs. GitLab.