WordPress GitHub Integration

Apr 14, 2023

Please share the news with

We'll start by introducing the basics.

What is Version Control and why is it Essential?

If you're not averse to or are familiar with programming, the concepts of version control, Git, and GitHub may seem quite bizarre to you. Let's first define the terms using straightforward English.

Version Control

The purpose of implementing the version of a project is to monitor and manage changes made within the project. You can review the project and make comparisons or restore all the project's components to an older state.

Git

Git is the most widely utilized version control software available. It's a powerful program that comes with all the features you need for collaboration, to manage the progress of your project, and correct mistakes if needed.

GitHub

The GitHub homepage, showing an illustration of a child in an astronaut costume in front of a large globe with glowing lines connecting country to country. The featured text reads "Where the world builds software".
GitHub

Benefits of Integrating GitHub WordPress WordPress

Imagine being able to take advantage of the power of versions that permit you to restore an older version prior to a modification that screwed your website as well as using Git branching to test and work your crazy concept that you thought of during a lazy afternoon of programming.

Making the WordPress project as a team is a further reason to use WordPress along with GitHub in a group. The team you are with may work on different aspects on the same website without fearing to shut down the website you're working on for production.

After you're finished, just pull up all the recent changes on your main or some other button that is a magic one from your dashboard (keep looking through the entire report).

A summary of all the benefits of GitHub as well as the WordPress combination:

  • Lets you use your normal workflow to work in WordPress development
  • You can stop your website from going down because of an error in certain PHP files by reverting to an older versions
  • It lets you collaborate simultaneously by using the features of your site.

Beginning with Git, GitHub, and WordPress

In this this section, you'll learn how to make themes or plugins using GitHub and WordPress.

Before starting, let's grab the basic idea behind this process. First, you must establish a local Git project which is where you'll build the first version of your theme or plugin (we refer to these because they're the most frequently modified files within the WordPress project. Then, you'll set up a GitHub repository. You'll then transfer the repository to the live installation of your WordPress live install.

Let's go!

Step 1. Install Git on Your Computer

This may seem like a straightforward, but remember that it's crucial to operating Git on your system prior to working with the plugin or theme.

For installation, go onto Git's Official downloads webpage and then select the suitable version for your OS.

The official Git downloads page showing the macOS, Windows, and Linux download methods for the Git installer and the current version "2.34.1".
Git downloads

If you're using macOS or Linux, you may need to use terminal. If you're running Windows then you need to start up the wizard app which can take few minutes.

To confirm that Git is running, execute this command on the command prompt or terminal:

git --version # git version "your version"

Step 2: Sign-up with GitHub and then set up a repository

Create or log in to an GitHub account through the sign-up form on GitHub.

GitHub Sign Up page with the fields of email, password, and username.
GitHub Sign Up page.

Once you have signed in, you can create a repository that will host your theme or plugin using the Link to a new repository.

GitHub new repo page with the fields Owner, Repository name, Description, Accessibility, README, and license files.
GitHub new repository

In the name of the repository you should include what name is the plug-in you're building. For my case, MyWordPressTheme Provide a introduction and overview of the project. Choose whether the repository is to be open or private (public that anyone is able to browse it and create a fork of it and secure that you are the only one who have the right to gain access the repository), decide if you need to provide a Readme or license at the start, and click on the Create Repository button..

Step 3: Configure Your Local WordPress Environment

Let's find out how to do this with Dev.

Dev create New WordPress site with NGINX, MySql, and WordPress 5.8 option.
Dev.

After that, enter your site's username, WordPress admin username, and password. Then, click on"Create Website" then on "Create Site" button.

My new WordPress site form with the fields of "Site name", "WordPress admin username", and "WordPress admin password" as well as the create site button.
New site.

This will automatically create a WordPress site in the folder /home/username/Dev/public/site-name, you can open it by clicking on the "site path" section.

Site info showing the path to the site WordPress files.
Information about the website.

Have a look at WordPress structures of files using an application for managing files.

File manager showing the file structure of the site you just created, including some important files like the "wp-config.php" and the "index.php" files, as well as the subfolders "wp-content", "wp-includes", and "wp-admin".
WordPress File structure.

Now you have a fully functional WordPress site listed in the directory of your house.

Step 4: Clone the GitHub Repo on your local Machine

There's a remote GitHub repository which includes the README and license files Now is the time to connect these files to your local system and start developing the theme.

In this case, the theme is being built However, you'd follow the exact same process creating a plugin.

Visit your WordPress site's folder. Navigate through your WP-contentdirectory that is the directory that houses every theme and plugin available.

After you've built your website with Dev After having constructed your site, you need to enter the site path available in the Site Information before going to The content of the WPfolder.

If you created your site using XAMPP, you would enter the /opt/lampp/htdocs/site/wp-content folder on Linux, and macOS, whereas on Windows you just need to go to the folder in which you extracted the WordPress source code.

As we build a theme, we go to the folder for themes and save the repository we created on GitHub. Be sure to configure the SSH keys on GitHub in the event that you've missed it.

The entire procedure is described following using just a couple of commands:

cd /home/username/Dev/public/site-name/wp-content/themes # or your wordpress site location git clone [email protected]:YourUsername/mywordpresstheme.git cd mywordpresstheme/

You can now begin developing your WordPress themes and plugins.

5. Add, Commit and push changes on the Remote Repo

Now you can design your very own theme.

The advantage of creating an application or theme using your personal computer is the fact that you're able to mess around with the software using it, create all adjustments, and test any method you wish. Therefore, go ahead and build your best themes or plugins you can.

If you're already acquainted with the procedure in creating the WordPress theme with scratch, here are some of the files you need to be aware of.

  • index.php: The main file of the structure that makes up the subject (required)
  • front-page.php: Creates the main view of the website; the"/" (root) page
  • footer.php: Defines the footer area of the website, and it's used in most of the pages on the website.
  • functions.php: Allows to build specific function
  • header.php: Defines the header
  • page.php: Pages generated by the admins of the site
  • screenshot.png: Image that is used to create a logo for the theme
  • single.php: Default mode used by posts.

For further instructions For more information, please look up the WordPress Developer's Guide to the development of themes.

Once you've designed your theme you're ready to upload and submit all changes to GitHub.

First, first run an initial Git report to find out exactly what changed.

The status of Git... Files that are not tracked files (use "git add" to include them)(use "git add" ..." to" to be included in what will be committed) The 404.php front-page.php footer.php image is single.404.php assets/footer.php front-page.php assets/footer.phpfront-page.php functions.php function.phpheader.php index.php page.php screenshot.png single.php style.cssindex.php page.php screenshot.png single.php style.csspage.php screenshot.png single.php style.cssstyle.css

Add all documents in the directory, and then save the folders.

Add to git .*Git commit with m "Added themes files"

Then, you can push the changes to the remote repo before transferring them to GitHub. GitHub.

git push

Step 6: Connect SSH into Your WordPress Website and copy the Repo

Your theme has been created and now it's time to integrate it into your current WordPress site.

A lot of hosting providers have a means to connect to SSH and for further information check out the documentation of your hosting provider.

For starters, you have to obtain the SSH command and your password.

My dashboard of the site "Test with WordPress" showing the password and SSH terminal command fields.
My site dashboard.

Paste the SSH commands into the command prompt. Then, enter the password (using the authentication procedure for copying to copy the SSH password).

If you've been authenticated and logged in, you're now inside the WordPress site's file structure.

Terminal connected via SSH to a  site.
SSH.

Now, you'll have to navigate to your site's folder, which is usually located on /www/name-site/public/. You can then access the theme folder, and copy the repo to it.

cd /www/name-site/public/wp-content/themes git clone https://github.com/yourusername/MyWordPressTheme.git

We're using HTTP to copy the GitHub repo because we're not making any modifications to the theme present on the server. The only way we can modify the theme is to use the editor that we like locally on the machine that we're working on instead of a sloppy terminal editor on the server.

Then, at any time you want to pull the latest changes from the remote repository into your server, you would do it by running:

git pull... Fast-forward front-page.php front-page.php 1 changed file 1 deleted (+), 1 deletion(+)

Step 7: Go to the WordPress Administrator in order to enable your theme.

https://yourdomain.com/wp-login.php

Then, go to Your looksection and activate your stunning theme.

WordPress admin dashboard with an arrow pointing to the "Activate" theme button.
Select the theme you prefer.

If you're working with plugins then follow the exact process, except for placing your plugin within the /wp-content/pluginsfolder.

Congrats! You've created an awesome WordPress theme with Git, GitHub, and WordPress!

Utilizing My To Integration to GitHub and WordPress

In order to make WordPress developers' lives easier The WordPress team is launching GitHub Deployment for WordPress. GitHub Deployment is a connection directly to your GitHub account, allowing you to develop your website locally, and allows you to push it to live with just a click.

All you need is a My-Account as well as the capability to manage versioning control for WordPress development.

Advantages of Using GitHub deployment

They are among the biggest advantages of this method:

  1. Combines the experiences of creating locally and deploying remotely to WordPress
  2. It allows you to utilize all the features of version control with Git and GitHub
  3. More simple than the manual approach as demonstrated in the preceding paragraph.
  4. Automate the deployment of changes you make from your GitHub repo

You must also download WordPress the core files and upload the files to your repository. It isn't enough to commit an application or theme as, upon deployment, all staging files are deleted.

However, the process is way easier than you imagined.

Let's explore ways you can incorporate GitHub to WordPress with the help of My!

Step 1: Start by creating the GitHub Repo containing all of the WordPress Core Files

The process is similar to that described above but you'll need to upload all the WordPress documents from your WordPress installation to your GitHub repo.

The first step is to sign up for a GitHub account and clone it to your PC so that you can start creating your website on your local computer.

git clone [email protected]:youusername/WordPress-site.git # After you created the repo on GitHub
unzip path/to/wordpress/zip cp -a wordpress/. path/to/your/repo/

Be aware of the method we're using for extracting the zip file within the current directory , and later copying its contents to our repo with the special cp dot (or. ) syntax.

The repo's structure must be in line with the following:

. +-+- .git +-- wp-admin +-- wp content+-- wp-includes-an .gitignore +-index.php index.php +- - LICENSE-- license.txt +- readme.html +--- README.md +- wp-activate.php http://wp-activate.php... *- wp-settings.php +- wp-signup.php +-- wp-trackback.php +- xmlrpc.ph

Modify the code. After you're finished, commit changes to the GitHub repo:

Add Git .Commit git with"Add WordPress files "Added WordPress files"

This is the part where you should invest much of your time. Then you'll be able to see how simple it is to add GitHub to WordPress.

Step 2: Make or utilize a Website for Your My Dashboard

If you already have a site, you could do this without a problem but if you're looking to create an entirely new website is best to start from an empty environment. This is less time to complete an WordPress installation.

Visit Your My Dashboard click on the web sitessection Then click your button to add the websitebutton. Complete the form and in a few hours, you'll be able to have an open space which you are able to work within.

Add site modal with the
Make a website with a modal.

Step 3: Change To a Staging Environment

In order to create a staging space, navigate to the dashboard of your website and select the Environment option in the upper right-hand side of your page. Choose the stage from the drop-down menu.

's site page staging environment option.
The stage environment.

Click on the Create a staging zonebutton. Depending on the number of files you have in your live environment it'll be longer or shorter before the system to begin loading. This is why it's suggested to create an empty environment if there's no live web site when you first start.

Create a staging environment page with the title "My awesome  site", instructions about this feature, and an arrow pointing to the "Create a staging environment" button.
Create the stage.

After pushing your repo to the staging environment you can push it to an actual environment. The process will be seen in the real world later on.

4. Connect To the GitHub

To connect to a repository on GitHub, My needs access to your GitHub account. Don't worry -- this is true for any application that requires access to a specific repository.

Go through the deploymentsection after you've set up your staging space, and follow by pressing the Begin the setting upbutton.

GitHub Deployment page in My, showing the "Begin setup" button.
Start setting up.

Then, you'll be taken to the GitHub login page, where you can set up the distribution of the repo you've made using the credentials of your GitHub repo.

After that after that, you'll be able to select the organisation(usually your personal account) you want to pull your repo's from and the Repository within the which you've created your WordPress site, and the branch that you wish to pull your repo's repository from (in the majority of instances that case, it's "main").

Configure deployment modal with the checked "Auto deploy" option.
Configure deployment.

It is possible to check whether you want to check the Auto deploy after commitbox to enable My to be able to automate the deployment of any modification made to the branch you selected.

Be careful with this option. Make sure to deploy the auto-deployment feature whenever you're working on one distinct branch for each feature and you're only making an agreement with the primary branch that will be responsible for integrating those elements.

Click the Finalizebutton. Now, you can deploy your repo into your Staging environment.

 GitHub deployment page of the "My awesome  Site" showing the "Deploy now" button.
Start your deployment now.

It will take only a few seconds for you to enjoy your brand new staging website. It can be accessed via your domainssection by clicking your open URLlink.

"My Awesome  Site" Domains section showing the Open URL link.
Open URL.

If, for any reason, you need to unplug your My website from the repo, click on the change settingsoption and select the Unplugbutton.

Deployment modal showing the "Organization", "Repository", and "Branch to pull" fields, the auto-deploy checkbox, and the "Disconnect", "Cancel", and "Change deployment" buttons.
Disconnect repo.

Step 5: Press Live

Click on environmental actions and choose the "Push to live"option.

GitHub Deployment section showing the "Push to live" environmental action.
Live to press.

If you've made it the point at this point, then you'll already have an operating website that has been deployed through your GitHub repository!

GitHub Deployment Tips

This function can be utilized this feature in a range ways, and below are some guidelines on ways to utilize it effectively

  1. Manage your GitHub project using branches that only merge changes with main in the event of merging a branch.
  2. Make sure to activate the auto-deploy feature if you follow the second procedure.
  3. Make sure you test every system! Be sure the problem doesn't get to the production website.
  4. Careful with documents that you modify, most times you'll need to modify your content of the WP-Contentor folder.

Summary

Git along with GitHub are powerful tools for every developer which is on the market. Now you know how you can integrate them to WordPress.

It is possible to use the SSH method as well as the brand new My feature: the GitHub deployment. Each offers its advantages

  1. Method of SSH: It only can be used with themes and plugins. It is possible to manually configure the repo needed to develop themes or plugins and then pull it from the server that your site is hosting on.
  2. GitHub Method of Deployment: This is a brand new feature that is available in My. This is an automated process which lets you focus on creating your web site locally, handles the process of deployment.

Make sure to evaluate them in order to build the best WordPress website you could.

How has integrating WordPress along with GitHub affected your site and the development process? Let us know in the comment section!

This post was first seen on here