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

• NodeJS
• Composer

How to get started

1. Clone or download the project into your themes directory (./wp-content/themes)
2. Run composer install
3. Run npm install
4. Set environment variables for BrowserSyncPlugin to the domain/ports you need (see webpack.config.js for variables needed).
5. 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.