Tag: VS Code

The following tutorial / notes are for setting up a new localhost development environment in Windows.

1. Setup your Localhost Environment

1. Download the Bitnami WordPress installer
2. Follow onscreen instructions and Install!

That’s it~

I put my development environment in the D:/ drive

D:/Bitnami/WordPress

2. Prepare for git with VS Code

Gitbash (git for Windows) wants a default text editor – and while you could choose Nano or VIM or Notepad++, why not go with the (NEW!) option and get yourself a really great code editor while you’re at it~

1. Download the Visual Studio Code installer
2. Follow onscreen instructions and Install!

Learn about customizing Visual Studio Code for WordPress development.

3. Setup git with Gitbash

1. Download the Gitbash installer
2. Follow onscreen instructions and Install!
   1. Note: In the “Adjusting your PATH environment” screen, click “Use Git from the Windows Command Prompt”
      

      

4. Setup WP-CLI in Windows

Take a look at this walkthrough. I followed the steps outlined within it and made a few notes about the process for my particular setup.

1. Download the wp-cli.phar file (right-click and “Save As…”)
2. Create a new folder within your Windows user’s folder to hold all our executable files
   1. Create C:Usersuserbin (where “user” is your Windows username)
   2. This is the ~bin folder where ~ indicates the user’s home directory
3. In Visual Studio Code, create a wp.bat file with the following content:

@ECHO OFF
SET BIN_TARGET=%~dp0/./wp-cli.phar
php "%BIN_TARGET%" %*

This will execute the wp-cli.phar command from your command line (after doing a little more setup work).

1. But, if you’re using Gitbash, Windows won’t recognize .bat files and their commands, so we need to create a separate file called wp (no file extension).
2. In Visual Studio Code, you may get an error if you try to create and save a file with no extension, so just call it wp.sh for now.
3. Later, in Windows Explorer you can remove the .sh.
4. Paste in the following lines:

#!/usr/bin/env sh

dir=$(d=${0%[/\]*}; cd "$d"; pwd)

# See if we are running in Cygwin by checking for cygpath program
if command -v 'cygpath' >/dev/null 2>&1; then
   # Cygwin paths start with /cygdrive/ which will break windows PHP,
   # so we need to translate the dir path to windows format. However
   # we could be using cygwin PHP which does not require this, so we
   # test if the path to PHP starts with /cygdrive/ rather than /usr/bin
   if [[ $(which php) == /cygdrive/* ]]; then
       dir=$(cygpath -m $dir);
   fi
fi

dir=$(echo $dir | sed 's/ / /g')
"${dir}/wp-cli.phar" "$@"

So the previous step (wp.bat) makes wp-cli available from the Windows Command Line, and this step (wp.sh) makes wp-cli available from Gitbash.

5. Add php and wp-cli to the PATH

Now, we have to make sure Windows adds both php and wp-cli to the PATH so we can use them.

1. Open up the Windows Control Panel → System (or right-click “My Computer” on the Desktop and click “Properties”)
2. Click “Advanced system settings” in the left sidebar
3. Click “Environment Variables…” in the popup
4. Click “PATH” from the list and then “Edit…”
5. Now add the full path to your executable files. In my case:
   1. PHP: D:BitnamiWordPressphp
   2. WP-CLI: C:Usersuserbin
6. Now, “Sign Out” of your Windows account and Log back in to be sure Windows loads the new PATH variables
7. You can confirm both php and wp-cli are working by trying out a few different commands in Gitbash or the Command Prompt:
   1. php -i
   2. which php
   3. php -V
   4. wp
   5. wp plugin install hello-dolly (from inside your Bitnami/WordPress/htdocs/wp-content/plugins folder)

Great! Now you can use git and wp from the command line in Windows! Happy coding!~

Downloads

1. Bitnami WordPress installer
2. VS Code
3. Gitbash
4. wp-cli.phar file