Code    3 min read

Using WordPress with GitHub

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

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

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

Clone your GitHub repo
Finder

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

5. Activate theme

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

Activate theme

6. Commit and push your files

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

Push files to GitHub
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

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.

Terminal

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

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.

Update local theme
GitHub app

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

Git pull!

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!

Written by @mattdowney

Did you like that article? Sign up for our weekly newsletter and we'll send you more like that every Friday. 🙌

When you subscribe to our newsletter, you'll get the inside scoop on all the latest happenings around the 45royale camp. More importantly, we'll send you resources to help you refine your own design and development process, harness agility in your creativity, and stay inspired to meet your work with fresh eyes. Sound good? Giddyup!

Loading

Spam is an enemy we all share. Sort of like the White Walkers. As such, we’ll never share your email address with anyone. Oh, and if you're still not convinced our newsletter rules (it does, trust us) check out previous issues, homie.

15 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!
  5. 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!
    • 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.
  6. 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.
  7. 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.
    • 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.
  8. 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.
    • 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!

Leave your comment below