Blujay

Blujay is a minimal WordPress starter theme built with modern tooling and sensible defaults.

• Website
• Live Demo
• Download
• GitHub

Features

• Webpack for modern JavaScript development
• Laravel Mix for easy Webpack configuration
• Browsersync for synchronized browser testing
• npm for front-end package management
• Sass for stylesheets, with sensible defaults for colors, typography, etc.
• Mixins for easily defining and using named breakpoints
• Shortcodes for adding flexbox columns to pages and posts
• ESLint and stylelint for linting scripts and styles
• Setup functions for registering assets, menus, image sizes, sidebars, etc.
• Helper functions for cleaning up the header, moving scripts to the footer, etc.

Requirements

• WordPress >= 4.7
• PHP >= 7.1
• Node >= 6.14

Theme Installation

1. Download the latest release and unzip it into your /wp-content/themes directory.

2. Run npm install from the theme directory to install dependencies.

3. Run npm run prod to compile and optimize assets for production.

Theme Development

1. Edit /lib/setup.php to enable and/or disable theme features and register assets, menus, image sizes, sidebars, etc.

2. Edit /webpack.mix.js and change the browserSync proxy to reflect your local development url.

Build Commands

Compiled assets are output to the /dist directory.

• npm run dev – Compiles assets and generates source maps for development

• npm run prod – Compiles and optimizes assets for production

• npm run watch – Starts a Browsersync session and compiles assets when changes are detected

Package Management

Example of how to include npm packages in your theme:

1. Install package

npm install flatpickr

2. Add the stylesheet entry points to /assets/styles/main.scss

@import "~flatpickr/dist/flatpickr.css";

3. Add the script entry points to /assets/scripts/main.js

import flatpickr from "flatpickr";

4. Run any build command to compile the imported package assets along with your own.

Theme structure

/themes/blujay            # → Theme root
├── assets                # → Theme assets
│   ├── fonts/            # → Theme fonts
│   ├── images/           # → Theme images
│   ├── scripts/          # → Theme scripts
│   └── styles/           # → Theme styles
├── dist/                 # → Compiled assets (never edit)
├── lib/                  # → Theme code library
├── node_modules/         # → Node packages (never edit)
├── partials/             # → Partial templates
├── functions.php         # → Theme functions
├── package.json          # → Node dependencies
├── package-lock.json     # → Dependencies lock file (never edit)
├── style.css             # → Theme meta information
├── webpack.mix.js        # → Mix/Webpack configuration

Assets

• /assets/fonts – Font source files
• /assets/images – Image source files
• /assets/scripts – JavaScript source files
• /assets/styles – Sass source files
• /assets/styles/common – Common styles (variables, global, helpers, etc.)
• /assets/styles/components – Component styles (columns, comments, etc.)
• /assets/styles/layouts – Layouts styles (header, footer, pages, etc.)

Lib

• /lib/setup.php – Enables theme features and registers assets, menus, image sizes, sidebars, etc.
• /lib/helpers.php – Theme utilities for cleaning up the header, moving scripts to the footer, etc.
• /lib/shortcodes.php – Registers shortcodes

Thanks

Blujay was inspired by the excellent Sage starter theme by Roots.

Thanks Roots Team! 👍