WordPress GitHub Integration

Apr 8, 2023

Please share the news with

Let's begin with the basics.

What is Version Control and why is vital?

If you're unfamiliar or are familiar with programming The concepts behind Git, version control and GitHub might seem weird to those not familiar with these concepts. First, let's go through the various concepts in simple English.

Version Control

The process of controlling the version of a project is to track and manages every changes that are implemented on the plans. It allows you to review, analyze to reverse any of the changes made in the project as well as back to the prior version.

Git

Git is, without doubt, the most popular software used to manage versions. It's a powerful program that provides all the functions you require for collaboration, as well as to monitor the progress of your project as well as to rectify mistakes in the event of an issue.

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 with WordPress

Imagine the possibilities of taking advantage of the power of versions which allow you to reverse earlier versions before the change that's ruined your site and also using Git branching to create and test that crazy idea you devised while coding for an afternoon.

Making the WordPress project part of a larger group is yet another reason to use WordPress as well as GitHub together. Your group can work on different aspects on the same website without having to shut your website you're working on to allow production.

When you're done check the most recent updates using main or any other push button in your dashboard (keep on the lookout).

To summarize the many benefits of the GitHub as well as the WordPress combination:

  • The typical workflow of WordPress development
  • Your site could be prevented from shutting down due to an error with an PHP script through rolling back older version
  • Collaboration with your friends or colleagues is easily possible through your site.

Starting with Git, GitHub, and WordPress

In this article, we'll teach you how to create themes or plugins on the platform of GitHub as along with WordPress.

Before we begin, we must understand the fundamental idea behind this process. The process will involve an internal Git project. It will create the initial versions of your theme or plugin. This is because they're among the files that have been modified most in your WordPress project. Then, you'll set up an GitHub repository, and then clone the repository inside the live installation of your WordPress live version.

Let's go!

Step 1. Install Git on Your Computer

This might seem excessively obvious, but it's essential to set up Git before you can work on your plugin or theme.

In order to install it, you must navigate to the official download site to download the appropriate software for your particular operating system.

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 might find that you need to execute a command with the terminal. If you're running Windows then you must begin the wizard installation. This can take only a couple of minutes.

To confirm that Git is working properly, type this command in the terminal, or on an appropriate command prompt:

git --version # git version "your version"

Step 2: Log in on GitHub, and create Repository

Create or log in to a GitHub account using 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 and registered, you can create an account on the theme or plugin you have installed when you click the URL for the new repository.

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

On the application, include the information about the repository and also the name of the plugin that you plan to create, in my case: MyWordPressTheme Include a brief outline of the project that gives a brief description of your project. choose if your repository is either private or public (public that is, anyone has the ability to view the repository and make a fork from it, but to you only have access rights to gain access) then choose if you require the user to be provided with the Readme as well as an authorization from the start. Select the Create Repository button..

Step 3: Set Up the Local WordPress Environment

Let's look at how we could do this by using Dev.

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

Input the name of your site, WordPress admin username, and password. Click"Create Site" and click the "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 on the site.

It is possible to examine the WordPress structure of the files in the management of 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.

Your site is now fully functional WordPress site listed on your website directory to serve as your home.

Step 4: Clone the GitHub Repo on your local Machine

The theme is available on an external GitHub repository which contains license and README files along with license files. Now is the time to incorporate these files into your environment and start creating your theme.

The theme is built in this instance, however you'd use the identical steps in the case of developing an application.

Navigate to the folder of your WordPress site's folder. then, go to into the WP-contentdirectory it is the directory where you can find the various themes and plugins available.

Once you've built the website using Dev It is necessary to add the path to your site to the Site Info and then go to the WordPress-contentfolder.

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 themes, we go to the theme folder and duplicate the repository we created on GitHub. Be sure to configure the SSH keys on GitHub in the event you're not using it.

The whole process is described following using just a handful of instructions.

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

It is then possible to create the style of WordPress using the WordPress template or plugin.

Step 5: Make sure to the commit button and then push your changes to the remote repository

You're ready to design your design.

One of the advantages of developing a theme or plugin using your personal computer is the ability to experiment using the program, make use of the program, make all changes and test any method you'd like to employ. Thus, you can make the most impressive themes and plugins that you're in the position to create.

However, if you're comfortable with the process in creating the WordPress theme, starting with the beginning, here's a list of documents to take a examine.

  • index.php: The main file that specifies the structure of the theme (required)
  • front-page.php: Creates the first view on the site. It also displays the"/" (root) page
  • footer.php: Defines the footer on the website It's also utilized on a variety of pages within the site.
  • functions.php: Allows to design particular functions
  • header.php: Defines the header
  • page.php: Pages that are created by the admin's site
  • screenshot.png: Image that is used to symbolize the logo of the theme
  • single.php: Default method used by blogs.

For more details, please visit the WordPress Developer's page. for more details, visit the Developer's WordPress page to learn more about theme development.

After having created your template, you're in a position to upload your modifications on GitHub.

Next, execute git status to see precisely what's changed.

Status of git... Not tracked files Untracked files(use "git add ..." to" to be included the files that will be committed) It's 404.php assets/ footer.php style.css404.php assetsfooter.php front-page.php assetsfooter.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 index.phppage.php screenshot.png single.php style.cssscreenshot.png single.php style.cssstyle.css

You can then join all the files in the directory at present and save them.

Add git .Then you make it available into git"Added the theme file "Added theme file"

Then, you can make sure to upload the changes in the remote repository of the GitHub.

git push

6. Send SSH over Your WordPress Website , and then duplicate the Repo

The theme is built so now is the right time to implement it in your current WordPress website.

Many hosting companies provide the possibility of connecting to SSH for establishing a connection to SSH. For further information, please visit the official website of the service provider.

The first step is to obtain the SSH command as well as the password.

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

Paste your SSH commands to the prompt. Enter the password (using your authenticated in order to copy and transfer to copy to copy the SSH password).

If you've authenticated successfully, you're now inside of the WordPress website'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/. Go to the themes folder and then move the repo into the folder.

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

We'll make use of HTTP to create a clone of the GitHub repo, since we're intending to change the style of the server. We'll only create changes by using the code editor we prefer that we use on our personal machines instead of using an unpleasant terminal editor which is located on the server.

Then, at a later time, when you'd like to transfer all changes that have been applied to remote repos to your server, follow these steps:

Pull git... Quick-forward 2 + 1front-page.php * 2- 1 changed file one deletion (+), one deletion(+)

Step 7: Login to your WordPress Administration and activate Your Theme.

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

Once you have done that, head over in the appearancesection and activate your awesome theme.

WordPress admin dashboard with an arrow pointing to the "Activate" theme button.
Choose your preferred design.

If you're working with plugins then follow the exact procedure except that you place your plugin in the plugins/wp-contentfolder.

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

To assist in making WordPress developers' lives WordPress developers easier, we're rolling out GitHub Deployment to WordPress. GitHub Deployment allows you to link directly to the GitHub account. It lets you benefit from the process of creating your website locally, making it easy to publish your website by merely a click.

All you need are an my account and the capability to utilize the control of versions in WordPress development.

Advantages of using GitHub deployment

The main benefits from this approach are

  1. Blends the knowledge of developing locally and then publishing it remotely on WordPress
  2. You can use all features of the system for controlling version changes using Git and GitHub
  3. It is simpler than the manual approach which was described previously.
  4. Automatically deploy changes to your GitHub repo

Furthermore, you should download WordPress essential files , and upload them in your repository. It isn't enough to commit either a plug-in or theme since after the deployment, every staging file is deleted.

However, it's much simpler than you'd think.

Let's explore the ways you can join GitHub using WordPress with the help of My!

1. Create your GitHub Repo with all the WordPress Core Files

It's similar to the method that was previously used, however it requires you to submit all files of your WordPress installation to the GitHub repo.

Register an account with GitHub after which copy it onto your PC so that you are able to begin building the website in your local environment.

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/

Take note of how we extract our zip file from the directory currently in use before copying the contents of it into our repo by using the Cp Dot (/. ) syntax.

The structure of your repo should look something like this:

. +- .git + wp admin +the wp-content file is included in wp-content + .gitignore +- index.php +license.txt + license.txt +readme.html +- readme.html + README.md + wp-activate.php for activating an account... + wp-settings.php + wp-signup.php + wp-trackback.php +-- xmlrpc.ph

Make changes to your project. Once the project is completed and you are satisfied with your changes, post them on the repo on GitHub: GitHub repo:

Add the Git .andCommit using git with the command -m "Added WordPress files"

This is the place in which you'll need to be spending the majority the time. The result will show that it's easy to integrate GitHub into WordPress.

Step 2: Create or connect to a website using My Dashboard. My Dashboard

If you've got an existing website , you're able to avoid this process. If you're making your own website, you should be sure to create the website using the most secure, clean background. This will take less time in comparison to a fully WordPress installation.

Go to your My dashboard Click on the sitessection and select the button for adding the websitebutton. When you've finished the process, within about two hours you'll be able to work from an area that is unoccupied where you're able to use for work.

Add site modal with the
Include a site-specific modal.

Step 3: Change To a Staging Environment

In order to create a stage area, go to your site's dashboard, and then click on the Environment option in the upper right corner of the page, then select staging in your drop-down menu.

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

Select the to create a staging areabutton. Based on the amount of files that you've got within your current environment, it might take longer or shorter time to get it up and running. That's why it's recommended to start with an empty environment if you don't already have an online presence at the 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.
Set up a staging area.

After you've uploaded the repo into the staging environment and you're able to bring it back into the actual environment. Then you'll see how this procedure works in the future.

Step 4: Log to the GitHub

For pulling a repository on GitHub, My needs access to your GitHub account. It's not a problem -it is the case for any service that needs permissions to access the particular repository.

You'll need to go to the section to deploysection once you've made your staging space Then you can click the Start Setupbutton.

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

Following that, you'll get directed to the GitHub authentication page which allows you to configure the deployment to your GitHub repo.

Once you've completed the process, you'll have the option to choose the Organisation(usually the account you use for personal reasons) that you'd like to pull the repository of your repo from. You can also select the repo within which you built your WordPress site, and finally choose the branch that you'd prefer to pull it from (in the majority of cases, it's named "main").

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

It is possible to check the auto-deploy upon commitbox If you wish My to be able to distribute every modification you make to the branch you chose.

Take care with this option, you will only need to automatize deployment while working on one branch specifically that addresses each of the aspects in addition to committing your principal branch for integrating these elements.

Select the Closebutton. 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 shouldn't take more than a two seconds for you to get access to your brand new stage website. It is accessible through your Domainssection after clicking the "Open URL"link.

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

If, for any reason, you'd like to remove your My site from your repo, simply visit your change settingsoption and click on the disconnectbutton.

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

Click on the Environmental Actions and choose the "Push into live"option.

GitHub Deployment section showing the "Push to live" environmental action.
Dreaming of living the dream.

You've come this to this point, and you're now on the verge of functioning websites which may be created through an GitHub repository!

GitHub Deployment Tips

You can benefit from this attribute in numerous ways and here are some of the most effective tips you can make use of it to the fullest extent:

  1. Manage your GitHub project using branches. Only make modifications to the original in the event of merging branches.
  2. It is advised to select the auto-deployment function in the case of the second recommendation.
  3. Check every part! Make sure not to let the issue get into production.
  4. Be careful with the files you modify, usually you'll need to alter the WordPress-Contentor folder.

Summary

Git as well as GitHub are powerful tools that are available to any developer. The way to use them is clear now. they can be used for integration with WordPress.

You can choose between to use either SSH method or the more modern My features GitHub deployment. Each of them comes with its advantages

  1. SSH procedure: Only works with themes and plugins. Make a repo by hand and then create a theme plugin and download it from the server your site is hosting on.
  2. GitHub Method for deployment This is a innovative option that's available to My. This is an automated process where you are able to concentrate on building your site locally while handling things like the deployment.

Make sure you check them for the most effective WordPress website that you can.

What has the connection between WordPress and GitHub affected your site's design or the development process? Let us know your feedback by commenting in the section below!

This article was originally posted this website

This post was first seen on here