Have you ever thought about how you can speed up your WordPress design + development process to make it easier for you to focus on doing what you love? Now you can – with Git version control.
When I worked with the team at ForwardJump, I’ve learned many great things about working in a team environment that revolves around collaborative, version-controlled workflows. They introduced me to Git + BitBucket and taught me a thing or two about using version control to develop a WordPress website.
It’s a steep learning curve, but once you get the hang of using Git, it’s so worth it! I’ve even begun using this wicked amazing tool in my own client projects. Version control was something that I didn’t think about using in my own practice, but I’m glad to have been introduced to it – it’s a life-saver!
How to Use Git in WordPress Development
So, what is Git?
Git is an open source Distributed Version Control System that allows you to make and track changes to your development projects. Rather than having one single place for the full version of your development projects, you can have a repository that allows you to view and manage the project’s history as you work on it.
It allows you to make changes to a single file or a group of files, and rather than re-uploading your entire project, you only have to worry about the files you worked on. You can also use Git to manage your theme files and upload them to a repository that is connected to an online staging site. So while you’re working from localhost to develop your website, you can make changes to your theme files and your staging site will reflect those changes after you’ve sent them to your online repository.
Best of all? Git is free.
Why should I use Git?
Git benefits you and your design + development process in many ways!
For developers, you have the option to create branches (think of branches from a tree) that provide you with an isolated environment for every change that you make to your code without messing with the original.
For designers, Git allows you to roll out new UX/UI features by checking out a branch and giving you a sandbox environment to play in. Whether you’re wanting to implement an entirely new user flow, replace an image, or design a new feature, Git gives you the option to view a real working copy of the project without breaking the current site.
So, before we can begin using Git for all the great amazing development things, let’s install WordPress on our computer to work with it locally.
How to Set Up LocalHost
Before we can use Git for WordPress design + development, we’ll need to download and install XAMPP (for PC) or MAMP (for Mac) on your computer. This turns your computer into a local web server that allows you to install WordPress on your computer to work from!
Using LocalHost as your local development server has many benefits, the most notable being that you can work on a WordPress website without being slowed down by internet connection. Working locally means that you can see immediate changes, and only you can access the site until you upload it to your hosting server! Overall, it’s a great development tool.
After you have downloaded the installer file for either XAMPP or MAMP, click on the installer. A prompt will appear:
The XAMPP setup wizard will guide you through the rest of the installation, so you’ll want to click next.
The next window will ask you what software components you would like to install. Keep in mind that components like Apache and PHP will be greyed out, so you’ll be unable to deselect them. Because we want to use WordPress locally, we will need MySQL and phpMyAdmin so make sure that they’re selected for install.
Next, you’ll need to select where you would like to install XAMPP. I created a new folder in C:\Program Files\XAMPP.
In the next window, you’ll be asked if you would like to install Bitnami for XAMPP, a free tool that installs WordPress, Drupal, and Joomla! With XAMPP. I personally prefer to install WordPress on my own, so I unticked the “Learn more about Bitnami for XAMPP” box and clicked next.
Now that we’ve gotten through all of the initial installation steps, we’re ready to install XAMPP! Click next.
Once XAMPP has installed, the setup wizard will ask you if you would like to start the control panel. The control panel allows you to view the interface that runs your local environment. Leave the box ticked and click Finish. The control panel should then load and you’ll see this:
If the installation went smoothly, you should see black and blue text. However, if there’s red text, that means something went wrong. Never fear! More often than not it just means that there’s a port conflict – an easy fix!
When XAMPP gives you errors like this, it typically means that there is another program on your computer that is using ports 80 and 443, which are ports that Apache and MySQL need to run efficiently. If you’re using Windows 10, the World Wide Web Publishing Service is most likely the culprit and uses port 80. This program is used by Internet Information Services (IIS) and can either be stopped or deleted.
To stop the service running, do the following:
1. Go to Start, type in “services.msc” and select the best match
2. Scroll down in the Services window to find World Wide Web Publishing Service
3. Right click on it and select Stop
4. This should free up port 80. When you restart XAMPP it should run without errors
If that doesn’t resolve the issue, you can set up a new firewall rule to forcibly unblock the ports:
1. Open Windows Firewall on your machine and > click on Advanced Settings on the left
2. Click on Inbound on the left then on the far right click New Rule
3. Click Port and then TCP. In the field below for Specific Ports type in “80, 443” and click Next
4. Check Allow the Connection then click Next
5. Make sure all options are checked and click Next
6. In the name field, enter whatever you want, but for the sake of consistency let’s type in LOCALHOST1. Click Finish
7. Now repeat steps 1-6, but name this new rule LOCALHOST2 and click Finish
8. Restart your computer
9. Ports 80 and 443 should now be open locally on your computer.
If the ports are now open, we should be able to start Apache and MySQL without problems. If you closed the XAMPP control panel to fix the port issue, start XAMPP again. Then click on the start button for both Apache and MySQL.
Now let’s check out the new local server we installed! Open the internet browser of your choice (I’m using Chrome) and type in http://localhost into the URL bar. You should see this page, which means it’s working!
Installing WordPress: Set up MySQL Database
Before we can install WordPress, we need to set up a MySQL database. Open your XAMPP control panel and click on admin in the MySQL section. You should have a new window pop up with the phpMyAdmin interface like so:
Then click on databases at the top left of the screen where you’ll be prompted to create a new database. I’ve called mine ‘WP’. Once you’ve entered a name for your database, click on Create and then close the window.
To install WordPress into your new database that you just made, you’ll need to download the latest version of WordPress.
To get WordPress to work with XAMPP, unzip WordPress into the right folder. Navigate to the XAMPP folder that you created when you installed XAMPP and open the htdocs folder – C:\Program Files \ XAMPP\htdocs.
Then create a new folder for your WordPress installation. To keep everything organized (which is especially helpful if you install multiple WordPress instances), I named the folder ‘WP’ to match the database I created. After you have a new folder made, you can unzip the WordPress zip file into this folder.
Now open the WordPress folder that you just created and find the wp-config-sample.php file. Rename it to wp-config.php and then open it. Once the file is opened, scroll down to the following lines:
These lines of code determine the login information for the database you created.
• Replace database_name_here with the name of your database. For this example, I replaced database_name_here with WP.
• Replace username_here with root
• Remove where it says password_here and leave it blank
Then save the file and close it to move onto the famous 5 minute WordPress install!
To install WordPress, open your internet browser and type in http://localhost/wp.
The first screen that you see should be the translation screen, allowing you to choose which language you would like to use. Choose your language and then click Continue. On the next screen, follow the instructions and enter your username and password details. Click on Install WordPress and allow WordPress to take care of the rest!
Whoo! Congratulations, you have successfully installed WordPress on your computer!
Set Up Git with SourceTree
To set up Git with SourceTree, you’ll need to download and install Sourcetree, a visual Git interface that allows you to use Git without having to type out command lines.
Use the following steps to install SourceTree:
1. Click the button for downloading SourceTree from the SourceTree website. Depending on whether you are using a Windows or Mac, the installer is a DMG or EXE file.
2. Double-click the DMG or EXE file to open it.
3. Install SourceTree as you would any other application. From the License agreement page, select I agree to the Atlassian Customer Agreement.
4. From the Atlassian account page, if you have an account, click Use an existing account. A popup appears where you can enter your credentials. If you don’t have an account, click Go to My Atlassian. A page opens where you can create an account.
5. If you have a Bitbucket Cloud account, enter your Bitbucket username and password, and click Continue. If you don’t have a Bitbucket account, click sign up for free or Skip Setup.
6. Unless you already have a repository you want to clone, click Skip Setup from the Clone your first repo box.
If you need further assistance with installing SourceTree, I highly recommend taking a look at the Atlassian Knowledgebase for more information. It’s a great resources and extremely helpful!
Create a Local Repository
Repositories are directories in which Git stores information on changes in files. The directory that you use is completely up to you, though it’s usually not a good idea to track the entire WordPress folder because of the third-party code like core WordPress, theme, and plugin updates. Since these update fairly often, Git will track these changes.
More often than not, it’s a good idea to set up the repository in a folder that contains the theme or plugin that you’re actually working on!
In SourceTree, click on the button Add Repository in the lower left corner, or Clone/New in the top menu.
Navigate to Create New Repository, and choose Git for type and choose the theme or plugin destination path that you would like to track for Git.
Afterwards, choose a name for this repository (such as the website name) and click Create. The repository is now set up and you should be able to see all of the files in the destination path within the File Status window on the right.
Now onto the important features of Git. 🙂
To capture the current state of your project, we’ll need to commit the files to the repository. Think of it like saving a game at a checkpoint, so that if any issues come up, you can reload at any time.
The first part of a commit is called staging, which means setting up files to commit them to your repository. In SourceTree, this is extremely easy to use. You’ll see three windows: staged files, unstaged files, and their content.
Unstaged files contains all of the files in your directory. To stage them, click on the option box to the left of the file name to select them; there is also an option to select all via the respective box.
After that, you can click on Commit in the top menu or click into the Commit Message Field below. A commit message is a description of what action you took in the commit. I tend to use it to note what changes I’ve made in the file, or when using resources like Pivotal Tracker, to note what task I’ve worked on.
After you’ve entered your commit message, click on the Commit command. Git will now begin tracking changes to all of the files that you’ve added to your staging queue!
Reverting to a Previous Version
Uh oh, something stopped working in my file! Have no fear, we can easily fix that! Thankfully SourceTree gives us the option of restoring the original file in a matter of a few clicks. You have several options to reset your files:
1. Find the changed file in the commit that you want to revert to. Find the options button in the top right corner and click on Reverse File. If you want to revert single lines of code or target chunks, click on the button Reverse Hunk to revert all visible changes on the lower right. You can also use Reverse Lines to revert one or more lines of code to the previous version.
2. You can also right-click on a commit and use the Reverse Commit option to create a new version of the file where the previous changes have been reverted.
3. The third option, which is also the most drastic, allows you to reset the entire branch. This will completely eliminate all changes made after a commit, and will revert everything to the chosen snapshot. You can do this by right-clicking on a commit and choosing the Reset Branch to This Commit option. Be very sure that you want to reset before confirming!
Once you’ve gotten the hang of using Git with WordPress, there’s much more to learn and it will enlighten your process completely! Here are a few options that you should know:
Using a Branch in Git allows you to make a copy of your work and take it in a completely different direction without affecting the original.
If you’re happy with the changes that you’ve made in your new branch and you want to make the changes permanent, you can Merge your files. Merging is the opposite of branching and allows you to make the changes permanent to the master branch.
Using a Remote Repository
In my development work, I have the opportunity to work with great teams and Git has only made it easy to work with them! While I work locally, I’m able to submit the changes that I make to the projects and the team lead can either allow or deny the changes to be made permanent.
Remote repositories are especially helpful if you’re working between a local and live site environment, meaning that whatever change you make locally can be pushed to the live site without breaking a sweat. It basically eliminates the need to constantly upload an entire WordPress website to the live server, and instead only pushes (uploads) the files that you’ve made changes to!
Bonus: Quick and Easy WordPress Setup on Your Client’s Server
Do you use a lot of the same plugins or same themes for many of your clients?
I definitely do! I use roughly the same theme (Genesis Framework) and 10-15 plugins. More often than not it’s a hassle to install WordPress, install the themes, and install all 10 plugins. To make it easier on yourself, do this:
Create a test site on localhost using the WordPress installation tutorial above. Then use a backup plugin like WordPress DB Migrate, Updraft Plus, or Backup Buddy to backup your entire localhost site. When you go to restore it on your client’s staging site on their host, you have a fully-functional instant WordPress site ready to go!
Then all you have to do is work on the theme, input content, work on whatever your client asks of you and BAM, you’re done!
I hope that this tutorial helps you set up a wicked WordPress development process! If you have any issues at all or would like to discuss this process in further detail, feel free to get in touch with me at firstname.lastname@example.org!