Category: Installations Made Simple

Installing Git & GitHub on OSX Using Terminal

Knowing how to use Git is incredibly important for all developers, whether you’re building a simple HTML/CSS website or making your own operating system. Git allows you to quickly implement version control into your project, but a lot of people–especially developers first starting out have a hard time grasping what exactly Git is and how to use it. But before we even get to using Git, we have to install it first, which for some people, can be a challenge all on its own.

Git is relatively simple to install. Because I use OSX, that’s what this tutorial will be focused around. Here’s what I’m working off of at the time of this tutorial:

OSX Yosemite 10.10.4
Git 2.4.3

There are guides out there that address installing XCode at the same time as you install Git and guides that show you how to install Git through GUI’s and Tools such as Boxen or Homebrew. Those tools are awesome, but sometimes, they cause even more confusion for beginners. This guide assumes that you want to install Git without installing XCode, or if you already have XCode installed, you don’t want the Command Line tools, and just want to install plain old Git without the use of Tools or installing anything else. So let’s get started.

Installing Git on OSX

Step 1: It goes without saying that the first thing you need to do is to actually get Git and you can download it for free on Git’s website. The latest version for your operating system should be available on their homepage:

Step 2: The downloaded file should a dmg file if you’re installing Git on OSX. You’ll want to double-click on the dmg file to begin the installation process. At the time of this writing, I have the Mavericks version which should work fine for Yosemite as well.

Doubleclick on the file to start the installation process.

Doubleclick on the file to start the installation process.


Step 3: Now, unlike most dmgs that you’re probably used to installing, this process requires a little more manual effort. After you click on the dmg, it will mount the Git installation file and present you with the following:

This is inside the dmg file for Git.

This is inside the dmg file for Git.

Step 4a: You want to doubleclick on the .pkg file (in this case, git-2.4.3-intel-universal-mavericks.pkg) to actually start the installation:

Doubleclick this.

Doubleclick this.

If the installation starts, head on down to Step 5. If you get a warning message about not being able to open the file, see Step 4b.

Step 4b: Depending upon your security settings, you may get a warning that it can’t be installed because it’s from a third party developer. That warning might look like this:

Unidentified developer warning. Sometimes thrown when trying to install Git.

Unidentified developer warning. Sometimes thrown when trying to install Git.

If you get that warning, hold down the CTRL key on your keyboard then right-click on the .pkg file and select Open. That will open a different warning dialog that includes an “Open” button this time which will then allow you to run the .pkg file and continue with your installation. In the backend, doing this will also add an exception for the app you’re attempting to install to your security settings. Once it does this, you should be able to just double-click on the app in the future should you need to reinstall it again:

CTRL + Right-Click + Open.

CTRL + Right-Click + Open.

There are other ways to change your security settings to allow you install apps without getting the warning message. For instance, you can go into System Preferences > General  then click on the Lock in the lower left corner, enter your administrative password and under “Allow apps downloaded from”, you check “Anywhere”. This will allow you to install any app regardless of where you got it and if the developer is unidentified, but if you just want to allow Git for now without allowing all other apps, the above technique is a quick way to achieve that.

Step 5: Git will open up the standard OSX installation dialogs from here where you will be able to select the installation type and then proceed to actually install it onto your computer:

Standard installation dialog.

Standard installation dialog.

There is a Custom Install option, but it’s generally recommended to just go with the Standard Install. This step should be relatively straightforward. Once finished, you should see this:

Installation success!

Installation success!

Verifying the Installation & Dealing with Wrong/Outdated Git Version

Like all installations we do, we probably want to verify that everything went off without a hitch. We’re going to verify Git by going through Terminal. A lot of the work developers do involve getting used to the Terminal so if you were afraid of it before, it’s time to get to know it a bit better because you’ll be working with it a lot. Now, this guide assumes that you are totally new to Terminal.

Step 6: Let’s open up Terminal. If you don’t have terminal mounted on your Dashboard, go to Applications > Utilities to find it:

Ah, Terminal.

Ah, Terminal.

Step 7: If you followed my SASS Installation Tutorial, you might be familiar with how we’re going to check for Git; we’re going to ask it for its version number. Within Terminal, type this: git –version, then hit enter/return on your keyboard.

Checking Git version.

Checking Git version.

Step 8a: You should get the version number that you installed, which at the time of this writing, should be 2.4.3. If you do get your latest version to show up, go to Step 9. Otherwise, if you have an older version show up, head on over to Step 8b.

Step 8b: Now, not content with being simple, those of you who have XCode installed, you may already have a version of Git pre-installed on your machines. That version is very likely to be outdated. Here’s what happened when I requested Git’s version:

Thanks for making my life harder, XCode.

Thanks for making my life hard.

Obviously, that’s not the version I downloaded and installed. This is because my computer is currently using the Git that came with XCode’s Command Line tools. You can check if this is the case with you, by typing: which git into Terminal. Once you run which git, if it returns “usr/local/bin”, you’re using XCode’s version of Git. That means we’re going to have to take a couple of extra steps to get to the actual latest version of Git. And if you’re finding yourself in the same boat, here’s how you get to the newest version of Git that you installed. Type this into Terminal:

export PATH=/usr/local/git/bin:$PATH

Hit enter on your keyboard then type this:

source ~/.bash_profile

Now if you check the Git version again: git –version. You should get the accurate version. You’re not done yet, though. Exit out of Terminal by typing: exit, then close out of it completely. Now, reopen Terminal and try checking the Git version again. If you still get the latest version, you’re good to go to Step 9.

If you’re still experiencing issues getting the proper version of Git after restarting Terminal. Or if the new version didn’t appear even after typing in the path above, head to Step 8c.

Step 8c: If you’re still having problems getting the latest version of Git, you may need to update the PATH to override XCode’s version of Git. What we’ll do is override the path that Terminal is getting the old Git version through. To do that, we’re going to declare a path to the newest version of git and write it into our bash_profile file. bash_profile is typically a hidden file on OSX that holds user set preferences. Within Terminal, type in the following (courtesy of Chris Chernoff at BurnedPixel):

echo “export PATH=/usr/local/git/bin:/usr/local/bin:/usr/local/sbin:$PATH” >> ~/.bash_profile

Hit enter and then type in this and hit enter again:

source ~/.bash_profile

What we’re doing is telling Terminal to reference the file we wrote the new Git Path into above, instead of whatever XCode has preset. From here, we can check Git’s version to see if we finally have the new version. But to make absolute sure we’re getting the latest Git version, exit then close out of Terminal. Then start Terminal up again and try getting the Git version again: git –version. You should see the latest version. Now type this in: which git, you should see “/usr/local/git/bin/git”.This is where you want to be.

If you were wondering what the ~ stands for, it is a shorthand way of referencing the home directory. Now you can finally move on to Step 9 and setting up GitHub.

Setting Up GitHub

Step 9: You’ll need a GitHub account first and can sign up for one here: There are free accounts, low cost, pro accounts all the way up to enterprise. For now, just get a free account. It will give you access to the majority of GitHub’s features and provide you with one private repository.

Step 10: Type in the following: git config –list. You will be shown a list of configurations for your Git installation. If you’re using GitHub (and you should), the first thing you might want to do is edit your username and email address so people working with your projects or looking at them knows who they belong to. To change the username and email, type in this:

git config –global “your name
git config –global “[email protected]

You’ll want to replace the italicized ‘your name’ and ‘[email protected]’ with your own credentials. You can use whatever user name you want, from your real name, to your business name, to a nickname you prefer. However, your user email must be the same user email that you used to sign up for GitHub. Keep the double quotes when you type in those commands too. When you’re done, you can check out your config list again to see the changes you just made. If you mess up setting up your user name or email, you can check to make sure you actually have an issue by typing: git config –get-all or git config –get-all If you typo’d your first value, you may have typed it up a second time thinking one might overwrite the other and actually end up with two values instead. If you happen to see two values displayed like so:

Shows two values for my, which isn't what I wanted.

Shows two values for my, which isn’t what I wanted.

Type this in to replace the value and resolve the issue:
git config –global –replace-all “your name”

The same goes for fixing two values for your user email:
git config –global –replace-all “[email protected]

Step 11a: I doubt the thought of entering your username and password each time you need to send something to GitHub sounds very appetizing. So let’s automate that process so we can streamline this process a bit. Type in the following:

git credential-osxkeychain

You should get a generalized usage message back that looks like this:

What I got that confirms I have the credential helper.

What I got that confirms I have the credential helper.

If you didn’t get the message above, you will need to install the Credential Helper. To do this head on to Step 11b. If you got the above message, go to Step 12.

Step 11b: Let’s install the Credential Helper. You’ll need to type in the following commands in order, hit enter after every command to execute it:

curl -s -O

chmod u+x git-credential-osxkeychain

sudo mv git-credential-osxkeychain \ “$(dirname $(which git))/git-credential-osxkeychain”
(you will be asked for your administrative password for your computer at this point, type it in and hit enter to continue)

git config –global credential.helper osxkeychain

Finally at this point type in git credential-osxkeychain again and you should get the usage message from Step 11a.

Step 12:  OK, let’s test all of this to make sure it works by performing a commit to our GitHub account. Log into your GitHub account and create a new Repository. On GitHub, you should see a link on the welcome screen after you log in to create a new repository. If this is a brand new account, you will also have a giant image at the top telling you to create a repository.

Making a new repository.

Making a new repository.

Once on the repository creation screen, give your repository a name (I named mine testcommit). You will use this name to send your commits using Terminal so keep it short, meaningful and memorable. Also keep in mind that you can’t have spaces or special characters in the name. You can also set your repository to public or private. I’m going to make a public repository for this tutorial, and if you’re following along looking to make your first test commit and have just a free account, a public repository is probably the way to go for now.

Finally, leave the “Initialize this repository with a README” unchecked. All repositories require a readme file which tells others what the repository is for. We’re going to generate our own README file within Terminal. Now, create the repository and let’s do our first commit.

Step 13: When you send your file to a GitHub Repository, you are “committing” it. This means that you are sending it from your local drive onto GitHub. All of this is done within Terminal so let’s head back there and type this in:

mkdir ~/testcommit

Mkdir stands for “make directory”, we are essentially making a /testcommit directory. Now after we make it, let’s actually move into it. Type this:

cd ~/testcommit

You should be inside the folder ‘testcommit’ now. Let’s initialize Git, type this in:

git init

You should get this message: “Initialized empty Git repository in /Users/computername/testcommit/.git/”. Computer Name is where your computer’s name would be, and testcommit is the directory you created. The last part means you’ve initalized git within that directory. What we’ve just done is create a directory on our computer and made it possible for files within that directory to be committed to GitHub. In fact, if you navigate to Users/computername/testcommit within your file explorer, you should be able to locate it pretty easily.

Step 14: We need a test file to send to our new GitHub repository now. Open up a text editor or code editor and create a sample file. You can put whatever you want it in, or if you’re feeling super lazy, you can download a file I set up here: GitHub Commit Test File (HTML)

Step 15: Throw your file into your testcommit folder that you created on your computer. Let’s finally commit this thing. Type this in:

git add commitfile.html

We are essentially telling Git that we want to add that file to the repository. Now, we haven’t yet gotten our file into our GitHub repository, to do that, we need to push it. Type this into Terminal:

git remote add origin

We’re moving into our GitHub repository and getting ready to push files to it up there.

Step 16: Before we can send our files up, we need to make sure our local directory is up to date, otherwise Git will throw an error telling us that we have to pull before we push. First thing’s first, let’s commit. Type this:

git commit -m ‘my very first commit’

We’re telling Git that we’re committing up there. The -m means that what follows (‘my very first commit’) is a message that we’ll be including with our commit. Now, pull the directory by typing this:

git pull origin master

It will pull your GitHub directory and make sure what you have in your local drive is the latest iteration. Now, we’re finally read to push. Type this in:

git push origin master

Once you run that command, your file will be sent over to GitHub and placed into your repository. Check it out in your account on GitHub and you should see your files sitting pretty there.

Before I let you go, one command that you’ll find extremely helpful because I’m positive everyone is going to do this is the remove local repository command. At some point, someone is going to accidentally create a git repository in Terminal in a place they didn’t mean to make a repository. Here’s how you delete it. Go into Terminal, navigate to the directory you accidentally created a repository in by using cd (ex. cd ~/Library) then type this up:

rm -rf .git

Doublecheck that you deleted the repository by typing this:

ls -lah

This will show you all the files, folders and hidden files and folders in the directory you are currently in. If you don’t see a .git file, you’re good to go.

All right, we’re finally done setting up Git and GitHub and we made our first Commit too. This is by far, one of the more complicated tutorials I’ve done because of how many things can go wrong during installation. And I doubt very much that I covered all the bases here. I am far from a GitHub expert and it’s highly possible I missed something or something has been depreciated since I posted this. If you encounter an error or problem setting up Git or GitHub, the very best place to look for help is StackOverflow. Compared to practically all of the people on there, I am a Git Greenhorn.

If you’re looking to do more things with GitHub, this Documentation: Git Reference has pretty much everything you need.


Git Reference
Burned Pixel, Setting Up Git and GitHub

GitHub Help

Installing SASS on OSX Using Terminal

SASS is one of two CSS preprocessor languages (that I know of, if there are more, let me know) aimed at extending the power and functionality of CSS with the goal of improving development time and reducing repetition in code. As a preprocessor language, SASS requires that we have it installed before we can convert it back into CSS. Without getting into the nitty-gritty of why SASS is awesome, I’m going to walk you through the installation methods for SASS as of the writing of this article. Here’s what I’m going to be installing SASS on:

OSX 10.10.3 Yosemite

That’s about all you need to know for this one. The installation procedure for Windows machines are different and because I no longer run Windows, you may get more mileage following the steps outlined here: Impressive Webs Installing SASS on Windows.

OK, so let’s get started installing SASS on OSX. SASS was built on Ruby, which means you will need Ruby installed before you can even think about installing SASS. Most OSX machines already have Ruby installed, but most Windows machines do not, which is where a large portion of the differences between the two installation processes are. Let’s move onto installing SASS for OSX:

Step One: Locate and open your terminal app. The terminal icon looks like the following…

Step Two: Once you have Terminal open, you’ll want to type the following into the command line:

gem install sass

If everything went off without a hitch, great! Go to Step Three. If you’re like me and got an error, then welcome to the Unlucky Installers Club. We meet once a month and have drinks while complaining about how our lives have to be that much more difficult. Thankfully, this has a fairly simple fix. If your error looks like this:


Then all you really need to do is type this into the command line (don’t close Terminal, don’t restart your machine, just type this below where you got your error):

sudo gem install sass

Chances are pretty good that you have password protected your computer and it needs to ask permission from you every time it needs to install something or open a program that’s never been opened before. When Terminal asks for a Password, enter the same password you use to unlock your computer when you start it up or wake it from sleeping. After you enter your password, hit enter and it will install.

Step Three: You should be seeing this awesomeness which indicates that SASS was fetched and successfully installed:


Depending upon updates to SASS, your version numbers may be different from what you see above, this shouldn’t have any effect on how you install, run or use SASS in the future. Double-checking your installation to make sure it actually worked is always a good idea. Still inside of Terminal, type in the following:

sass -v

This will fetch the version of SASS and should return something like this:

Sass 3.4.14 (Selective Steve)

If you see that, or something similar to it, congratulations, you’ve successfully installed SASS on OSX. Now, before you rush off screaming into the sunset, you might want to check out the SASS Help File to get a better idea of the commands you’ll be using to convert your SASS into CSS. Type this into Terminal:

sass --help

This should give you a comprehensive list of the commands that you can use with SASS to perform various functions. The screen should look like this:


OK, your installation should be all done and good to go. Before we finish up, type this and hit enter in Terminal to disconnect your session:


Now close out Terminal. Wasn’t that easy?

Alternatives to Terminal Installation

So, I understand if just thinking about the Terminal gives you nightmares. So there are some alternatives that allow you to use and convert SASS without having to resort to the Terminal. Here’s a couple of recommendations that I’ve personally used…
Super simple to use and free! Mixture is a recent discovery for me and I tested it out. Great for preprocessing SASS into plain old CSS. And if you ever need it for Boilerplates, Templating or more then it’s a great option.

CodeKit is a paid app, but it has a lot of neat built-in features and makes converting SASS a snap. CodeKit costs $32USD (as of this writing) and is a one-time cost.

Both of the alternatives above will get you up and running with SASS without having to touch the Terminal. And you won’t have to use the Terminal to convert your SASS to CSS either. It is still recommended that if you’re going to be dealing with any amount of code, that you come to be familiar with Terminal because so many things can (or can only) be done through the command line.


SASS-Lang Documentation

Installing Magento on XAMPP

E-Commerce is getting big, and one of the biggest e-commerce systems in use is Magento. It is an open source software package that allows users to set up an online store. While “easy” isn’t the first word I would use for Magento, it’s certainly one of the better options out there if you’re looking for a professional e-commerce solution. Today, we’ll be installing Magento on XAMPP.

As a designer, developing themes for Magento might be something you would like to look into. But, unlike installing WordPress on XAMPP, Magento’s installation procedures can be a bit intimidating, especially for a designer who just wants to get it working so they can start developing themes and other pretty things. Where WordPress is the darling of the 5 minute installation, Magento takes a little coaxing to work. Here’s a step-by-step procedure that will hopefully save you a headache. Please note that I run XAMPP, so this tutorial is written for XAMPP only and is Windows 7 specific.

For this tutorial, I am running the following:
XAMPP 1.8.1
Apache 2.4.3
MySQL 5.5.27
PHP 5.4.7
Magento Community

Step One: Make sure you have the latest version of XAMPP installed. You can get XAMPP at the Apache Friends website, here. At the time of this article, the latest version of XAMPP is 1.8.1. I won’t go into installation and configuration of XAMPP in this tutorial. If you’re new to XAMPP and don’t have it installed yet, please refer to my Installing XAMPP on WordPress tutorial for details.

Step Two: Go to Magento and download the Community version. Magento has various versions of their e-commerce software. The Community version is open-source and supported by community developers, designers and users. Magento’s other major software is Magento Enterprise that is supported by its developers. As you may have guessed, Community is free and Enterprise will cost you a certain sum of money. If you want to know more, they have a great FAQ about it. Let’s get started with the Community version by downloading the “Downloader” version. I’ve installed Magento using the Full Release and the Downloader version and in my experience, the Downloader version puts up less of a fight during installation.

Please note that you may have to sign up for an account on Magento’s site before you can download the software. Once you do get to the download link, you might notice a helpful PDF being offered under “Designer’s Guide”. Click on the link, download the PDF and save it somewhere to look at later. It’s useful!

Step Three: Before we get to Magento itself, we need to prepare XAMPP for installation. First thing’s first, make a MySQL database for your new Magento installation. Go to your localhost phpMyAdmin: http://localhost/phpmyadmin/ Click on Databases and create a magento database. Make sure you name it something you’ll be able to remember:

Make a new database for your new Magento Installation

Click on the “Create” button once you’re done. Now click on your newly created Magento MySQL database:

I named my database "magento_box", yours can be anything at all.

I named my database “magento_box”, yours can be anything at all.

We’re going to make a new user for your Magento database, similar to what we did for the WordPress installation. On an actual live server, you never want to use the root account. Too much sensitive material that could pose a security problem if something were to go wrong. So click on the Privileges button at the top of the screen, then under “New” click on “Add user”.

Step Four: Fill in your database username and password and make sure you use Local in the drop down menu for the Host, or type in “localhost”. Once, you’re done with that, scroll down.

Make sure “Grant All Permissions on “magento_box” (or your database name)” is selected and click on “Check All” under Global Permissions. Then scroll down and ensure Resource Limits are all set to 0 and click on Add User.

Check all for Global permissions.

Check all for Global permissions.

Step Five: Now that was the easy part. Magento’s system requirements states that it will work with 5.2.13 – 5.3.15. Now, that doesn’t say it’ll work with PHP 5.2 and Newer. It literally means any versions outside of that range will throw errors. Often, these errors present themselves during installation. Which is what makes Magento a more difficult beast to tame. We actually need to go into our XAMPP installation and modify some Apache and PHP files so Magento will install without a hitch.

With that having been said, let’s tackle Apache first. Stop your Apache and MySQL services in your XAMPP control panel and exit out of the control panel. Next, if you installed XAMPP in its desired location, you should be able to find a file called httpd.conf in this location: c://xampp/apache/conf/httpd.conf. Make a copy of the httpd.conf file before you open it in a text editor like Notepad or Notepad++. Once opened, look for this line:

#LoadModule rewrite_module modules/

And remove the # at the beginning of the line. So it should look like this:

LoadModule rewrite_module modules/

Yes, just remove the #. That’s all you need to do. Nothing more. Some installations already remove the #, so you might not have to do anything here. Once you remove the # from that line or verify that the # isn’t there, save your httpd.conf file and exit. Now we’ll deal with PHP.

Step Six: Navigate to your php.ini file. Which should be located here: c://xampp/php/php.ini. Again, make a copy of it before you edit it, then open it in a text editor. Now find this line within php.ini:


And remove the semicolon (;). So that the line will look like this:


Again, only remove the ; and nothing more. Some installations will have the semicolon already removed. In which case, you don’t need to do anything except verify that it isn’t there. Save php.ini but don’t close it yet.

Step Seven: During the installation, Magento will require a few minutes to complete one of its tasks. Your XAMPP installation is likely to allow less time than this and as a result, will corrupt the Magento installation. The solution for this problem is to increase the timeout threshold in the php.ini file. You can do this by locating the following string in php.ini:

max_execution_time = 30

And increasing the 30 to 1600. So that it looks like this:

max_execution_time = 1600

After that, save php.ini and close out the file.

Step Eight: Finally, we can start actually installing Magento onto our local machine. First, restart your Apache and MySQL servers. If you didn’t stop them before and have been editing them while they were on, just stop them now and start them up again. Create a new folder in your XAMPP htdocs folder called “magento”. Find the Downloader Mangento file you retrieved earlier, and unpack the downloader.php file. Copy the downloader.php file into your magento folder that you just created.

Downloder.php file goes in here.

Downloder.php file goes in here.

Step Nine: Navigate to your Magento downloader.php file, by going here: http://localhost/magento/downloader.php. If everything is on the right track, this should be greeting you:

A beautiful sight if you've been wrestling with Magento!

A beautiful sight if you’ve been wrestling with Magento!

Click on the “Continue” button, and you should see this:

Click on “Check for InnoDB Support” if you’re interested in InnoDB Support, if not, then no big deal. Then click on “Continue” again.

Click on “Continue” here too. We want to leave everything as is, because it’s already set to exactly what we want. Magento’s installation goes fairly smoothly as long as we make sure we have our bases covered first.

Wonderful. Click on “Continue”. The next screen gets a little more exciting. I promise.

Make sure your installation options are exactly what you want and click on the magical “Start the download process” button. Which will cause this to happen:

Oddly riveting.

Oddly riveting.

Strange as it looks, Magento is just doing its thing. It will download the necessary files, install them, then clean up after itself. So efficient! Go take a little break. You deserve it. Come back in a few minutes and it’ll look like this:



Yay! Click on “Continue Magento installation” then read over the license agreement if that’s your cup of tea, agree to it, then click “Continue to set your Localization”. At the Localization screen, set your time, currency and language settings and then click “Continue” again.

Finally, some action!

Finally, some action!

Configuration is probably the most exciting screen you’ll be looking at for a while. And I say this because once you click on the “Continue” button here, Magento will finish installing itself and you’ll be left hanging for a few minutes. Remember when we changed the timeout in php.ini? That was for this step. Go through the form first though and fill in the appropriate fields. Make sure you change the “Database Name” to your database’s name and input your username and password for your database into the appropriate fields as shown above. Double check everything to make sure it’s accurate. Once you’re ready, click on “Continue”. Now would be a good time to make a sandwich or something because this could take up to seven minutes to complete. I managed to make an elaborate cup of chai tea in the time it took Magento to finish this step. Whatever, you do, don’t try to refresh or close your browser. Just let it do its thing and you should get this glorious screen:

It's like buried treasure.

It’s like buried treasure.

See, if you’ve spent as much time as I have, trying to figure out what Magento’s problem is during installation with no prior knowledge of how it works and you finally make it to the Create Admin Account page, it’s like you discovered buried treasure. With that having been said, you can create your administrative account here. Go nuts, but remember, never use the same username and password for your administrative account as your database account.

Also don’t worry about filling in the Encryption Key. Magento will generate a key for you on the next page (just like it says). It’s highly recommended that you write that key down somewhere so you don’t forget it. Once you’re done filling out the form, click on “Continue”. Write down your encryption key. Do it!

After you get your encryption key locked away in a fireproof safe, you can choose to go to the Frontend or Backend of your new Magento installation.



After all this, you should finally be able to work with Magento. Enjoy.


Installing WordPress on XAMPP

One thing that concerns me with some inexperienced web designers, is their penchant for developing or designing a site directly on a client’s web server–either they use a subdirectory on the server or start making changes to the live site itself. There are a number of reasons why developing directly on a client’s live server is a bad idea and I don’t think anyone needs me to point them out. Enter development environments and XAMPP.

XAMPP stands for Cross Platform Apache MySQL PHP Perl. It is, in essence, a development environment for web designers and developers that runs WordPress, Joomla, Drupal, and other similar applications on your local machine, thus eliminating the need to develop on a live server–and thus giving designers absolutely no excuse to develop directly on a client’s live server. Today, I’m going to lay out a step-by-step tutorial to install WordPress on XAMPP on your local machine. Please note that I use Windows 7 for this tutorial, but XAMPP also has an OSX and Linux version. What you use is entirely your choice, but some of the steps outlined in this tutorial may not apply to you.

Here’s the stuff I’m working with:

XAMPP 1.8.1
Apache 2.4.3
MySQL 5.5.27
PHP 5.4.7
Windows 7 64bit
Wordpress 3.4.2

All of the software is current at the time this article was written.

Installing XAMPP

Step One: Download XAMPP. You can get the latest version of XAMPP from the Apache Friends website, here. Download the Installer version. Once you’re done, run the EXE.

Depending on your computer’s settings, you may encounter the above warning message. Note that XAMPP is essentially telling you not to install it into your c:Program Files (x86) folder. Write that down, or commit to memory, then click OK. Follow the directions, let XAMPP install itself into your c: root folder to make things easier for yourself. Once the installation is finished, launch XAMPP’s control panel. If all went well, you should see something similar to this:

Note the green check marks next to my Apache, MySQL, and FileZilla installations. If this is your first time installing XAMPP, you may have the red X’s like the one next to my Tomcat installation instead. What you want to do is click on the red X’s and install at least Apache and MySQL. Once that is done, click on the “Start” buttons to fire up your Apache and MySQL services. If you’re running XAMPP behind a Windows Firewall, you may get a Firewall warning. Make sure you unblock Apache from the Firewall. If everything goes according to plan, your control panel should have Apache and MySQL highlighted in green, and the output at the bottom should indicate that your Apache and MySQL services are running.

Step Two: Time to test your XAMPP install to make sure it works and that your services are running. Open up your favorite web browser, and plug this into your address bar: http://localhost/ (localhost is your local machine). If it’s working correctly, XAMPP’s logo will show up and ask you what language you would prefer. After you select your language, you should see the following screen:

Congratulations, you just installed XAMPP and now have a working development environment. You can use this environment to run installations of WordPress, Joomla, Drupal, Magento, and many other applications. Whoo! That wasn’t too bad, was it? Now, let’s get to the real reason we were here; Installing and running WordPress off of your local machine.

Installing WordPress on XAMPP

Step One: Obviously, we would need to download WordPress first. At the time of writing this article, the latest WordPress version is 3.4.2, but later versions should be able to be run off of your local machine using XAMPP with no problems. So download WordPress.

Step Two: Next, we’ll need to set up a MySQL database for our WordPress installation before we go any further. The easiest way to do this in XAMPP is through phpMyAdmin. You can access this by going to http://localhost/ and clicking on phpMyAdmin under Tools. Alternately, you can go to http://localhost/phpmyadmin/. To create a new Database, click on the Database button as shown below.

Aside: You may have noticed the is the same on your computer as it is on mine. This is because is (in simple terms) your local machine or localhosts’s IP address. prior to running Apache and MySQL with XAMPP, if you tried to access you would likely get an error. People used to (they still might, who knows) fool gullible users into trying to connect to with the promise of some leprechaun gold, only for the user to find that no matter how many times they tried it, connecting to presented them with an error.

Step Three: Under Create Database, give your new database a name. I often run more than one WordPress installation on localhost so I try to keep my naming conventions for WordPress installs something like “wordpress_box” or “wordpress_cashie” or “wordpress_buddy”, depending on what I’m playing around with at the time. Unless you know what you’re doing (and if you do, I wonder why you’re reading this tutorial) leave Collation as it is. Once you give your database a name, click on Create and enjoy this comforting message:

Step Four: Click on your newly minted WordPress database.

What we need to do now is create a WordPress user to avoid using the root user. On a live server, the root user is the one who has all privileges. This can get hairy if you do anything with the root user because you open yourself (or your client) up to a tangled web of security vulnerabilities. It is, in essence, bad practice. Now, if you’re only using this on your local machine, you don’t need to set up a user account and can install directly using the root user because there are, generally, fewer security concerns when it comes to your localhost. But then, just using the root user just because you can would be lazy. And we started this whole journey with the express intent of eliminating laziness and poor practices. So let’s make this WordPress user account. Click on the Privileges button at the top of the screen.

On the next screen, under “New”, click on “Add user”.

Fill in your login information, write down or note your username and password somewhere, and set the Host to either “Local” using the dropdown. Or type in localhost in the textfield. Then scroll down and make sure “

Finally, scroll down to the bottom of the window, and make sure you have all Resource Limits set to 0, and click on “Add user”. Now you should see something similar to this screen:

Okay, now you are all done with phpMyAdmin. Let’s go actually install WordPress now.

Step Five: Unpack your WordPress installation download that you got before. Copy the unpacked wordpress folder, navigate to XAMPP’s htdocs folder, and paste it inside the htdocs folder. If you installed XAMPP in its desired location, your htdocs folder should be located in c:xampphtdocs

Step Six: Go into the WordPress folder that you just copied into htdocs and locate the wp-config-sample.php file. Rename it to wp-config.php and open it in your favorite editor.

Step Seven: Inside your wp-config.php file, you should find places where you can fill in your information. So where it says ‘database_name_here’, fill in your database’s name. For this tutorial, my database was called ‘wordpress_box’, for ‘username_here’, I would use ‘awesome’. Password would be the password you assigned when you created the user for this WordPress installation. ‘localhost’, and the other fields can remain the same. Filling out the form, you should end up with something that looks similar to this (except with your password filled out):

Save wp-config.php and open up your browser again. Now, navigate to your WordPress installation by going here: http://localhost/wordpress/wp-admin/install.php

If everything works correctly, you should be welcomed by this screen:

Fill in your details and click on “Install WordPress” when you’re all done. It should be noted that the username and password you used for your database is not the same as what you will use for your WordPress installation. On a live server, never use the same username for your database and your WordPress administrative account. And always, make sure you have a strong password for both your database and your admin account.

WordPress should install without a hitch and afterward, you can log in to your new installation using the username and password you just created.

Congratulations, you just set up WordPress on XAMPP and now have a fully functioning installation to test your themes, plugins, and whatever else you might fancy. 🙂