WordPress GitHub Integration

Share the news on

We'll start by introducing the basics.

What Is Version Control and Why Is It Essential?

If you're not familiar with or have experience with coding, the concepts of version control, Git, and GitHub may seem quite bizarre to you. Let's first define the terms with plain English.

Version Control

The process of controlling version control is to track and control changes to the project. It allows you to review the project, make comparisons, or even restore the entire project to an earlier state.

Git

Git is the most widely used version control program available. It's an efficient software that has all the features you need to work collaboratively, manage the progress of your project, and correct mistakes if required.

GitHub

Advantages of Integrating GitHub With WordPress

Imagine being able to take advantage of the control of versions that allow you to roll back an earlier version prior to the modification that screwed your website as well as using Git branching to test and work your crazy concept that you thought of in an afternoon of coding.

Building the WordPress project with a team is another reason worth using WordPress as well as GitHub as a team. Your team and you can work on different features on the same website without threatening to take the site that you are using for production down.

Once you're done you would simply pull up the most recent updates on your main or any sort of magic pull-button from your dashboard (keep going through the report).

For a summary of the many benefits of the GitHub and WordPress combination:

• Lets you use your normal workflow in WordPress development
• You can stop your website from being down due to an error in some PHP files by moving back earlier version
• It lets you collaborate simultaneously using the functions of your website.

Starting With Git, GitHub, and WordPress

In this article in this section, you'll learn how to create themes or plugins using GitHub as well as WordPress.

Before starting, let's grab the main idea of this process. The first step is to create an local Git project, where you're going to build the very first versions of your plugin/theme -- we talk about them because they're among the frequently edited files of the WordPress project -- then you'll build an GitHub repository and then copy the repository inside your WordPress live install.

Let's go!

Step 1. Install Git onto Your Computer

It may sound a simple, but remember that it is essential to be running Git on your system prior to working with your plugin or theme.

To install Git just go to the official downloads page and select the suited package for your operating system.

If you're using macOS or Linux, you may need to use terminal. However, if you're using Windows, you should fire up the wizard application that can take just a couple of minutes.

To confirm that Git is installed, run the following command from the command prompt or terminal:

git --version
 # git version "your version"

Step 2: Sign up to GitHub and then create a repository

Sign up or sign in to an GitHub account through the sign-up page of GitHub.

After signing in, set up a repository to host your theme or plugin by clicking the New repository link.

In the repository name, with the name of the plugin you're going to build In my example: MyWordPressTheme, provide a description and an overview of the work, choose if the repo is going to be open or private (public that anyone is able to view it and fork it; secure: you are the only one who have the right to be able to access it), decide if you need to provide a Readme and/or a licence from the start, and click on the Create Repository button..

Step 3: Set Up your Local WordPress Environment

Let's see how we can achieve this by using Dev.

Then, type in your site's username, WordPress admin username, and password. Click on 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.

Take a glance at WordPress file structure in a file manager.

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

Step 4: Clone the GitHub Repo to your local Machine

There's a remote GitHub repository, which contains the README and license files It's now time to integrate these files to your local system and start developing the theme.

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

Visit your WordPress site's folder and navigate to the WP-contentdirectory that is the directory that contains all plugins and themes available.

Once you've created your site using Dev After you have created the site, enter the site path available in the Site Information 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 case you've failed to do it.

The entire procedure is described below 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/

Now you can actually start building your WordPress themes or plugins.

5. Add, Commit, and Push Changes to the Remote Repo

You're ready to design your own theme.

One benefit when creating a theme or plugin using your personal computer is that you are able to mess around with the software, make use of it, make all the modifications, and try all the techniques you want. Therefore, go ahead and build your best theme or plugin you could.

If you're quite familiar with the process of making the WordPress theme starting from scratch, below are some of the files that you must be aware of.

• index.php: The main file of the structure of the theme (required)
• front-page.php: Creates the primary view of the website; the / (root) page
• footer.php: Defines the footer section of the site, and it's used in most of the site pages
• 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 used as a logo of the theme
• single.php: Default mode used by posts.

For further instructions, you can refer to the WordPress Developer's Page regarding the development of themes.

Once you've developed your theme it's time to add and commit all the modifications to GitHub.

The first step is to first, run Git status to see exactly what changed.

Git status...
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 commit the files.

git add .•Git commit -m "Added theme files"

Finally, push all those changes to the remote repo and then to GitHub. GitHub.

git push

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

Your theme has been created and now it's time to implement it in your live WordPress site.

Many hosting companies have a means to connect to SSH, for more information visit your provider's documentation.

To begin, you must obtain the SSH command as well as your password.

Paste your SSH commands into your command prompt. Then, enter the password (using the authentication process for the copy of to copy the SSH password).

If you've successfully authenticated, you're now within the WordPress website's file structure.

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

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

Notice we're employing HTTP to clone the GitHub repo because we're not going to make any changes to the theme that's on the server. The only way to make changes is by using the code editor we prefer locally on the machine we're using instead of using an ugly terminal editor that's on the server.

In the future, every time you want to pull the most recent changes from the remote repo into your server, you would simply run:

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

Step 7: Enter the WordPress Administrator to activate your theme.

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

Then, go to your appearancesection and enable your amazing theme.

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

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

Using My To Integration with GitHub with WordPress

To make WordPress developers their lives easier We're launching GitHub Deployment in WordPress. GitHub Deployment connects to your GitHub account and lets you develop your website locally, while also allowing you to push it to live with the click of a button.

The only requirement is an My account and the ability to control versioning for WordPress development.

Advantages of Using GitHub deployment

These are the most significant benefits of this process:

1. Merges the experience of developing locally and deploying remotely to WordPress
2. Allows you to use all features of version control with Git and GitHub
3. More simple than the manual technique as shown in the previous paragraph.
4. Auto-deploy changes from your GitHub repo

You must also download WordPress the core files and then commit them to your repository. You can't just commit either a theme or a plug-in, since upon deployment all staging files are deleted.

With that being said, the process is way more simple than you thought.

Let's see how you can integrate GitHub with WordPress with the help of My!

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

It's similar to the procedure described above but you'll need to add all of the WordPress documents of your WordPress setup to your GitHub repo.

The first step is to create an account in GitHub and clone it to your computer so that you are able to start building your site on the local system.

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're extracting the zip file in the current directory , and later copying its contents to our repo with the special cp dot (/. ) syntax.

The structure of your repo ought to look similar to this:

. +-+- .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 project. Once you're done commit all the modifications to the GitHub repo:

Add git ./
 git commit with the command "Added WordPress files"

This part is where you should invest more of your time. You'll see how straightforward it is to integrate GitHub to WordPress.

Step 2: Make or use a Website on Your My Dashboard

If you already have a website, you may do this without a problem, however If you're going to create an entirely new website is best to set up into a blank environment. This will take less time to complete a WordPress installation.

Visit your My Dashboard Click on the sitessection, then snap the button to add a sitebutton. Fill in the information and within a couple of hours, you'll have an empty space that you can work in.

Step 3: Change To a Staging Environment

To create a staging environment navigate to the dashboard of your site and click on the Environment option on the upper right-hand side of the page. select staging from the drop-down menu.

Now, click on the Make a staging areabutton. Depending on the number of files that you've got in your live environment it'll take longer or shorter for the system to begin to load. This is why it's suggested to create an empty environment if there's no live web site when you first start.

After you've pushed your repo to the staging environment you can push it to an actual environment. We'll see this in action in the future.

Step 4: Connect To the GitHub

To access a repository on GitHub, My needs access to your GitHub account. Don't worry -- this is the case with any service that needs access to the specific repository.

Navigate to the deploymentsection available once you've created your staging area, then hit the Begin setting upbutton.

After that, you'll be taken to the GitHub authentication page so you can configure the deployment of the repo you have created with your GitHub repo.

After that after that, you'll be able to choose the organization(usually your personal account) you want to pull your repo from, the Repository within the which you created your WordPress site, and the branch you want to pull your repo from (in the majority of instances this case the branch is "main").

It is possible to check the Auto deploy after commitbox if you want My to automatically deploy each changes you make to the branch you selected.

Take care with this choice It's best to auto-deploy when you're working in one specific branch for every feature and you're only making a commitment to the main branch for merging those aspects.

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

It won't take more than a couple of seconds for you to enjoy your brand new staging website. The site can be accessed via your Domainssection and then clicking on the open URLlink.

If for some reason you need to unplug your My website from your repo, go to the Change Settingsoption and click on the Disconnectbutton.

Step 5: Press to Live

Click on Environmental actions and choose the Push to liveoption.

If you've made it to this point, you should now have an operational website deployed from the GitHub repository!

GitHub Deployment Tips

You can take advantage of this function in a variety of methods, and here are some tips for how to make use of it successfully:

1. Manage your GitHub project by using branches only commit modifications to main when merging a branch.
2. Only activate the auto-deploy option if you follow the second step.
3. Make sure you test all of your systems! Make sure that the bug doesn't get to the production site.
4. Take care with documents you modify, most of the time you'll want to edit the WP-Contentor folder.

Summary

Git as well as GitHub are really powerful tools for every developer that is out there. It is now clear how you can incorporate them into WordPress.

You can use either the SSH method as well as the brand new My feature: GitHub deployment. Each of them has its own advantages:

1. Method of SSH: Only works with themes and plugins. It is possible to manually set up a repo to build a theme, or plugin and pull it from the server your website is hosted on.
2. GitHub Deployment Method: This is a brand new feature in My. This is an automated process that lets you concentrate on creating your site locally, handles the deployment stuff.

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

How has integrating WordPress together with GitHub changed your website and the process of development? Let us know in the comments section!