Setting up a proper development environment is crucial when creating WordPress plugins and block themes. In this article, I’ll share how I organized my development workflow to make the process more efficient and maintainable. I’ll walk you through setting up a dedicated development folder, creating symlinks for real-time testing, and implementing automated build processes using webpack. This setup has significantly improved my development experience, allowing me to focus more on coding and less on manual file management.

1. Organize Your Development Folder

• Create a folder (e.g., dev-folders) containing:
  • Your plugin and block theme directories.
  • A shared node_modules folder for dependencies.
  • A package.json file for managing dependencies and scripts.
  • A webpack.config.js file for automating builds.

2. Set Up a Local WordPress Installation

• Use Studio by WordPress.com to set up a local WordPress environment.
• Navigate to your WordPress installation directory.

3. Create Symlinks for Real-Time Updates

• Symlink your plugin and block theme directories from the dev-folders to your WordPress installation:

Wait! What are Symlinks?!
Symlinks (symbolic links) are like advanced shortcuts that create a connection between folders on your computer. Unlike regular shortcuts, symlinks make the connected folders act as if they’re the same folder. When you update a file in your development folder, the symlinked folder in your WordPress installation instantly reflects those changes. This means:

• You can keep your development files organized in one place
• Changes are immediately available for testing in WordPress
• You don’t need to manually copy files back and forth
• Your WordPress installation stays clean and organized

On Mac and Linux, we create symlinks using the ln -s command:

ln -s ~/path-to/dev-folders/stylewriter ~/path-to-wordpress/wp-content/themes/stylewriter
ln -s ~/path-to/dev-folders/stylewriter-type ~/path-to-wordpress/wp-content/plugins/stylewriter-type

I use Mac, and so note that for Windows users, the command is different.

Your webpack.config.js file can also be used to push changes directly to a folder of your choosing. In my case, it is my site in Studio.

4. Add Source Files

• In each project (stylewriter and stylewriter-type), create a src folder containing:
  • styles.scss for custom styles.
  • index.js for custom JavaScript.

5. Configure package.json

Add this package.json file to the root of your dev-folders directory:

{
  "name": "wordpress-dev-project",
  "version": "1.0.0",
  "description": "Development setup for WordPress plugin and theme",
  "main": "index.js",
  "scripts": {
    "build": "webpack --mode production",
    "start": "webpack --watch --mode development"
  },
  "author": "Your Name",
  "license": "MIT",
  "devDependencies": {
    "@babel/core": "^7.22.20",
    "@babel/preset-env": "^7.22.20",
    "@babel/preset-react": "^7.22.20",
    "babel-loader": "^9.1.4",
    "css-loader": "^6.8.1",
    "mini-css-extract-plugin": "^2.7.6",
    "sass": "^1.67.0",
    "sass-loader": "^13.3.0",
    "webpack": "^5.88.2",
    "webpack-cli": "^5.1.4"
  }
}

Run the following to install dependencies:

npm install

6. Configure webpack.config.js

Add this file to the root of your dev-folders directory:

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    entry: {
        theme: './stylewriter/src/index.js',
        plugin: './stylewriter-type/src/index.js'
    },
    output: {
        path: path.resolve(__dirname, './'),
        filename: '[name]/dist/bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env', '@babel/preset-react']
                    }
                }
            },
            {
                test: /\.scss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'sass-loader'
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name]/dist/styles.css'
        })
    ],
    mode: 'development',
    watch: true
};

7. Automate Builds

• Start watching for file changes:

npm run start

Webpack compiles your SCSS and JS files into dist/styles.css and dist/bundle.js for both the plugin and theme.

8. Test in WordPress

• Activate your theme and plugin in the WordPress admin.

• Verify changes are reflected immediately due to symlinks.

To complement my new workflow, I decided to incorporate Cursor into my development process. Cursor is a powerful code editor built on VS Code that leverages large language models (LLMs) like Claude and GPT-4 to assist with coding tasks. While it offers a free tier, I opted for a Pro subscription and configured it with both Anthropic and OpenAI API keys for maximum flexibility.

Cursor seamlessly integrates with my development environment, offering features like in-line code suggestions, code explanations, and an interactive chat interface that understands my entire codebase context. What makes it particularly powerful is its ability to work across multiple files, generate unit tests, and integrate with Git workflows**. I plan to use Cursor as a learning companion throughout my WordPress block development journey, leveraging it to understand unfamiliar syntax, explain complex concepts, and provide actionable suggestions for my code.

As I go along, I’ll not only apply Cursor’s solutions but also take the time to reflect on why they work, helping me build confidence and deepen my understanding of the coding language and techniques.

Note:
**Git workflows – By the time I hit publish on this, I would have gone one step further since writing this draft post, to incorporate Git into my workflow. I wanted to work at progressing past saving a folder for each new version of the plugin and theme. Setting up the folder as a watch folder using webpack.config.js was the first step, and now, with Git integrated, and the webpack file pushing directly to my Studio test site, I’m in good flow! WORK flow!

For advanced users:
As development needs grow, you might want to enhance this basic setup with:

• Source maps for better debugging
• Separate development and production builds
• Additional optimization plugins
• More sophisticated asset loading strategies

But for getting started, the setup described above will serve you well! I’m learning as I go and the few above are things that I’m experimenting with, and would grasp better but not yet, and so I’m just listing them for now.