Wordpress theme for Recovery Dharma NYC
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
Adam Piontek 5e2f25b43b update prod dist and increment version 11 months ago
assets fix layout issue with mandala & improve mandala sizing 11 months ago
content-templates update permissions 11 months ago
dist fix layout issue with mandala & improve mandala sizing 11 months ago
page-templates update permissions 11 months ago
src update permissions 11 months ago
.gitignore update permissions 11 months ago
404.php update permissions 11 months ago
README.md update permissions 11 months ago
composer.json update permissions 11 months ago
composer.lock update permissions 11 months ago
custom-functions.php fix for svg loading on localhost with docker 11 months ago
footer.php fix layout issue with mandala & improve mandala sizing 11 months ago
front-page.php update permissions 11 months ago
functions.php update permissions 11 months ago
header.php fix layout issue with mandala & improve mandala sizing 11 months ago
index.php update permissions 11 months ago
package-lock.json update packages 11 months ago
package.json update prod dist and increment version 11 months ago
postcss.config.js update permissions 11 months ago
screenshot.png update permissions 11 months ago
searchform.php update permissions 11 months ago
style.css update prod dist and increment version 11 months ago
svgo.config.js update permissions 11 months ago
webpack.config.js fix for browser-sync on windows docker 11 months ago

README.md

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

  1. Clone or download the project into your themes directory (./wp-content/themes)
  2. Run composer install
  3. Run npm install if developing
  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 with svg- prefix; these can be used per below:

Using optimized SVGs

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.