How to Boost WordPress Development with WP Scaffold

For WordPress developers, setting up a new project can often feel like a repetitive dance of configuration and boilerplate. What if you could skip the tedious parts and jump straight into building innovative features? Introducing WP-scaffold, a powerful WordPress theme scaffold built to simplify development and promote best practices from the very beginning.

Developed by the renowned agency 10up, this scaffold isn’t just another WordPress starter theme; it’s the foundational toolkit for all their WordPress projects, offering a structured and efficient way to build high-quality websites. 

For agencies or businesses working with a trusted WordPress development company, wp-scaffold can boost WordPress development by reducing redundant tasks and ensuring smoother project execution.

What is WP-scaffold?

At its foundation, wp-scaffold offers a minimal theme and a must-use plugin that serve as the starting point for your WordPress project setup.

It’s engineered to foster a clean separation of concerns, ensuring your functionality resides in the plugin while your presentation layer is handled by the theme. This design strategy enhances organization while making maintenance and scaling much easier.

For anyone looking to speed up WordPress development, wp-scaffold provides the right balance of flexibility and structure.

Key Features That Set It Apart:

1. Integrated 10up Toolkit for Asset Bundling: Say goodbye to manual compiling and minifying. The scaffold seamlessly integrates with 10up Toolkit, an opinionated solution for managing your project’s assets. This means your JavaScript and CSS are automatically compiled, minified, and bundled, ensuring optimal performance and a smooth WordPress developer workflow.
2. Efficient Dependency Management with npm Workspaces: For larger projects with multiple components, managing npm dependencies can be a headache. wp-scaffold leverages npm workspaces to hoist dependencies to the root folder, effectively preventing duplicate installations and streamlining your node_modules directory.
3. Optional Functionality for Customization: Recognizing that not every project needs every feature, the scaffold offers optional functionalities. Need internationalization (i18n) support? It’s there. Don’t need it? You can easily remove it, keeping your codebase lean and focused.
4. Standardized Asset Bundling for Consistency: By enforcing the use of 10up Toolkit, the scaffold ensures a consistent approach to asset building across all your projects. This standardization is invaluable for teams, reducing friction and enhancing WordPress developer productivity.
5. Gutenberg Block Support Out-of-the-Box: In the era of the Block Editor, building custom Gutenberg blocks is a common requirement. The scaffold provides a clear structure and examples, guiding you to build your blocks directly within the theme, ready for the modern WordPress experience.
6. Pre-commit Hooks for Code Quality: Quality assurance is built into the development process. With Husky and Lint-Staged pre-configured, the scaffold runs essential code quality checks (using ESLint, Stylelint, and PHPCS) automatically on pre-commit hooks. This proactive approach helps catch issues early, maintaining a high standard of code.

Who is WordPress Theme Scaffold For?

WordPress theme scaffold is ideal for:

• Agencies and Teams: Looking for a standardized, efficient, and high-quality starting point for all their WordPress projects. Many rely on a professional WordPress development company to integrate such workflows.
• Freelance Developers: Who want to elevate their development workflow and deliver professional, maintainable solutions with the help of the right WordPress development tools.
• Developers Focused on Best Practices: Who appreciate a scaffold that encourages separation of concerns, modern asset management, and code quality. 

If you’re looking to hire WordPress expert developers, choosing ones familiar with wp-scaffold can be a game-changer.

Get Started Today!

If you’re looking to Boost WordPress development, check out wp-scaffold on GitHub. It’s a testament to how intelligent scaffolding can transform your workflow, allowing you to focus on innovation rather than setup. With features like WP CLI scaffold support and a streamlined build process, it’s a practical solution for anyone who wants to learn How to Boost WordPress Development with WP Scaffold.

Resource:

• wp-scaffold GitHub Repository

The core idea is:

1. Block Definition (PHP): A PHP file used to register your block type within WordPress.
2. Block Metadata (JSON): A block.json file to define the block’s essential properties.
3. Block Logic (JavaScript): JavaScript files for the block’s editor behavior (edit function) and frontend rendering (save function).
4. Block Styles (CSS/SCSS): CSS/SCSS files for styling the block in both the editor and on the frontend.

Block Definition (PHP), Metadata (JSON), Block Logic (JavaScript), and Styles (CSS/SCSS) are all structured in wp-scaffold to help speed up WordPress development while maintaining consistency.

Let’s create a simple “Hello World” block.

Understanding the Structure (as per wp-scaffold principles)

In a wp-scaffold project, your custom blocks would typically reside within your theme’s directory, perhaps in a dedicated blocks folder.

For a block named my-hello-block, the structure might look like this:

your-theme-name/

├── blocks/

│   └── my-hello-block/

│       ├── block.json       <-- Block metadata

│       ├── index.js         <-- Main JavaScript for editor & save

│       ├── editor.scss      <-- Editor-specific styles

│       └── style.scss       <-- Frontend & general editor styles

├── functions.php          <-- Where you might include/register blocks

└── ... (other theme files)

1. block.json (Block Metadata)

This file defines all the static properties of your block. File: your-theme-name/blocks/my-hello-block/block.json

JSON

{

    "$schema": "https://schemas.wp.org/trunk/block.json",

    "apiVersion": 3,

    "name": "your-theme/my-hello-block",

    "title": "My Hello Block",

    "category": "text",

    "icon": "smiley",

    "description": "A simple custom block to say hello.",

    "textdomain": "your-theme-textdomain",

    "editorScript": "file:./index.js",

    "editorStyle": "file:./editor.css",

    "style": "file:./style.css"

}

• name: Unique identifier for your block. Best practice is your-theme-or-plugin-slug/block-name.
• title: Human-readable name that appears in the editor.
• category: Where the block appears in the editor inserter (e.g., text, media, design, widgets, theme).
• icon: Dashicon slug or SVG.
• editorScript, editorStyle, style: These tell WordPress where to find your compiled JavaScript and CSS. The file: prefix is important for automatic asset loading with block.json.

2. index.js (Block Logic – Editor & Save)

This JavaScript file defines how your block behaves in the editor and what HTML it saves to the database. wp-scaffold uses @wordpress/scripts for compilation, so you can write modern JavaScript (JSX) here.

File: your-theme-name/blocks/my-hello-block/index.js

JavaScript

import { registerBlockType } from '@wordpress/blocks';
import { useBlockProps, RichText } from '@wordpress/block-editor';
import './editor.scss'; // Import editor-specific styles
import './style.scss';  // Import shared styles

registerBlockType( 'your-theme/my-hello-block', {
    /**
     * @see ./block.json
     */
    edit: ( { attributes, setAttributes } ) => {
        const blockProps = useBlockProps();
        const { message } = attributes;

        return (
            <RichText
                { ...blockProps }
                tagName="p"
                value={ message }
                onChange={ ( newMessage ) => setAttributes( { message: newMessage } ) }
                placeholder="Enter your greeting..."
            />
        );
    },
    save: ( { attributes } ) => {
        const blockProps = useBlockProps.save();
        const { message } = attributes;

        return (
            <p { ...blockProps }>{ message }</p>
        );
    },
    attributes: {
        message: {
            type: 'string',
            default: 'Hello, World!',
        },
    },
} );

• registerBlockType: The core function to register your block.
• edit function: Defines what appears in the Gutenberg editor. RichText allows users to edit content directly. useBlockProps automatically adds necessary block editor classes.
• save function: Specifies the HTML to be stored in the database, which is what visitors will see on the frontend.
• attributes: Defines the data your block stores. message is a simple string attribute.
• Imports: Notice the import statements for SCSS. The build process (handled by 10up Toolkit/@wordpress/scripts) will compile these into editor.css and style.css respectively.

3. Styles (editor.scss, style.scss)

File: your-theme-name/blocks/my-hello-block/editor.scss

SCSS
.wp-block-your-theme-my-hello-block {
    border: 2px dashed #ccc;
    padding: 20px;
    background-color: #f0f0f0;
    text-align: center;
}

File: your-theme-name/blocks/my-hello-block/style.scss

SCSS
.wp-block-your-theme-my-hello-block {
    p {
        font-family: sans-serif;
        font-size: 1.2em;
        color: #333;
    }
}

Remember that the wp-block-{namespace}-{block-name} class is automatically added by useBlockProps.

4. PHP (Registering the Block Type)

This PHP code tells WordPress about your block.

File: your-theme-name/functions.php (or a dedicated file included by functions.php)

PHP
<?php

/**
 * Register custom Gutenberg blocks.
 */

function your_theme_register_custom_blocks() {

    // Check if the block editor is available.
    if ( ! function_exists( 'register_block_type' ) ) {
        return;
    }

    // Path to the blocks directory.
    $blocks_dir = get_template_directory() . '/blocks/';

    // Get all subdirectories in the blocks folder.
    $block_folders = glob( $blocks_dir . '*' );

    foreach ( $block_folders as $folder ) {
        if ( is_dir( $folder ) ) {
            $block_json_file = $folder . '/block.json';
            if ( file_exists( $block_json_file ) ) {
                // Register the block type using the block.json file.
                // WordPress will automatically handle script and style enqueueing.
                register_block_type( $block_json_file );
            }
        }
    }
}

add_action( 'init', 'your_theme_register_custom_blocks' );

• This PHP snippet iterates through the blocks directory in your theme.
• For each subdirectory containing a block.json file, it calls register_block_type().
• The magic of block.json: When you pass the path to block.json to register_block_type(), WordPress automatically handles enqueuing the editorScript, editorStyle, and style assets defined in that JSON file. You don’t need separate wp_enqueue_script or wp_enqueue_style calls for the block itself.

How this fits with wp-scaffold:

1. Placement: You’d put the my-hello-block folder inside your-theme-name/blocks/.
2. functions.php: The block registration code would go into your-theme-name/functions.php or a file it includes.
3. Build Process: When you run the build commands provided by 10up Toolkit (usually npm run start for development or npm run build for production), the index.js, editor.scss, and style.scss files within your block folder will be processed.
   • index.js will be compiled into index.js (or a similar filename) in the same folder.
   • editor.scss will be compiled into editor.css.
   • style.scss will be compiled into style.css.
   • These compiled CSS/JS files are then automatically picked up by WordPress because they are referenced in block.json using the file: prefix.