Using WordPress with GitHub: A step-by-step guide to get up and running

Code 3 min read

Using WordPress with GitHub

Last updated: November 18th, 2018

We’ve talked a lot about building a web design company on our blog, but this article is for the Developers in the house.

As you may know, we’re big fans of WordPress and use the open-source workhorse any chance we can. But let’s face it—keeping your production site in line with your local testing site can become a nightmare if you don’t have the proper set up. Today we’re going to show you how 45royale builds and tests a WordPress site on local servers and then pushes those updates to a live production server.

One quick note before we get started: We’re going to assume that you have a local environment set up on your machine. We’ve been using MAMP for years as it provides an all in one solution for Apache, PHP and MySQL on a Mac OS environment. If you’re new to local development, check out this article to get up to speed on downloading and setting up MAMP. Have MAMP installed? Great, here’s what’s next:

1. Download WordPress

If you haven’t already downloaded WordPress after installing MAMP, go ahead and grab it now. Place it in your .htdocs folder so it’s ready for the next step.

Download WordPress

2. Log in to GitHub

Log in to Github and create a repository for your new theme. Once you do, you’ll be able to get a clone URL for the repository (see below) ↓.

Log in to GitHub
Create a new repository

3. Clone your GitHub repository

Clone your new Github repository (we’re using the GitHub app for Mac) onto your local machine in the wp-content/themes folder where you installed WordPress. The result should leave you with a folder called wp-content/themes/theme_repo_name.

Enter repository URL
Find your theme folder
Clone the repository

4. Copy and paste your files

Copy and paste all of the files from one of the default WordPress themes into your theme_repo_name folder (we’re using the twentyseventeen theme). If you have an alternative or existing theme you want to use, feel free to copy those over instead of one of the default theme(s).

Copy and paste your files

5. Activate the theme

Log in to WordPress on your local server and activate the new theme.

Activate the theme

6. Commit and push your files to GitHub

Git commit and push all of the new files in the working copy of your local repository to your remote GitHub repository.

Commit your files to master
Successful push to GitHub
Your local files are now on GitHub

7. Install WordPress on your remote server

This should be self-explanatory, just download and install WordPress on a remote web server. We use Digital Ocean for all of our sites — we highly recommend them.

8. Clone your repo via Terminal

Using the command line on your remote server, clone your repository into the wp-content/themes folder on the remote server. Ex: git clone https://github.com/mattdowney/test-repo.git. It will then prompt you to enter in your GitHub username and password before cloning.

Clone your repository via Terminal

9. Activate the new theme

Log in to WordPress on the remote web server and activate the new theme.

10. Make changes to your local theme

Make changes to the theme on your local server (we like using Sublime Text) then commit and push all of the changes to the remote repository.

Testing your repository updates
Make sure your changes appear in GitHub for Mac

11. Pull in your changes

Using the command line on your remote server, use git pull inside of your wp-content/themes/theme_repo_name directory to pull in your changes to the remote server. Simply type git pull inside the directory and it will make the update. If you have a private repository, it will prompt you for your GitHub username and password in Terminal before pulling in the latest changes.

Git pull your changes

You should be up and running now!

These eleven simple steps should help you get your local theme environment synced to your production server using the amazing service that is GitHub.

If you have any questions or want to share your experience, we’d love to hear from you in the comments below. In the meantime, happy building!

30 Comments

Lia September 26, 2015

Thanks for the post! I also am liking this commenting format + interactions.

ed October 2, 2015

Curious how you guys might scaffold your WP projects and deploy with git…?

We currently have YeoPress as apart of our workflow and a custom deploy script we made using Node — called WPKit https://www.npmjs.com/package/wpkit

Adam October 8, 2015

Hey Ed! Being a small shop we haven’t really had the need to scaffold our WP projects up to this point. In most cases we’re not fans of frameworks, but we have our standard build that we use. We just set things up locally before pushing out to our repo and then cloning it on a staging server. Now if we were doing the same type of sites over and over or had a complex system we were pushing out to, we’d definitely want to streamline it. Any tips or downsides to the method you are currently using?

235 January 16, 2016

hello um can you help me please. i dont understand step 8 . im not sure how to clone me repo via terminal. any help is appreciated. thank you

Adam Little January 26, 2016

On Github.com you can copy the full URL to your repo (shown here: http://cl.ly/exxm). Then in terminal you can navigate to where you want to clone your repo and then type:

git clone [then paste in your repo URL] and hit return.

It will prompt you to login with your Github credentials and once confirmed the repo will be cloned into that location. Good luck!

Cristina M Robinson September 1, 2016

Oh my gosh thank you so much for putting this article together! It helped me a ton! I’m just getting my feet wet with all of this and your article by far as been the easiest to follow, and I got everything working! Thank you, thank you!

Matt Downey September 6, 2016

Our pleasure, Cristina—glad you found it useful!

Chris Misterek October 12, 2016

Thank you for the article! So, if I’m making changes on the dashboard side of wordpress in things like visual composer will this still work? Or would this need to all be done via text editor for it to be work?

Thanks!

Matt Downey October 25, 2016

Hi Chris, thanks for the comment! This method only captures and tracks the changes/updates made in the WordPress theme folder. Anything done in Visual Composer would not be saved under source control.

Andrew January 7, 2017

Very Nice.
I’m a jr front end dev and I’ve been looking for guide like this. For a long time. A long, long time.

God bless.

Arseny July 22, 2017

Hey, anybody worried about a `wp-config.php` file? With database server’s connection strings. I can’t see mentioning it in the article but share this file with real data to public Github repository – not an option.

Adam Little July 25, 2017

Thanks for the comment! To be clear, this method only places the theme in the repository. Putting the entire WordPress build in the repository would be far more complicated, especially when you factor in automatic updates to core files. Our example uses a private repo, but since only the theme directory is used, the wp-config file is never exposed.

Big Skillet September 12, 2017

Great article! I’m having a hard time figuring out where to keep my design files in relation to my WordPress files. Where do you guys keep yours? I see that you don’t upload them to Github… and it looks like nobody really does.

Adam Little September 13, 2017

Hey Big Skillet! Are you referring to design files as in assets used by your particular theme or are you talking about your actual Photoshop/Sketch files? Assets used by the theme can totally be stored in Github in your particular theme folder like this example describes. There is also no reason you couldn’t put your Photoshop/Sketch files in there too. However, we prefer to store those types of files in Dropbox with all of our other project assets for easy access and sharing. That way we’re not having to initiate new commits to a Github repo every time we decide to make an edit to the designs. Hope that helps!

Big Skillet October 2, 2017

Adam, exactly… I was referring to Photoshop/Sketch files. Seems like it makes more sense to keep those somewhere outside the repo, like Dropbox. Thanks!

Randy Wong October 7, 2017

Hello,

I am having problems with Step 8 myself.
I’m using MAMP as my web server but I was not able to find the command line for it. Can you help me with a solution?

If it makes a difference, I was also doing this on a PC.

Big Skillet October 24, 2017

How do you approach multiple versions of the same website? Do you keep them in separate repositories, or create a branch and merge back in? Either way… wouldn’t the database and uploads need to be kept in the repository as well, and not just the theme?

Adam Little October 26, 2017

For different versions of the same website we always just put them in a branch and then merge it into staging and then production when it’s ready to go. We made a conscious decision not to put the database or uploads into the repository. We wanted to be able to publish and edit content quickly without the barrier of making commits with every little change. You can certainly do it that way, just requires more steps and diligence to keep everything perfectly in sync.

pysilla December 28, 2017

I’m totally new in web development but I manage to do all of this. Thank you so much!

Matt Downey December 28, 2017

That’s awesome—glad it was easy for you, pysilla!

Apuroop January 30, 2018

Hey. Great article! Just one question, Why are we cloning the repo two times? Once with the GitHub desktop app and again with the Shell. From step 8, I tried cloning it from my XAMPP Shell, but obviously it said “fatal: destination path ‘test.repo’ already exists and is not an empty directory.” Sorry but what am I missing?

Adam Little January 30, 2018

Hey Apuroop! In this example we’re cloning the repo on our local machine (using GitHub desktop) and then again on a web server (via the Shell). This way you can work on your local changes, commit them, then pull them into your web server to view the changes live on the web. Let me know if that answers your question!

RT May 29, 2018

Hey Adam,

Confused on step 7. How come we have to install wordpress on a remote server? What if I already use github pages as my server for my website?

Adam Little May 30, 2018

Hey RT, this example assumed you wanted to have WordPress publicly accessible on a web server somewhere, not just on your local machine. How are you planning to publish WordPress content to GitHub pages? WordPress requires a database, where as, GitHub pages (to my knowledge) is geared towards static sites. Which is one of the reasons GitHub pushes Jekyll as way to publish static blog content on GitHub pages. If that’s your goal, to use WordPress on your local machine and publish static content to GitHub pages, this article might be more helpful for that scenario.

Frédéric De Smet June 11, 2018

I already made some changes on my remote server directly is it possible to obtain these changes and use this method ?

Adam Little December 4, 2018

Hi Frédéric! Looks like we missed this comment earlier. Sorry for the late reply! If your remote server has the most recent changes to theme, you can still use this method. Simply just download the theme folder from the remote server and use it for Step 4 instead of copying/pasting one of the local themes. Once you do that successfully you can delete the theme on the remote server and in Step 8 you’ll clone your new repo to that remote server to replace it. So essentially you’re replacing a static theme on your existing remote server and you’ll replace it with a theme that is managed via a Git repo. Hope that helps!

Simon December 1, 2018

Hello nice article. Do you install wp plugins on development environment and again in production ?

Adam Little December 4, 2018

Hi Simon! Yes, we do keep them separate vs. keeping them in sync. You could certainly make a case for keeping /plugins as part of the repo, but we have typically just tested out various plugins on a staging environment, then copy over whatever we need after we test.

Ian December 3, 2018

Thank you for putting this together. I think I am just about there, but I am a bit of a GitHub rooky. I have a client that has been pushing GitHub Commits to the live site, but I am not sure how they are syncing the files on GitHub and the site hosted by WPEngine. Can you please tell me how this syncing is set up? Are the steps in this article how they did it?

Adam Little December 4, 2018

Hey Ian! I don’t know if I can comment on how they have things setup as every environment is different. If you have access to the client’s repository and you pull it down to your local machine, you should be able to tell what they’re tracking in the repo. For example, if they are tracking just the theme folder. If that is the case, you can simply clone their repository into the theme folder on your local instance and work from there. The important thing to watch out for if you’re new to Git is to make sure you do a branch of the repo. That way you don’t overwrite something in the master branch (ex. what your client has done already) while you’re working on getting things properly setup for yourself.

Join the conversation, leave a comment below

This site uses Akismet to reduce spam. Learn how your comment data is processed.