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.
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) ↓.
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.
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).
5. Activate theme
Log in to WordPress on your local machine and activate the new 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.
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.
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.
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.
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!
Did you like that article? Sign up for our weekly newsletter and we’ll send a new one to you 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 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!
