WordPress Theme Development with Laragon [Windows 10]

This guide will teach you step by step how to setup Laragon for WordPress theme development. This is an excellent (free) tool which will allow us to setup the same type of environment you might come to expect from Linux but in Windows 10.

While I prefer to do all my theme development in Linux, this is a viable solution for those that are not interested in dual-booting.

These are the steps we will take to accomplish our goal:

Install and Configure Laragon
Setup Nginx (faster than Apache)
Install WordPress Locally
Upgrade Node.js
Setup a Framework: Tailwind CSS (Optional)
Enqueue Your Stylesheet in WordPress

Install and Configure Laragon

We'll download the lite version of Laragon and add what we need as we go along.

Launch laragon-wamp.exe to install Laragon.

Based on preference, I like to uncheck Run Laragon when Windows starts and I keep Auto Virtual Hosts checked. What this does is allow us to use what is known as pretty urls so instead of http://localhost, we would get: http://app.test

The last option: Add Notepad++ & Terminal to the Right-Click Menu is optional but I leave it unchecked since my editor of choice is Visual Studio Code (also free).

Laragon will launch automatically once you close the installation window, otherwise launch the program yourself.

The Laragon interface is rather simple but might prove confusing at first.

Setup Nginx (Engine X)

I find that Nginx is faster based on my personal experience when it comes to self-hosting but you are certainly welcome to stick with Apache.

Click the gear icon to launch the Preferences window.

Tab to Services & Ports

Uncheck Apache but leave MySQL checked.

Under Advanced, check Nginx and keep SSL Enabled disabled. We don't need to set up any cache options when developing our theme since we need to see the changes right away. Close the window when you are done. If you receive an error, ignore it.

Click Start all and you will see Nginx started.

Install WordPress (Locally)

Just to clarify: A local WordPress instance can only be accessed by you on that particular computer and therefore there's no need for 'Discourage search engines from indexing this site' with the fear that Google's crawler bot will index your unfinished website.

Installing WordPress on Laragon is a breeze. Click on Menu which is grayed-out and choose Quick app > WordPress. Alternatively, the menu can be accessed by right-clicking on the Laragon window.

The name of your project will become your URL. For example, if I name my project wp-theme, the URL then becomes https://wp-theme.test.

Accept any security prompts from Windows.

Laragon will show the pretty URL generated, alternatively, you can click Visit Site

It's time to install WordPress. Select your language > Continue > Fill in the information requested and there's no need to check Discourage search engines from indexing this site > Install WordPress

Installation should be a success. Log in to start setting up your site. Make modifications as needed and continue onto the next part (if interested in installing a framework such as Tailwind CSS, Bulma, Bootstrap, etc. as the process should be similar)

Refer to official documentation for the installation steps if you will be installing something other than Tailwind CSS. Regardless, most Frameworks require Node.js or Yarn. We will be using Node.js as our package manager.

Upgrade Node.js

You can choose your preferred version of Node.js from this extensive list but I will be installing the version that is most compatible with Tailwind CSS which is node-v12.13.1.

Extract your downloaded file. There should be a folder named node-v12.13.1-win-x64 with a bunch of files inside of it. Rename this folder to: node-v12.13.1

Move this folder to: C:\laragon\bin\nodejs or wherever you installed Laragon.

Return to Laragon > Menu > Node.js > Version [node v10] > Select node-v12.13.1. A Laragon notification will pop up reflecting the version change.

Setup a Framework: Tailwind CSS

Why Tailwind CSS?

Tailwind CSS is a highly customizable utility-first approach. Whereas other frameworks have components already built for you, Tailwind CSS gives you the necessary tools to build your own component the way you want without inputting a single line of CSS (unless you want to).

That's not to say you won't struggle if you don't even know the basics of CSS. For example to change the color of a paragraph in Tailwind CSS, you would style your html structure.

Tailwind CSS + HTML (Text is colored light pink)

<p class="text-red-200"> This is a paragraph </p>

Tailwind CSS offers an extensive list of colors but you can also add your own variations.

When it comes to CMS such as WordPress or even Ghost, Tailwind CSS makes theme development a breeze.

Installation

Back in Laragon, select Terminal to launch it and you will find your working directory to be c:\laragon\www which is where all your projects live. We need to navigate to our WordPress theme directory. In my case: C:\laragon\www\wp-theme\wp-content\themes\my-theme

Type: cd C:\laragon\www\wp-theme\wp-content\themes\my-theme

You will need to install Tailwind CSS at the root of your theme folder.

Once you are in the correct directory, let's begin. Type:

npm init

This will allow you to create and customize your package.json. It should look something like this:

{
  "name": "Your Theme",
  "version": "1.0.0",
  "description": "Theme description goes here.",
  "main": "index.php",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "wp-theme"
  ],
  "author": "Author Name",
  "license": "License type."
}

Next, we need to install Tailwind CSS and a few other dependencies. In the terminal, type:

npm install tailwindcss autoprefixer postcss postcss-cli

Generate a Tailwind CSS configuration file by typing:

npx tailwind init

This will output the tailwind.config.js file in the root of your theme folder. Next, we need to generate a config file for PostCSS. Type:

echo. > postcss.config.js

You can open postcss.config.js with Notepad or your editor of choice. Copy and paste the following:

module.exports= {
    plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
    ]
}

Save and exit. Now, we need to create our project directory. This all comes down to personal preference but if you want to follow along, type:

 mkdir "assets/css/built" && cd assets/css/ && echo. > tailwind.css

Our folder structure now looks like this:

/assets
> /css
> /css/built

Inside our CSS folder, we will see our newly created tailwind.css file. Open it and copy and paste the following.

@tailwind base;
@tailwind components;
@tailwind utilities;

Save and exit.

For the final steps, we create a simple script and run it to build our .css file. Open the package.json file once more. We need to modify the following snippet from this:

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },

to this:

"scripts": {
    "build": "postcss assets/css/tailwind.css -o assets/css/built/screen.css"
  },

Let's study the code for a moment. Our tailwind css file (for development) lives in assets/css/tailwind.css and our production file will be outputted in assets/css/built/screen.css (even if it doesn't exit)

We now run the build script with this simple command:

npm run build

With any luck, you shouldn't have received any fatal errors. If you did, make sure postcss and the postcss-cli are both installed.

Your production file screen.css has been outputted in assets/css/built.

For the final steps, we will enqueue our stylesheet and test that the framework is working as expected.

Enqueue Your Stylesheet in WordPress

Inside the root of your theme folder, you should have a functions.php file. If not, you will need to create it. We need to create a new function. You can copy and paste the snippet below. Replace prefix with the name of your theme. For the record, I am using a child theme with Genesis and this is what works for me:

// wp styles 
add_action( 'wp_enqueue_scripts', 'prefix_main_styles' );
function prefix_main_styles() {
wp_enqueue_style( 'prefix-custom-style', get_stylesheet_directory_uri() . '/assets/css/built/screen.css' );
}

To see your changes, you will need to reload/refresh your WordPress site. If everything is working, you should be able to tell at a glance since all the fonts will be the same size and padding and margins will be reset.

If you still aren't certain, add a simple Tailwind CSS class to your HTML. for example, in the header.php template

<p class="text-red-500"> This text should be red.</p>

Depending on the changes you make, you might need to rebuild your .css file. For example: adding components, Google fonts, custom colors, etc.