Not sure how to view your WordPress site locally? Read on! I’ll explain how to set up an incredibly fast local WordPress development environment. The goal to keep in mind here is being able to view our WordPress site locally in our browser.
First of all, check out the summary at the bottom if you’ve done this before and just want a quick refresher!
Also, here is a video if you prefer it or if you need any clarification.
Step 1 – Install VirtualBox and Vagrant
Download and install Virtual Box
Download and install Vagrant
What is Virtual Box? Virtual Box is a program that runs operating systems. The operating system (Windows, Ubuntu, or Macintosh) runs inside of virtual box and appears in a window like the one you’re using to view this tutorial.
Vagrant gets you closer to the solution of viewing WordPress sites locally on your computer. You can think of Vagrant as a manager of Virtual Boxes. With Vagrant, you can quickly boot up a virtual OS in a couple of seconds.
Now that you’ve installed Vagrant, the
vagrant command will become available in your terminal.
You are closer to the goal of viewing your WordPress site locally.
Step 2 – Install VVV and Variable VVV
Yes, that’s a lot of Vs.
VVV is a helpful Vagrant Box. It has a lot of the tools that you’ll need to set up your local WordPress site already installed.
Local WordPress Development with Varying Vagrant Vagrants
Now comes the fun part. I recommend that you read the guide on Github to give you a better understanding of VVV, but it’s not necessary to read it. You can also read Brad Parbs tutorial for more information if you run into any errors.
Open up your terminal, type
vagrant plugin install vagrant-hostsupdater, and hit enter. This will install a Vagrant plugin that takes care of configuring the hosts file. Thankfully, you do not need to understand what a hosts file is, but, basically, it tells your browser where to find your WordPress site.
You also have the option to install a plugin called vagrant-triggers, but don’t. Brad Parb mentioned that installing it caused him some issues. I didn’t install it and haven’t experienced any problems.
To download VVV, go to your terminal and run
git clone git://github.com/Varying-Vagrant-Vagrants/VVV.git vagrant-local. This will download VVV from Github and put it in a folder called vagrant-local inside of your terminal’s current working directory. If you want to install VVV in your home folder like I did, type
cd ~/ in your terminal before running the previous command. Running this command will make your home folder the terminal’s current working directory.
Next, in your terminal run
cd vagrant-local to enter the vagrant-local folder that was just created. This will take you into the folder with VVV. Finally, type
vagrant up to start installing VVV.
Once that finishes installing (hopefully without too many errors), you will be able to visit a number of pre-installed WordPress websites in your browser. http://local.wordpress.dev/ is one of them that you can try visiting. Refer to the VVV’s Github page for more examples.
You have almost set up an incredible local WordPress development environment.
You now have the capability to view those default WordPress sites in your browser, but how do you create a new local WordPress website? That’s where vv comes in.
The following video also might be of some help if you get stuck, but it’s not necessary to watch if everything is going swimmingly.
Brad Parb recommends installing Homebrew to install Variable VVV. Since that’s what I did, I’ll also recommend it. Run
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" in your terminal to install Homebrew. As a side note to clear up any confusion, run the previous command BEFORE running vagrant ssh. I’ll explain what “vagrant ssh” does in a moment.
Now, to install Variable VVV, run
brew install bradp/vv/vv in your terminal.
Next, in your terminal, enter the directory (the folder) where VVV keeps its WordPress websites, by typing
cd ~/vagrant-local/www. Now, simply type
vv create in your terminal.
The first time you run
vv create it will ask you where your installation of VVV is. Type a capital
Y if it successfully found it.
After you enter a name for your site, you’ll be asked a few more questions: whether you want it to be a multisite, whether you have local SQL file, or whether you have a Git repo. You can safely say no or just hit enter if you can’t provide something that it’s asking for.
After it finishes creating the WordPress site, you can visit your-site-name.dev in your browser. The entire WordPress site will be inside ~/vagrant-local/www/your-site-name/htdocs
You can, now, quickly and easily create local WordPress sites and view them in your browser!
- Download and install Virtual Box
- Download and install Vagrant
- Open up your terminal and run
vagrant plugin install vagrant-hottsupdater.
- In your terminal, run
git clone git://github.com/Varying-Vagrant-Vagrants/VVV.git ~/vagrant-localto download VVV to your home folder.
- If you don’t have git install, the terminal will prompt you to install it. Click Install to install git.
cd vagrant-localto enter the folder with VVV
vagrant upto install VVV using Vagrant
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)to install home-brew (to install home-brew on your Mac) OR
- Do not complete this step. I tried installing VV in Vagrant, but it needs to be installed on the Mac. However, if you want to install home brew in Vagrant, this is how to do it. Install home-brew in vagrant by running the following commands
- cd ~/vagrant-local/provision
- vi provision.sh
- add build-essential and python-setuptools to the list of items to be installed
- vagrant provision
- vagrant ssh
- vi .bashrc
- add the following to the bottom of the file
export PATH="$HOME/.linuxbrew/bin:$PATH" export MANPATH="$HOME/.linuxbrew/share/man:$MANPATH" export INFOPATH="$HOME/.linuxbrew/share/info:$INFOPATH"
- type :wq! and hit enter to save and quit
- vagrant provision
brew install bradp/vv/vvto install Variable VVV. VV **must** be installed on your Mac and not in Vagrant.
cd ~/vagrant-localto enter the folder where VVV was downloaded.
vv createto create a local WordPress installation.