RDNYC WordPress Bootstrap 5/PurgeCSS Theme

The WordPress theme for recoverydharma.org, based on Webpack 5, Bootstrap 5, and some development conveniences.

Originally forked from WP 73k, itself forked from WP Tailwind

Development Requirements

How to get started

Clone or download the project into your themes directory (./wp-content/themes)
Run composer install
Run npm install
Set environment variables for BrowserSyncPlugin to the domain/ports you need (see webpack.config.js for variables needed).
Run npm run start to begin development server, npm run dev for simple dev build, npm run prod for a production build, or npm run build to build both dev & prod concurrently.

SVGs

Optimization

Images placed in assets/images will be copied to dist/images -- however, SVGs can be optimized by placing them in assets/raw and importing them in main.js, e.g.:

import '../raw/rdnyc-logo.svg';

This will output an optimized version to dist/images

SVG icons can be pulled into a sprite file (output to dist/images/icon-sprites.svg). For this to work, @import them in main.js (see examples). Sprite names are set by the config in webpack.config.js with prefixes supported for some icon packs (@mdi/svg, bootstrap-icons, heroicons). They can then be used for menus (put icon-<PREFIX>-<ICON-NAME> in the class for a menu item), or used in the theme php files with the svg_icon_use($icon_name, $div_class) function from custom-functions.php to get a div containing the correct svg use tag. $div_class should usually include baseline for proper layout.

Including

SVG images can be implemented two ways:

A normal <img src="<?php echo get_template_directory_uri() . '/dist/images/svg-roll-mandala.svg'; ?>" ... > tag
- This cannot be colored but preserves SVG styling
- Since resource is loaded separately, it can be cached.
An inline SVG using the inline_svg( $svg_name, $atts ) function in custom-functions.php -- see that file for supported $atts array keys.
- This can be colored from parent element
- SVG class requires {{class-placeholder}} for 'svg_class' $atts key to work
- Since resource is inline, cannot be cached.

2.5 KiB Raw Blame History