WordPress GitHub Integration: A Beginners' Guide

Interested in using WordPress with GitHub?

GitHub — along with Git itself — helps you implement version control for your codebase, which can be really handy for WordPress development and project collaboration. Additionally, GitHub Pages provides a convenient free hosting space for a WordPress site, as long as you're ok with using a static WordPress approach.

There are a lot of ways in which a WordPress GitHub integration can be helpful. But if you aren't a GitHub power user, you might not be sure where to start when it comes to GitHub and WordPress.

That's what this post is here for. We’ll review two ways that you can set up a WordPress GitHub integration:

1. WordPress Development: you can use GitHub to manage your WordPress themes and plugins and generally streamline your WordPress development workflows.
2. Static Site Hosting: you can use a WordPress static site generator to automatically deploy your WordPress site to GitHub Pages, which provides a convenient and free way to host simple WordPress websites.

Let's get started with GitHub for WordPress development.

How to Use GitHub for WordPress Development

If you want to use GitHub for WordPress development, you'll typically want to focus on two areas:

1. GitHub for WordPress themes
2. GitHub for WordPress plugins

Using GitHub to manage the codebase for your entire site usually isn't optimal for a few reasons:

• You should never edit core WordPress files, so it doesn't make sense to include the core files in your repository. What's more, the core WordPress files are already mirrored on GitHub.
• You probably don't need to include your site's static media files in the repository, such as images and videos.
• Trying to version control the WordPress database opens up a can of worms. While some projects such as VersionPress have attempted to use Git to version control the WordPress database, there isn't any project that has been really successful and it just adds an unnecessary amount of complexity to your setup. Using an activity log plugin is a better option for most sites.

However, it can be very helpful to use GitHub to manage your WordPress site's theme and plugins, especially if you're using custom themes and plugins.

You can manage the codebase of your WordPress themes and plugins on GitHub and then deploy directly from GitHub to your live WordPress site.

Here's a step-by-step guide for how to set it up.

1. Create a local WordPress development site.

To get started, set up a local WordPress development site. This is the site where you'll work on your projects and make changes. Then, you'll version control and commit those changes using Git and GitHub.

To create your local development site, you have a number of options.

First, you can use one of the WordPress-specific development tools. Here are three popular options:

• Local
• DevKinsta
• DesktopServer

Second, you can use a general local development tool such as one of the following:

• XAMPP
• MAMP

For this example, we'll use Local as it makes it very easy to spin up a new WordPress site.

2. Register for GitHub and install Git on your computer

Next, you'll need to register for a GitHub account and then install Git on your computer.

If you're comfortable working from the command line, you can just install the latest version of Git and go from there. But if you don't like using the command line, we recommend installing the GitHub Desktop client instead, as it will give you a visual interface to work with Git.

For our tutorial, we're going to use GitHub Desktop as it's more accessible to most users, but the same basic steps apply if you're working from the command line.

When you open GitHub Desktop, you'll be prompted to log in to your GitHub account. Then, you should see the desktop client dashboard, like in the example below.

3. Create a new repository.

To create a new repository, click Create a New Repository on your hard drive in the GitHub Desktop client.

Give it a name that matches the folder of the theme or plugin that you're working on. Then, under Local path, enter the path to the theme or plugin parent folder on your local WordPress site. Essentially, you'll be creating a repository for this specific theme or plugin so that you can easily manage your work.

For this example, we'll set up a repository for the default Twenty Twenty-One theme. It might look like this:

You'll now see all of the theme's files in your repository and you can make changes using your favorite code editor.

You can also easily track changes using the GitHub Desktop client, like in this example.

4. Publish your repository to GitHub.

To publish your local repository to GitHub, you can click Publish repository at the top of the GitHub Desktop client. This will open a prompt where you can configure a few details, like the ones shown below.

After a short wait, your code will be published on GitHub.

For future commits, you can use the Commit button in GitHub Desktop. Then, you can click Push origin to push those changes to your GitHub-hosted repository.

How to Simplify GitHub Theme and Plugin Deployments With WP Pusher

At this point, we've covered most of the puzzle for integrating WordPress and GitHub. But what if you want to deploy your version-controlled themes and plugins from GitHub to your live WordPress site?

Well, one option is to just manually deploy when needed, which might work fine if you don't update that often.

However, to make this process as simple as possible, you can use the freemium WP Pusher plugin. WP Pusher lets you deploy themes and plugins from GitHub just as easily as installing and updating themes and plugins from WordPress.org.

WP Pusher is 100% free to deploy themes and plugins from public GitHub repositories. However, if you want to deploy from private repositories, you'll need one of the paid plans. These plans start at $99 for use on up to five sites and come with a 30-day money-back guarantee.

If you want to see if it's right for you, you can test it for free by deploying from a public repository and then decide if you want to pay for the private repository support.

Here's a quick guide on how to use WP Pusher for GitHub WordPress theme and plugin deployments.

1. Install and configure the WP Pusher plugin.

To begin, download and install the WP Pusher plugin on the site where you want to use GitHub to deploy WordPress themes and/or plugins.

2. Connect WP Pusher to GitHub.

Once you've activated the plugin, go to WP Pusher → Settings → GitHub and click the Obtain a GitHub token button.

In the popup, authorize WP Pusher to access your GitHub repositories. Then:

1. Copy the token from the popup.
2. Paste it into the field in your WordPress dashboard.
3. Click the Save GitHub token button.

3. Install WordPress theme or plugins.

Next, go to WP Pusher → Install Plugin or WP Pusher → Install Theme, depending on the type of extension that you want to install. For this example, we're installing a theme.

Then, enter the following information:

• Theme repository: enter the repository that contains the theme you want to install.
• Repository branch: if you followed the tutorial above, you'll likely want to put "main" here.
• Push-to-Deploy: check this box if you want to automatically update the theme on every code push. If you leave it unchecked, you'll need to deploy manually.
• Link installed theme: use this if you want to let WP Pusher take over a theme that already exists on your site.

Then, click the Install theme button.

And that's it. The theme or plugin will now show up in the normal theme or plugin areas. You can easily update an extension in the future much like you update plugins and themes from WordPress.org. Just go to WP Pusher → Plugins or WP Pusher → Themes, respectively.

How to Use GitHub Pages for WordPress Static Hosting

The second option for integrating WordPress with GitHub is to convert your WordPress site to a static HTML site and deploy it to GitHub Pages. With this GitHub Pages WordPress connection, you can essentially host a static WordPress site for free.

Of course, because you're converting WordPress into a static site, you'll miss out on a lot of the useful dynamic functionality that WordPress offers. But for simple blogs or portfolio sites, this can be a really nifty setup that doesn't cost a single penny.

Here's a quick guide on how it works.

1. Create a GitHub Pages repository.

To begin, create a GitHub Pages repository to host your static WordPress site. You can follow the GitHub Pages quickstart guide if you're not sure what to do.

Once you've done that, you'll want to create an offline clone of your repository. For the simplest way to do this, use GitHub desktop. (You can check out this tutorial on setting up GitHub Desktop with GitHub Pages.)

2. Create a WordPress website.

Next, you'll need to create the WordPress site that you'll convert into static HTML and deploy to GitHub Pages. This is not the website that users will visit, but it is where you'll manage your content and design.

The easiest option is to host this site locally using a tool such as Local, DevKinsta, or XAMPP. Or, you can also create the site on web hosting so that you can access it anywhere — just make sure to make it private so that visitors can't access this version of your site.

Once you've installed your site, you should set up the design and add all of your content.

3. Convert to static HTML.

Next, you'll need to convert your WordPress site to static HTML. The best option here is Patrick Posner's free Simply Static plugin.

The free version of the plugin will work if you're fine with manually deploying your site's HTML to GitHub Pages, while the premium version supports automatic deployment to GitHub Pages starting at $100.

Once you activate the plugin, go to Simply Static → Settings and enter the following information:

• Destination URL: the link of the domain name used on GitHub Pages. You'll probably want to use a custom domain name (by pointing it to GitHub Pages), but you can also use the GitHub Pages URL.
• Delivery Method: select Local Directory from the drop-down.
• Local Directory: this is the directory where Simply Static will save the static HTML files. Make this the path to the local version of your GitHub Pages repository.

Now, go to Simply Static → Generate and click the Generate Static Files button. The plugin will export your site as static HTML to your locally hosted repository. It will also rewrite URLs to make sure they're working.

Once the export finishes, it should automatically show up in your local GitHub Pages repository.

4. Deploy WordPress to GitHub Pages.

To finish, you can publish the local repository to your GitHub Pages repository to make your site live. If you're using GitHub Desktop, all you need to do is click Push Origin to make your changes live.

Whenever you make changes to your site, you'll need to repeat steps #3 and #4 again. Or, you can purchase the premium version of Simply Static to simplify deployments to GitHub Pages.

Getting Started With WordPress and GitHub

Whether you want to simplify your WordPress development workflows or host a static WordPress site on GitHub Pages, learning how to set up a WordPress GitHub integration has its benefits.

More advanced users might prefer to use Git from the command line, but the GitHub Desktop client provides an easy way for even non-technical users to use GitHub to manage their WordPress sites.

Set up your WordPress site with GitHub today and you'll be enjoying the power of GitHub's version control and collaboration features in no time.