Development

The Development Workflow of the WP Blueprint Classic Theme emphasizes modern coding practices, efficient asset management, and seamless integration with WordPress standards. This section delves into the tools, scripts, and processes that enable a productive development environment.

Certainly! Here’s a structured guide for your development documentation, based on your requirements:

Getting Started

Setting Up the Theme

Before you begin development, it’s essential to configure the theme for your specific project:

1. Update style.css: The theme’s identity is defined in the style.css header. Ensure you modify the theme name, description, author, and other relevant details to fit your project’s characteristics.
2. Composer Configuration:
   • If you intend to use this theme as a package, it’s crucial to adjust the package name within the composer.json file.Modify the "name" attribute to your desired package name, ensuring it follows the vendor/package format.

{ 
    "name": "your-vendor-name/your-package-name", 
    ... 
}

CI – Code Quality

The theme leverages GitHub Actions to automate various code quality checks across multiple languages and frameworks, ensuring your theme’s code is consistently high-quality and adheres to best practices and standards:

PHP and WordPress Coding Standards (WPCS):

• PHP Linting: This action ensures the PHP code is free of syntax errors. Automated scans are run to ensure the code executes without any critical hitches.
• WPCS: This action validates that your theme’s code aligns with WordPress’s coding standards. Beyond general PHP quality, it ensures adherence to WordPress conventions.

CSS and SCSS Linting:

• CSS Linting: The action checks for any code quality issues in the theme’s CSS files.
• SCSS Linting: Similarly, SCSS files are scanned to guarantee they comply with best practices.

JavaScript Linting:

• JavaScript Lint: This action checks for potential issues, code smells, and general quality of the theme’s JavaScript code.

The integration of these automated checks within the GitHub workflow guarantees that your theme maintains a stringent code quality standard. This reduces possible hitches during the development phase and minimizes risks when deploying to production.

Scripts

NPM Scripts

The provided NPM scripts help streamline and automate your asset management and linting tasks:

• npm run dev or npm run development: Constructs assets utilizing Laravel Mix.
• npm run watch: Monitors files for alterations and reconstructs assets upon saving.
• npm run watch-poll: Functions like npm run watch, but leverages polling over native filesystem events for detection.
• npm run hot: Initiates a development server with Hot Module Replacement capabilities.
• npm run prod or npm run production: Constructs assets optimized for production environments.
• npm run lint & npm run lint:fix: Lint and fixes for JS.
• npm run lint:css & npm run lint:css:fix: Lint and fixes for CSS.
• npm run lint:scss & npm run lint:scss:fix: Lint and fixes for SCSS.

Composer Scripts

Leverage the following Composer scripts to ensure your PHP code aligns with WordPress Coding Standards:

• composer run lint:wpcs: Lints the code against WordPress Coding Standards.
• composer run lint:wpcs:fix: Auto-corrects detected issues based on WordPress Coding Standards.
• composer run lint:php: Lints PHP files for syntax errors or issues.
• composer run make-pot : Creates a pot file based on the defined text domain in the style.css

Remember, a successful development workflow prioritizes consistency, and regular use of these scripts ensures your code remains clean and efficient.