Search the archives

Using WordPress with GitHub

We’ve talked a lot about web design on our blog, but this post 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 we build and test locally, then push our changes to production after writing and testing our code.

For now, 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. After you’ve installed MAMP, here’s what to do next.

1. Download WordPress

Download WordPress

If you haven’t already downloaded WordPress after installing MAMP, go ahead and grab it now.

2. Log in to GitHub

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).

Create a repository

3. Clone your GitHub repository

Clone your GitHub repo

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.

Finder

4. Copy and paste your files

Finder

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

Finder

5. Activate theme

Activate theme

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

6. Commit and push your files

Push files to GitHub

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

Push files to GitHub

7. Install WordPress on a remote server

This should be self-explanatory, just download and install WordPress on a live web server. Easy peasy.

8. Clone your repo via Terminal

Clone your repo via Terminal

Using the command line on your web server, clone your repository into the wp-content/themes folder on the web 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.

9. Activate the new theme

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

10. Make changes to your local theme

Update local theme

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

GitHub app

11. Pull in your changes

Pull in your changes

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

And that’s all folks!

These eleven simple steps should help you get your local theme development synced to your production site 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. In the meantime, happy building!

7 comments so far
  1. Thanks for the post! I also am liking this commenting format + interactions.

  2. 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

    • 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?

  3. 235

    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

    • 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!

  4. 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!

    • Our pleasure, Cristina—glad you found it useful!

Mentioned
  1. […] Using WordPress with GitHub – Today we’re going to show you how we build and test locally, then push our changes to production after writing and testing our code. These eleven simple steps should help you get your local theme development synced to your production site using the amazing service that is GitHub. […]

Leave your comment below
* Required

Introducing Gitdone

Quickly add GitHub issues without your fingers ever leaving the keyboard.

Try the beta

Let’s talk about your project.

After we get some information from you, we’ll set up a time to discuss your project in further detail. You should expect to hear from us in a few days.

Do you have a project budget?

You can leave this blank if you don’t know.
$

How did you hear about us?

Dribbble, Twitter, or Google perhaps?
* required

Thanks , you’re all set!

We appreciate you thinking about us for your project, we’ll be in touch soon.If you need anything in the meantime, hit us up on Twitter.

Go back to the home page A royale success!. Cheesy, I know. And no pun intended. :)

Hi, it’s nice to meet you.

Please drop us a note below and we’ll get back to you soon.

* required

We got your message, !

Thanks for taking the time to reach out, we’ll be in touch with you shortly.If you need anything in the meantime, hit us up on Twitter.

Go back to the home page A royale success!. Cheesy, I know. And no pun intended. :)

Having an issue with your Tumblr theme?

You can search our knowledge base below, or send us a message. Either way, we’ll help you get your problem resolved quickly.

Rather just send us a message?

* required

We got your message, !

We’re sorry you’re having problems, but we’ll be in touch with you soon.If you need anything in the meantime, hit us up on Twitter.

Go back to the home page A royale success!. Cheesy, I know. And no pun intended. :)