WordPress GitHub Integration

Share on

Let's start with the basics.

What Is Version Control and why is it so Important?

If you're not familiar with or have experience with coding, the concepts of Git, version control and GitHub might seem weird to you. We'll first explain every one of them in plain English.

Version Control

Version control is the process that tracks and manages every change made to the project. This allows you to look back, compare, and even reverse the whole project back to its previous version.

Git

Git is by far the most popular program for managing versions. It's an efficient software that has all the features you need for collaboration, to manage the history of your project as well as correct errors if required.

GitHub

Benefits of Integrating GitHub with WordPress

Just imagine being able to make use of the control of versions that allow you to roll back an earlier version prior to the change that messed up your site as well as using Git branching to work and test on that crazy idea that you had in an afternoon of coding.

Building the WordPress project with a team is another powerful reason for making use of WordPress and GitHub as a team. The team you are working with may work on various aspects on the same website without risking to shut down the site that you are using for production down.

After you're finished, just pull up the latest changes from main or any kind of pull button from your dashboard (keep checking).

To sum up the benefits of the GitHub and WordPress combination:

• You can use the normal workflow in WordPress development
• You can stop your website from going down after an error in some PHP script by rolling back older version
• You can collaborate with others with your website.

Getting Started With Git, GitHub, and WordPress

In this part we'll show you how to develop themes or plugins using GitHub and WordPress.

Before beginning, let's understand the basic idea behind this procedure. It's going to be with a local Git project, where you'll create the first versions of your theme or plugin We'll talk about them since they're the most often edited files within the WordPress project. After that, you'll create an GitHub repository, and then clone the repository inside the live installation of your WordPress live install.

Let's go!

Step 1: Install Git on Your Computer

This may seem a little too obvious, but it is essential to have Git installed on your system prior to working with your theme or plugin.

To install Git just go onto the official downloads page and download the appropriate package for your operating system.

If you're using macOS or Linux, you may need to execute a command using a terminal, whereas if you're running Windows then you need to start on the wizard installer, that can take just a couple of minutes.

To confirm that Git is properly installed, type this command inside a terminal or at a command prompt:

git --version
 # git version "your version"

Step 2: Sign up for GitHub and Create a Repository

Sign up or sign in to a GitHub account using the sign-up page of GitHub.

Once you have signed in, you can create a repository for your plugin or theme by clicking the URL for the new repository.

Fill the name of the repository and the title of the plugin you're going to develop, in my case: MyWordPressTheme, include a description that gives an overview of the project, select whether your repository is either private or public (public: anyone can view it and fork it; exclusive: just you have the right to be able to access it) and then decide if you need to provide a Readme and a license from the start, and click on the Create Repository button..

Step 3: Set Up Your Local WordPress Environment

Let's look at how we could accomplish this with Dev.

Enter your website's Name, WordPress admin username, and password. Select the "Create Site" button.

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.

It is possible to look at the WordPress file structure in the file manager.

You now have a fully functional WordPress website in your directory for your home.

Step 4: Clone the GitHub Repo to your local Machine

There's an external GitHub repository, which contains the README and license files and license files. Now is the time to incorporate the files into your own environment and get started on developing the theme.

In this example, we're building a theme, but you would do exactly the same thing when creating an application.

Navigate to your WordPress website's folder, and then enter the WP-contentdirectory it is the directory that contains all the themes and plugins available.

When you have created the website using Dev You must add the path to your site in the Site Info and then go to the wp-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 a theme, we go to the folder for themes and copy the repository that we made on GitHub. Be sure to configure the SSH keys on GitHub in the event that you've not done it.

The entire procedure is described below by using a handful 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/

Then you are able to begin developing the design of your WordPress template or plugin.

Step 5: Add commit, and push changes to Your Remote Repo

You're ready to design your design.

One benefit of building a theme or plugin locally on your own machine is the ability to play around with the software, make use of it, make all the changes, and test all methods you'd like to use. Therefore, go ahead and build your best theme or plugin you can.

However, if you're not fully familiar with the process of developing an WordPress theme starting from scratch, below are some files you should consider.

• index.php: The principal file for the theme structure (required)
• front-page.php: Creates the primary view of the website; the"/" (root) page
• footer.php: Defines the footer on the website, and it's used in many of the pages on the website.
• functions.php: Allows to generate specific function
• header.php: Defines the header
• page.php: Pages generated by the admins' website
• screenshot.png: Image used to represent the logo for the theme
• single.php: Default mode used by posts.

For further instructions, you can refer to the WordPress Developer's Page on Theme Development.

After you've created your theme, you're ready to commit all the changes to GitHub.

First of all, first, run git status to see precisely what has 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

Then, you can add all files that are in the current directory and commit them.

Add git .Then, commit to git"Added theme files "Added themes files"

Last but not least, upload all the modifications to the remote repository on GitHub.

git push

6. SSH Into Your WordPress Website and copy the Repo

The theme is built, it's time to use it on your current WordPress site.

Many hosting companies have a means to connect to SSH to connect, for further information go to the website of your service's provider.

First, get the SSH command and password.

Paste your SSH commands into your command prompt. Enter the password (using you'll need to authenticate to copy to copy the SSH password).

If you authenticated correctly you're now inside of the WordPress site file structure.

Now, you'll have to navigate to your site's folder, which is usually located on /www/name-site/public/. Then, go to the themes folder and copy the repo in it.

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

Notice we're using HTTP when cloning the GitHub repo since we won't make any changes to the server's theme. We'll only create changes using our favorite code editor on our personal machine, and not in an ugly terminal editor on the server.

In the future, each time you want to pull the latest changes of the remote repo into your server, just run:

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

Step 7: Go to the WordPress Admin Activate Your Theme

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

After that, visit your Appearancesection and activate your awesome theme.

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

Congratulations -- you've just built an awesome WordPress theme with Git, GitHub, and WordPress!

Making use of My To Integrate GitHub With WordPress

In order to assist in making WordPress developers' lives easier We're making available GitHub Deployment in WordPress. GitHub Deployment is a connection to your GitHub account. It lets you take advantage of the process of creating your site locally and making it possible to deploy the site live in just one click.

The only thing you need is an My account as well as the capability to utilize version control in WordPress development.

Benefits of using GitHub Deployment

The top benefits of this procedure:

1. Blends the experience of developing locally, and then deploying it remotely to WordPress
2. Allows you to use all capabilities of version control using Git and GitHub
3. More simple than the manual technique that was previously described.
4. Auto-deploy changes from your GitHub repo

Additionally, you need to download WordPress essential files and upload the files to your repository. It isn't enough to commit either a theme or a plug-in, since upon deployment all staging files are deleted.

However, the process is way easier than you might think.

Let's look at ways to connect GitHub with WordPress with the help of My!

Step 1. Start by creating the GitHub Repo with all the WordPress Core Files

It's similar to the method used above, except you'll need to commit all the documents of your WordPress install to the GitHub repo.

Create an account on GitHub and clone it to your computer so that you are able to begin building the website in the local setting.

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/

Note how we're extracting our zip file in the directory currently in use and copies the contents into our repo using the special cp dot (/. ) syntax.

Your repo's structure your repo will look like this:

. +-- .git
+-- wp-admin
 +-- wp-content
 +-- wp-includes
 +-- .gitignore
+-- index.php
+-- - LICENSE-- license.txt
+readme.html +- readme.html
+-- README.md
+-- wp-activate.php
to activate your account...
+ wp-settings.php
+-- wp-signup.php
+ wp-trackback.php
+-- xmlrpc.ph

Change your project and once you've finished, you can commit your modifications to your GitHub repo:

Add git .andCommit git use -m "Added WordPress files"

It's the area the area where you need to spend much of your time. It will be clear how easy it is to integrate GitHub to WordPress.

Step 2: Create or Use a Site on Your My Dashboard

If you have an existing website you are able to bypass this step. if you're creating your own site is best to set up the site from a clean environment. It will be less time-consuming than an entire WordPress installation.

Go to your My dashboard Click on the Sitessection, then snap the Add sitebutton. Complete the form and within a couple of hours, you'll have an unoccupied space that you can work in.

Step 3: Change To a Staging Environment

To create a staging environment visit your website's dashboard select the Environment selection button on the upper right-hand side of the page, and select Staging from the drop-down menu.

Click on the create a staging environmentbutton. Depending on the number of files you have in your live environment, it could take longer or shorter to boot up. This is why it's suggested to set up an empty environment if you don't already have a live web site in the start.

After you've pushed your repo to the staging environment you can push it to the live environment. You'll be able to see how this works at a later date.

Step 4: Sign in To the GitHub

To pull a repository from GitHub, My needs access to your GitHub account. It's not a problem -- this happens with every service that requires permissions for a specific repo.

Go to the deploymentsection after you've set up your staging area, then select the Start setupbutton.

You'll then be directed to GitHub's authentication page, where you'll be able to set the deployment for your GitHub repo.

When you're done then you're able to select the Organization(usually your own account) which you'd like to pull your repo's repository from, the repository in the which you created your WordPress site, and the branch you'd like to pull from (in most instances, the branch is "main").

You can check the auto deploy upon commitbox if you want My to be able to distribute every modification you make to the branch you chose.

Make sure to be cautious with this option, you only want to automate deployment when you're working on a specific branch for each feature , and you're only committing your main branch for merging these aspects.

Select the Closebutton. Now, you can deploy your repo into your Staging environment.

It won't take more than few seconds to allow you to be able to use your brand newly created staging website. It is accessible through your Domainssection and clicking the Open URLlink.

If for some reason you'd like to remove your My site from your repo, go to the Change Settingsoption and then click the Disconnectbutton.

Step 5: Press to Live

Click on Environmental actions and then select Push to liveoption.

If you've made it this far and you're now on the verge of a totally functional site deployed via an GitHub repository!

GitHub Deployment Tips

It is possible to benefit from this feature in many methods, and here are some of the most important tips on how for making use of it effectively:

1. Manage your GitHub project with branches and only commit changes to the main when merging a branch.
2. You should only activate the auto-deployment option if you follow the second suggestion.
3. Test every aspect! Don't let that bug reach the production website.
4. Take care with files you edit, most of the time you'll want to modify the WordPress-Contentor folder.

Summary

Git as well as GitHub are really effective tools for any developer available. It is now clear how you can integrate them with WordPress.

There is a choice of using either the SSH method as well as the brand new My feature GitHub deployment. Each of them has its own advantages:

1. The SSH technique: Only works with themes and plugins. Create a repo manually, build a theme or plugin and pull it from the server your site is hosted on.
2. GitHub Deployment method: This is a new feature for My. This is an automated process in which you can focus on developing your website locally and handle the deployment stuff.

Make sure to evaluate them to create the top WordPress site you can.

How has the integration of WordPress with GitHub changed your website and the development process? Tell us in the comment section!