Using Git to Create a WordPress Child Theme
Using Git for all types of WordPress development is becoming a best practice. For example, have you ever wanted to customize your WordPress theme and not worry that an update from the original theme developer will overwrite your customizations? Then you need to develop a child theme.
Creating a child theme usually requires using something like the Chrome developer tools to find out what changes you need to make to the theme’s stylesheet,
style.css. You also might need to make changes to one or more of the PHP files to update specific WordPress templates.
How do you manage all of that development? What do you use to keep track of changes? How do you go back to a change you previously made? What is the best way to can you test out some new changes without worrying about losing your current theme changes? The best answer we know is to use Git for version control. And that’s the focus of this post—how to use Git with WordPress (specifically with DreamPress, but you can also use it with other DreamHost hosting services).
Note: DreamPress announced support for Git in September 2016 to facilitate better management of WordPress customizations for web developers and web designers.
What is Git?
In the past, you would use FTP/SFTP to update your web server with your customizations. Problem is, though, you are not able to go back to an earlier version of your customizations if you need to, like when your change breaks something. You also can’t review an earlier version to see what did change. Now you can solve all that with Git.
Git is a very popular open source tool to manage software development. It is ideal for creating and maintaining themes, plugins and any customizations to your WordPress website (beyond those you can do in the WordPress Customizer). As a version control tool, Git allows you to take snapshots of your code whenever you need to so that you can go back to a snapshot at any time. Git allows you to create a “branch” to add a new feature, fix a bug or even experiment with some new changes without worrying about messing up the current version.
What Can Git Be Used For?
There are differences of opinion on what Git is best used for. Some feel Git works great as a WordPress backup tool, putting your entire WordPress site under Git version control. Others do not feel it necessary to put your instance of WordPress under version control as WordPress core developers already do that.
Similar differences of opinion are the case with putting your WordPress database under Git version control. Some feel it works great to keep your database under version control once set up. Others feel it is a bit tricky to do as Git understands files and file changes, not databases. There is good news here, however. The plugin Revisr does a really good job of managing your WordPress database (or your entire WordPress installation) using Git if you choose to go that direction.
What everyone does agree on is using Git as a tool to manage your personal customizations or your own theme and plugin development. Further, it seems to make sense to keep each project in its own repository. That way you can share custom themes or plugins between websites or with others.
There are a few different workflows that can be used with Git and WordPress. What works best depends on if you are jointly developing with others or not, and your personal preference.
- Local only. Only use Git locally and continue to use SFTP to update your server with changes.
- Local and web server. Create a Git repository both locally and on your web server. Push changes from your local instance to your server instance that is copied to your WordPress theme or plugin directory.
- Local, public Git host and web server. This configuration is ideal when you are doing joint development with others. You can use GitHub or Bitbucket to host your collaborative development to update and share code changes. And whenever you choose, you can push updates from the Git host to your web server. GitHub is best for code that will be shared publicly while Bitbucket is better for a private repository as it is free. (GitHub charges for private repositories.)
Note: You never want to put wpconfig.php in a public repository!
How to Use Git With a Child Theme on DreamPress
DreamPress has built in support for Git. It can be used for either the second or third type of workflow above. The example below looks at the second workflow method—having a Git repository locally and on your DreamPress server that you keep in sync.
So let’s explore how to use Git with a child theme—we’ll do it step by step (with reference to help articles to explain some of the steps). We are going to use the command line and SSH in our example.
Note: This article is not a Git tutorial, since we will only use a few Git commands. We’ll share some references for learning more about Git at the end of this post.
Step 1: Set up a shell user in the DreamHost panel if you haven’t done so already. Once you have done that, make note of your shell username, password and server. (Even better, store it in a password manager.) For DreamPress, your username and server will look something like this (we will use these in our example):
Shell username: wp_ab1cde
Step 2: Set up an SSH key. This will allow you to automatically connect to your DreamPress server and will enable Git commands to work remotely. This varies a bit between Windows, Mac and Linux, so check out this help article: Setting up an SSH Key for passwordless login
Be sure to copy down your passphrase in a secure place. You may need it (such as for the Mac OS keychain).
Note the reference to firstname.lastname@example.org in the help article will look like this using our example shell username and server above:
Step 3. Choose your favorite terminal. Windows does not include a terminal, so you need to choose one like PuTTY, SuperPutty or MobaXterm. Both Mac OS and Linux include a terminal, but other options are available. For Mac OS, we recommend iTerm2.
Open your terminal at this point. We’ll use it from here on out.
Step 4. ssh into your server. This will take you directly into your shell user root. Using our sample shell user and server, it looks like:
The first time you do this, you will need to accept your server as a valid host. This information will be saved in a known host file on your computer.
Note: The command listed doesn’t work for Putty (Windows). To configure PuTTY to work correctly, check out this KB article.
Step 5. Set up your server Git repo. This is best not kept in the same directory as your child theme. This requires a few Linux commands.
mkdir git/project (creates the repo directory)
cd git/project (change to the repo directory)
git init --bare (initialize the git repo)
Note that git/project can be any directory you choose. Be sure to create a directory for every unique project.
Step 6. Create a file that will copy updates from your server Git repo to your child theme directory. We will use vim, a server file editor—again using only a few commands—to create this file.
vim hooks/post-receive (open vim and create the post-receive file)
Add this in the vim editor. This tells where to push these changes. This needs to point to your child theme directory:
GIT_WORK_TREE=/home/shell-username/domain/wp-content/themes/child-theme-directory git checkout -f (on one line)
For our example, the second line would look like this using a fictitious domain named example.com and theme named creative:
GIT_WORK_TREE=/home/wp_ab1cde/example.com/wp-content/themes/creative-child git checkout -f
To exit out of vim, simply type “
:wp”. That will write the file out and quit.
Now give the file execute rights in the terminal command line:
chmod +x hooks/post-receive
Step 7. Now you are ready to set up Git locally if you haven’t already. There is a great article in the online Git documentation that explains how to do that for Windows, Mac OS and Linux. Note that Git is now installed on Mac OS by default if you are at the latest release. You can check to see if it installed with this command in the terminal app:
Step 8. Create your local git repository by using the cd command to get to your child theme directory:
Step 9. Do your local child theme development. We won’t cover that here—check out this blog post on how to create a child theme.)
Step 10. Save your changes to your local git repo while in your child theme directory:
git add .
git commit -m ‘message about the commit’
The ‘message about the commit’ can be whatever message you want to use, such as ‘Initial commit’. At any point you can check the status of your git repo:
Step 11. Set up the connection to your remote server. This is done by using a git remote command while your terminal is in your child theme directory.
git remote add myserver ssh://email@example.com/ ~/git/project (on one line)
We used myserver as the name for the server. You can use whatever you would like to name your server. Using the example username and server, the command would be
git remote add myserver ssh://wp_ab1cde@wp_123456.dreamhostps.com /~/git/project
Step 12. Now that the connection between your local and server git instances is made, you can push your changes to your server repository and your WordPress site:
git push myserver +master:refs/heads/master
This command is only done once. After that, whenever you create a new snapshot in your local git repo, you can push that to your server simply with this:
git push myserver
That’s it! Once you have set this up, it is super easy to keep these two repos in sync. Plus now you have all of your child theme development under version control.
It is worth noting that there are other ways to do this, such as using the git clone command. (You can also use a GUI application like SourceTree.) For that, it might be worth your while to learn more about Git. For more information, check out these resources:
Good luck using Git with DreamPress!