Radya is a WordPress starter theme built with a full-site editing features.

This package is based on frontend-webpack-boilerplate by WeAreAthlon

Table of Contents

• Webpack 5 Boilerplate Template
  • Features
  • Requirements
• Setup
  • Installation
  • Define Package Metadata
• Configuration
  • Environment Configuration
  • Additional webpack configuration
• Development
  • Assets Source
  • Build Assets
    • One time build assets for development
    • Build assets and enable source files watcher
    • Start a development server - reloading automatically after each file change.
• Production
  • Build Assets
  • Get Built Assets
• Run Code Style Linters
  • SASS
  • JavaScript
• Additional Tools
  • Run Assets Bundle Analyzer
  • Continuous Integration

Features

• Simple setup instructions
  • Start development of a project right away with simple, configured, linter enabled, browser synced asset files.
• Configuration per environment
  • development - sourcemaps, browser synced developmentment server
  • production - minification, sourcemaps
• Configurable browsers versions support. It uses browserslist - just specify the browsers you want to support in the package.json file for browserslist:

"browserslist": [
    "last 2 versions",
    "> 5%"
]

• The built CSS / JavaScript files will respect the configured supported browser versions using the following tools:
  • autoprefixer - automatically adds vendor prefixes to CSS rules
  • babel-preset-env - smart preset that allows you to use the latest JavaScript without needing to micromanage which syntax transforms (and optionally, browser polyfills) are needed by your target environment(s).
• Support for assets optimization for production environment with ability to configure:
  • Code Minification of JavaScript and CSS processed files.
  • Optimize Assets Loading - inline and embed images / fonts files having file size below a configurable threshold value.
  • Images Optimisation - optimize jpeg, jpg, png, gif, svg filesize and loading type via imagemin. Plugin and Loader for webpack to optimize (compress) all images using imagemin. Do not worry about size of images, now they are always optimized/compressed.
• Support for source code syntax style and formatting linters that analyze source code to flag any programming errors, bugs, stylistic errors or suspicious constructs:
  • SASS/PostCSS syntax cheker - you can change or add additional rules in .sasslintrc file. Configuration options can be found on sass-lint documentation.
  • JavaScript syntax checker - following the airbnb style, you can review and configure the rules in .eslintrc file. Configuration options can be found on eslint documentation.
• Latest Webpack 5 - JavaScript module bundler.
• Latest SASS/PostCSS compiler based on Dart sass.
• Latest Babel 7 (@babel/core) - JavaScript compiler - Use next generation JavaScript, today.
• Configured and ready to use Webpack Dev Server plugin for faster local development - webpack-dev-server
• Integration with Webpack Bundle Analyzer - Visualize size of webpack output files with an interactive zoomable treemap.

Requirements

• WordPress 5.9+
• node : ^12 || >=14
• npm

Setup

Installation

Clone or download this repository, change its name to something else (like, say, your-project-name), and then:

1. Search for 'radya' (inside single quotations) to capture the text domain and replace with: 'your-project-name'.
2. Search for radya_ to capture all the functions names and replace with: your-project-name_.
3. Search for Text Domain: radya in style.css and replace with: Text Domain: your-project-name.
4. Install all dependencies using npm install command.

$ npm install

Define Package Metadata

• Amend package.json file and optionally specify:
  • name - Name of your project. A name can be optionally prefixed by a scope, e.g. @myorg/mypackage.
  • version - Specify and maintain a version number indicator for your project code.
  • author - Your organisation or just yourself. You can also specify contributors.
  • description - Short description of your project.
  • keywords - Put keywords in it. It’s an array of strings.
  • repository - Specify the place where your code lives.
  • license - Announce your code license, figure out the license from Choose an Open Source License .
  • browserslist - Specify the supported browsers versions - you can refer to full list of availalbe options.

Configuration

Environment Configuration

• Edit the config/environment.js if you want to specify:
  • server: configure development server, specify host, port. Refer to the full development server configuration options for webpack-dev-server.
  • limits: configure file size thresholds for assets optimizations.
    • Image/Font files size in bytes. Below this value the image file will be served as Data URL (inline base64).
  • paths: src or assets directories names and file system location.

Webpack configuration

• common - config/webpack.config.js
• development - config/webpack.dev.config.js
• production - config/webpack.prod.config.js
  • Note that if you prefer to build and deploy sourcemap files, you should configure your server to disallow access to the Source Map file for normal users!

Development

Assets Source

• SASS/PostCSS files are located under src/scss/
• JavaScript files with support of latest ECMAScript ES6 / ECMAScript 2016(ES7)/ etc files are located under src/js/
• Image files are located under src/img/
• Font files are located under src/fonts/

Built Assets

• CSS files are located under /assets/css/
• JavaScript files with support of ES6 / ECMAScript 2016(ES7) files are located under /assets/js/
• Images are located under /assets/img/
• Fonts are located under /assets/fonts/

Available CLI commands

Radya comes packed with CLI commands tailored for WordPress theme development :

• npm run watch : Build assets and enable source files watcher.
• npm run dev : Build assets for development.
• npm run prod : Build and optimize assets for production.
• npm run bundle : Generates a .zip archive for distribution, excluding development and system files.
• npm run lint:sass : Checks all SASS files against CSS Coding Standards.
• npm run lint:js : Checks all JavaScript files against JavaScript Coding Standards.
• npm run stats : This will open the visualisaion on the default configuraiton URL localhost:8888, you can change this URL or port following the package documentation.

Note: File watching does not work with NFS (Windows) and virtual machines under VirtualBox. Extend the configuration in such cases by:

module.exports = {
  //...
  watchOptions: {
    poll: 1000 // Check for changes every second
  }
};

Now you're ready to go! The next step is to make an awesome WordPress theme. :)

Good luck!