DEV Community: Ruman Ahmed

Scaffold WordPress Plugins Instantly Using wp-plugin-init (Node.js CLI)

Ruman Ahmed — Sun, 04 May 2025 07:20:14 +0000

Build WordPress Plugins Faster with `wp-plugin-init` Boilerplate

Creating a WordPress plugin from scratch can be time-consuming, especially when using modern tooling like Composer, Vite, Vue.js, and a robust OOP-based MVC structure. That’s where wp-plugin-init comes in — a complete plugin scaffolding tool published on npm, built to speed up your development and follow best practices.

What is `wp-plugin-init`?

wp-plugin-init is a Node.js CLI tool that generates a fully structured WordPress plugin boilerplate in seconds. It’s tailored for modern plugin development using:

PHP OOP and PSR-4 Autoloading via Composer
MVC architecture
Vue.js (for interactive admin UI)
Vite (as a modern asset bundler and hot module reloader)
Ready-to-extend admin dashboard
Automated namespace and file structure generation

Features

✅ WordPress-ready file structure
✅ MVC directory separation (Controllers, Models, Views)
✅ PSR-4 compliant autoloading
✅ Vite-powered development for assets
✅ Vue.js ready for dynamic admin UI
✅ CLI automation for renaming namespaces, constants, menus, and plugin slugs
✅ Composer autoload update after setup

Installation

To use wp-plugin-init, install it globally:

npm install -g wp-plugin-init

Usage

Simply run the command with your desired plugin name:

wp-plugin-init suite-one

This will:

Create a new directory named suite-one
Rename all placeholders (PluginsNameSpaces, constants, dashboard menu names)
Set correct namespaces (SuiteOne\\)
Replace plugin headers in the main file (suite-one.php)
Run composer dump-autoload

You’ll end up with a plugin that looks like:

suite-one/
├── app/
│   ├── Controllers/
│   ├── Models/
│   ├── Views/
│   ├── App.php
│   └── AdminMenuHandler.php
├── composer.json
├── package.json
├── vite.config.js
├── public/
├── resources/
│   └── js/
│       └── main.js
├── suite-one.php
└── README.md

What's Inside?

PHP OOP Structure

Your plugin logic is split into:

Controllers/ – Manage logic and plugin actions
Models/ – Handle data
Views/ – Separate template rendering

Composer Autoloading

Namespaces are set dynamically based on your plugin name. After creation:

namespace SuiteOne\Controllers;

Composer’s autoload config is automatically updated.

Vue.js + Vite Integration

Your plugin is asset-ready out of the box. Inside resources/js/main.js, start building your Vue components. Vite handles bundling and live reload.

npm install
npm run dev

During production:

npm run build

Smart Defaults & Automation

wp-plugin-init auto-generates:

Plugin headers
Namespace structure
Dashboard menu entries
Constant definitions
Vue/Vite asset paths

No manual edits required — just start coding!

Development Tips

Use App.php for bootstrapping logic
Place reusable components in app/
Run composer dump-autoload after adding new PHP classes
Customize the admin dashboard from AdminMenuHandler.php
Use Vue.js for dynamic forms or settings pages

Example

wp-plugin-init my-cool-plugin

Creates:

// Plugin header
/*
 * Plugin Name:         My Cool Plugin
 */

// Namespace usage
use MyCoolPlugin\Controllers\DashboardController;

Requirements

Node.js (v14+)
Composer
PHP 7.4+
WordPress >= 5.8

License

MIT – free to use and extend!

Contribute

Found a bug or want to improve the boilerplate?

GitHub: github.com/Suite-Press/wp-plugin-init
Pull requests welcome!

Final Thoughts

If you're tired of rebuilding boilerplates or piecing together modern workflows manually, wp-plugin-init is your perfect starting point. It saves time, enforces structure, and empowers you to focus on building features, not boilerplate.

Start your next plugin with power, performance, and productivity — in one command.

5 Utilities to Format File Sizes in JavaScript

Ruman Ahmed — Fri, 02 May 2025 19:37:48 +0000

5 Utilities to Format File Sizes in JavaScript

When working with file uploads, downloads, or managing files in your app, displaying file sizes in a human-readable format is essential. Instead of showing raw bytes, it’s much more user-friendly to display something like "5 KB" or "2 MB" rather than just "5120 bytes". This makes your app more polished and easier to use.

Here are 5 utilities to help you format file sizes in JavaScript. These libraries and functions will make it easy to show file sizes in a friendly way.

1. file-size-pretty

file-size-pretty is a simple, lightweight package to format file sizes into human-readable strings. It supports all common units (KB, MB, GB, etc.) and is very easy to use.

Installation:

npm install file-size-pretty

Usage:

const formatSize = require('file-size-pretty');
console.log(formatSize(1048576)); // "1 MB"

This package is perfect for when you need something fast and easy without any frills.

2. filesize

filesize is another excellent package for formatting file sizes. It provides options to show the size in various formats and allows you to customize the output.

Installation:

npm install filesize

Usage:

const filesize = require('filesize');
console.log(filesize(1048576)); // "1 MB"

With filesize, you can easily format file sizes, and you also get a nice, customizable API for more control.

3. humanize-plus

humanize-plus is a utility for turning numbers into more human-readable formats. It includes the humanize.filesize() method that converts bytes into a readable format.

Installation:

npm install humanize-plus

Usage:

const humanize = require('humanize-plus');
console.log(humanize.filesize(1048576)); // "1 MB"

This one is a great choice if you need a general-purpose humanizing utility, with a simple API for file sizes.

4. pretty-bytes

pretty-bytes is a minimal library that converts bytes into a readable string. It’s very lightweight and focuses on doing one thing — formatting file sizes in a simple way.

Installation:

npm install pretty-bytes

Usage:

const prettyBytes = require('pretty-bytes');
console.log(prettyBytes(1048576)); // "1 MB"

If you’re looking for something ultra-lightweight, pretty-bytes is an excellent choice.

5. filesize.js

filesize.js is a lightweight library for formatting file sizes. It’s known for being simple and fast, with great support for large numbers.

Installation:

npm install filesize.js

Usage:

const filesize = require('filesize');
console.log(filesize(1048576)); // "1 MB"

With support for binary prefixes and large files, this is a great utility for serious projects that need precise formatting.

Conclusion

There are plenty of options when it comes to formatting file sizes in JavaScript. Whether you need something lightweight and simple like file-size-pretty or something more feature-rich like filesize, there’s a tool for every use case.

Which one do you prefer? Feel free to drop a comment below and let me know if I missed any of your favorite utilities!

Happy coding!

DEV Community: Ruman Ahmed

Scaffold WordPress Plugins Instantly Using wp-plugin-init (Node.js CLI)

Build WordPress Plugins Faster with wp-plugin-init Boilerplate

What is wp-plugin-init?

Features

Installation

Usage

What's Inside?

PHP OOP Structure

Composer Autoloading

Vue.js + Vite Integration

Smart Defaults & Automation

Development Tips

Example

Requirements

License

Contribute

Final Thoughts

5 Utilities to Format File Sizes in JavaScript

5 Utilities to Format File Sizes in JavaScript

1. file-size-pretty

Installation:

Usage:

2. filesize

Installation:

Usage:

3. humanize-plus

Installation:

Usage:

4. pretty-bytes

Installation:

Usage:

5. filesize.js

Installation:

Usage:

Conclusion

Build WordPress Plugins Faster with `wp-plugin-init` Boilerplate

What is `wp-plugin-init`?