Git & WP-CLI on Windows

This short tutorial will help you get ready for WordPress development by setting up a localhost development environment with git and wp-cli on Windows.

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:\Users\user\bin (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:\Bitnami\WordPress\php
    2. WP-CLI: C:\Users\user\bin
  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

WordPress Multisite with Wildcard DNS and/or SSL on Dreamhost

Although Dreamhost supports Wildcard DNS, they don’t support Wildcard SSL (except on DreamCompute), so WordPress Multisite with wildcard subdomains may not be the best choice.

TL;DR

  1. Dreamhost & Wildcard DNS
  2. Setting up WordPress Multisite
  3. I suggest not using Wildcard DNS with Multisite subdomains – and show how to get SSL on Multisite by registering each subdomain first

Years ago, I had Dreamhost set up Wildcard DNS for me, but it frustrated me that I could never get secure HTTPS connections for the subdomains.

Turns out many people have also had issues with this. And although I still don’t have a Wildcard SSL certificate solution that works, I have found a work-around that will suit my present situation. 

Note

This work-around basically nullifies my Wildcard DNS because I have to register each subdomain individually from the Dreamhost Panel.

In any case, this is the setup I currently have and Dreamhost’s position on each:

  1. Wildcard DNS on Dreamhost
  2. WordPress Multisite (read this Before creating a Network)
  3. SSL on those Multisite subdomains
    • Not supported by Dreamhost unless using DreamCompute (requires additional configuration)

#1 Setup Wildcard DNS

Two simple steps:

  1. Upgrade your hosting plan to VPS or a Dedicated server
  2. Contact Dreamhost Support to set up Wildcard DNS for you

#2 Setup WordPress Multisite

First, ask yourself if you REALLY need a Multisite installation, and if so, how many subdomains you expect to need. In fact, it’s actually an easier option to opt for subfolders rather than subdomains for your extra sites as this would make your SSL and Wildcard DNS problems virtually disappear.

With subfolders

  • SSL would load from the root domain
  • You wouldn’t need to create additional subdomains at all

Second, ask yourself if you REALLY need Wildcard DNS. As noted above and below, Dreamhost doesn’t support Wildcard SSL certificates.

If you really need Wildcard DNS and Wildcard SSL 

  1. Consider moving to DreamCompute – which does support this (with additional configuration on your part)
  2. Plan to get your hands dirty doing this all on your own
  3. Consider moving to a hosting provider that supports this configuration
  4. Reconsider Wildcard SSL altogether and just accept that you’ll be registering subdomains through the Panel and getting Let’s Encrypt certificates for each one (as outlined below)

Articles to Read for Setting up Multisite

#3 Get SSL on your subdomains

Non-Wildcard SSL

The simplest way to get SSL on a subdomain is not to use wildcard subdomains in the first place. 

One of the most compelling reasons to use Multisite with Wildcard DNS is if you want to allow the creation of multiple subdomains without registering them through your Panel first. This would enable you to, for example, allow users on your website to create their own subdomain blogs within your larger site when they register or subscribe to your site’s membership plan. (This is the reason I’d originally wanted Wildcard DNS.)

But, the problem with hosting such a site on Dreamhost is that they don’t support Wildcard SSL certificates, so every site created through WordPress Multisite will say it’s “insecure” even if you load it over HTTPS (and Google Chrome will also put up a blocker alerting you of the fact).

Main idea

Don’t employ Multisite to (initially) create subdomains.

I tried the following methods to get SSL on my subdomains and each failed:

  1. Create a new subdomain (v2012.site.com) via Multisite
    • The subdomain does not use the main site’s SSL
  2. Register that same Multisite-created subdomain through the Dreamhost panel and “mirror” the site to the root site. Then get an SSL certificate for the “mirrored” domain (v2012.site.com)
    • “Mirroring” basically says “set up the exact same site at both locations and use the same SSL” – so again, only the main site’s SSL will work
  3. Change the “mirrored” site to “redirect”
    • This bypasses the subdomain altogether and maps all traffic from the subdomain directly to the main site (site.com)

Finally, after much trial-and-error, I stumbled upon Ian Dunn’s article that provides the solution.

Solution

Setup your subdomains as “Fully hosted”, but set the web root (Web Directory) to the same directory as the root domain. (And re-save SSL settings if applicable.)

Be sure to also now get yourself a FREE Let’s Encrypt SSL certificate before you save these Settings (click HTTPS under the Web Options section).

(Re)create the Site through WP Multisite

The problem with doing things this way is that now you’re no longer really taking advantage of your Wildcard DNS. And actually, just creating a subdomain through the Dreamhost Panel won’t set up WordPress Multisite to run on the subdomain.

So, the next step is to go back into your Multisite installation at the root of your domain and create (or delete and recreate) your subdomain Site.

Re-saving SSL settings

Now, if the (new) site still isn’t loading HTTPS securely, there are two possibilities for this:

  1. You didn’t wait long enough for the Let’s Encrypt certificate to take effect (in that case, refresh the page in 5-10 minutes and check again)
  2. You may need to re-save your SSL settings (as Ian Dunn outlines)

To re-save your SSL settings, click the https On link in the center of your Domain Registration listing table under the Manage Domains menu item.

On the next screen, check the box marked Copy non-secure settings and Save it.

Force HTTPS

There’s one more thing to be sure of – that HTTPS is always loaded regardless or whether or not an HTTP or HTTPS URL is accessed. You can do this with the following code inserted into the top of your .htaccess file in the root of your Multisite installation directory:

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
</IfModule>

Create a WordPress Staging Site on Dreamhost Shared Hosting

These are some of my notes from setting up a WordPress staging site through Dreamhost using the Duplicator plugin.

I recently tried to access a website I’d created for a South Korean start-up over 2 years ago only to find that the entire contents of the web directory had been deleted. Within a day or two of this realization, the CEO contacted me and asked me to “fix” it.

Luckily for me, Dreamhost had updated the site in the last year and had created a complete archive of the site at /sitename.com.old. But, I didn’t want to run into this situation again in the future without a backup, so I decided to create a staging site for it. This was to accomplish 3 things:

  1. To maintain a FULL copy of the functioning website (as it is now)
  2. To teach me how to create a staging site so I can repeat the process with my personal sites
  3. To allow me to make changes to my websites that are not “live” – to test and debug them before implementing the changes on my “live” sites

Thankfully, Dreamhost and the Duplicator plugin make this process pretty painless. Here are the steps I took:

#1 Dreamhost

1. Create a .dreamhosters.com subdomain

Dreamhost provides FREE subdomains on the .dreamhosters.com domain to its customers. This is a recommended location to create a staging site. The following article outlines this process:

Creating a Staging WordPress site – Dreamhost Help

When you create the .dreamhosters.com subdomain, be sure to assign the same user to it as you are using for the original site. This will make the next step much easier.


Assign the same user to the subdomain as you are using for the original site.

2. Copy ALL files to the new subdomain

Personally, I’ve found it much much faster and easier to ssh into my site and copy all the files using the command line (rather than via FTP). For this to work, you’ll need to keep a few things in mind:

  1. Your FTP user needs Shell access (Enabling Dreamhost Shell Access).
  2. The same user needs access to BOTH the original site and the new subdomain so that when you ssh in, you can run the Linux copy command from the root folder.
  3. Now, in a Terminal window, ssh into the site, and run the following command to copy all site contents to the new subdomain.
[server]$ cp -a originalsite.com/. staging.dreamhosters.com

We’re copying the files over NOW because Dreamhost Shared hosting won’t allow us to create and download large archives with the Duplicator plugin. So it’s better to do the Two-Part Install instead of relying on Duplicator for the entire process.

#2 Duplicator

1. Install & run Duplicator on the original site

Dreamhost has a helpful article that lays out this process.

Migrating WordPress to DreamHost using the Duplicator plugin

But, rather than downloading the FULL SITE archive, we need to run the Two-Part Install – downloading only the database archive and installer file.

2. Create a new Database on Dreamhost

Complete step #8 from the previous article to create a new MySQL database on Dreamhost:

Creating a MySQL database – Dreamhost Help

3. Upload & run installer.php on the staging site

Continue the Migration tutorial from step #9. Upload BOTH the archive.zip and the installer.php files from Duplicator to your staging site via FTP. Then, navigate to the installer on your staging site:

http://stagingsite.dreamhosters.com/installer.php

When it asks for your database details, be sure to “Test Database” to make sure you can connect. Then run through the rest of the steps in the installer.

Also remember to “Remove installer files” after logging into your new /wp-admin area (there will be a link).

Review & Resources

Overall, the process of setting up a WordPress Staging Site with Dreamhost and Duplicator was much easier than I’d originally anticipated. Here is a condensed list of the steps and resources covered in the tutorial above.

Tools

  1. Dreamhost hosting
  2. Duplicator plugin

Steps

  1. Create a .dreamhosters.com subdomain (with the same user)
  2. Copy over ALL original site files (via ssh and the command line)
  3. Install Duplicator and run it to archive “Database Only”
  4. Upload the archive.zip and installer.php to your subdomain
  5. Create a new MySQL database in Dreamhost (same user)
  6. Navigate to subdomain.dreamhosters.com/installer.php
  7. Run through the remainder of the steps in the tutorial

Tutorials

  1. Dreamhost’s Migration tutorial
  2. Duplicator’s Two-step Install tutorial
  3. See also: Staging a DreamPress overview for tips on best practices:
    1. Password protecting your staging site
    2. Add an SSL certificate (with Let’s Encrypt)
    3. Transferring changes to your live site

Bonus: Get $50 off Dreamhost’s Unlimited shared hosting plan by clicking this link, or any of the other Dreamhost links above!

Disclaimer: (I will make a small commission if you decide to sign up for a Dreamhost plan using one of these links)

6 Choices for a localhost Web Development Environment

For web development, the bare minimum you need access to is AMP:

  1. Apache server
  2. MySQL database
  3. PHP programming language

You can install these as a collection on your computer locally using various OS-specific installations:

  1. Windows: WAMP
  2. Mac: MAMP
  3. Linux: LAMP
  4. Cross-platform: XAMPP

Or, if you prefer an auto-installerBitnami is an excellent option. (And Softaculous also looks promising.)

Wikipedia also lists plenty of other Apache, MySQL, and PHP bundles if you’re interested in checking out any of the other ones, but in this post, I’ve taken screenshots of each major offering for you to compare:

#1. WAMP

WAMP homepage and server window
WAMP Server Homepage

#2. MAMP

MAMP homepage and server window
MAMP Server Homepage

#3. LAMP

LAMP Wikipedia and install
LAMP Software Bundle on Wikipedia

As the above picture indicates, if you want a straight up LAMP installation, you’ll likely be doing it all piece-by-piece – or through your Linux distribution’s get or yum installers. But if you’re a Linux user, you’re probably already comfortable with that kind of thing. Here are instructions for installing LAMP on various Linux distributions (source: Wikipedia):

#4. XAMPP

XAMPP homepage and server window
XAMPP Server Homepage

#5. AMPPS

AMPPS homepage and server window
AMPPS Homepage

#6. Bitnami

Bitnami homepage and server window
Bitnami Homepage

I’ve personally used WAMP, MAMP, and XAMPP and none has really been disappointing.

  • XAMPP is slightly more complicated and has more features (but that’s to be expected because it’s a Linux program as well).
  • WAMP is a good and simple option for Windows – I’ve used it with my high school students.
  • MAMP is a clean and simple option for Mac and I’ve used it exclusively on Mac before.
  • MAMP PRO is also a good option if you’re willing to pay a little bit because it allows multiple WordPress installations on the same localhost.

However, recently, I’ve been using Bitnami quite a bit on the recommendation of Morten Rand-Hendriksen, from Lynda.com, and I’ve quite enjoyed it. It’s very easy to download and install and the Server Manager program is very clean and well designed. It’s a simple one-click START or STOP for your servers and a one-click ACCESS SITE to go to your localhost install right from the Manager.

Which installation do you prefer? Leave me a comment with your thoughts.

This post has been modified slightly from my original post on aaronsnowberger.com

Quick Tip: Use Chrome’s Emulator Tool for Better Development

Google Chrome has a pretty nifty emulator tool that enables better website development by emulating the different devices that you would want to test your websites on.

A few keys points about the emulator that makes it unique and much better for development than merely stretching your browser window to various sizes:

  1. Chrome’s minimum browser width (400px) is still wider than the smallest device size (320px iPhone 3/4)
  2. Using the emulator tool also changes the user agent variable in Chrome so that it thinks and acts as if it were the actual device it is emulating
  3. The emulator shows a grid and rulers with pixel dimensions behind the device window

How to use the Chrome Emulator?

  1. Open the Element Inspector (right-click “Inspect Element”)
  2. Click on the mobile device icon in the upper-left corner of the Element Inspector (see screenshot)
  3. Select the device you wish to emulate from the dropdown menu at the top (see screenshot)
  4. Tip: Refresh the page for proper user agent spoofing and viewport rendering

google-chrome-inspector-element-device-mode
1. Open the Element Inspector and click the mobile device icon

google-chrome-inspector-element-device-mode-activated
2. Select the device you wish to emulate from the dropdown menu