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 [html].htdocs[/html] folder so it’s ready for the next step.
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 [html]wp-content/themes[/html] folder where you installed WordPress. The result should leave you with a folder called [html]wp-content/themes/theme_repo_name[/html].
4. Copy and paste your files
Copy and paste all of the files from one of the default WordPress themes into your [html]theme_repo_name[/html] folder (we’re using the [html]twentyseventeen[/html] 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).
5. Activate the theme
Log in to WordPress on your local server and activate the new 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.
7. Install WordPress on your remote server
8. Clone your repo via Terminal
Using the command line on your remote server, clone your repository into the [html]wp-content/themes[/html] folder on the remote server. Ex: [html]git clone https://github.com/mattdowney/test-repo.git[/html]. 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 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.
11. Pull in your changes
Using the command line on your remote server, use [html]git pull[/html] inside of your [html]wp-content/themes/theme_repo_name[/html] directory to pull in your changes to the remote server. Simply type [html]git pull[/html] 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.
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!