wp-rdnyc/README.md

40 lines
1.7 KiB
Markdown
Raw Normal View History

# RDNYC WordPress Bootstrap 5/PurgeCSS Theme
2021-08-04 07:46:55 -04:00
The WordPress theme for recoverydharma.org, based on Webpack 5, Bootstrap 5, and some development conveniences.
2021-08-04 07:46:55 -04:00
Originally forked from [WP 73k](https://github.com/apiontek/wp-73k/), itself forked from [WP Tailwind](https://github.com/cjkoepke/wp-tailwind)
## Development Requirements
- [NodeJS](https://nodejs.org)
- [Composer](https://getcomposer.org)
2021-08-04 07:46:55 -04:00
### How to get started
2021-08-04 07:46:55 -04:00
1. Clone or download the project into your `themes` directory (`./wp-content/themes`)
2. Run `composer install`
2021-08-04 11:13:05 -04:00
3. Run `npm install` if developing
4. Run `npm run watch` to begin watching & rebuilding for development, `npm run dev` for simple dev build, `npm run prod` for a production build, or `npm run build` to build both dev & prod concurrently.
2021-08-04 07:46:55 -04:00
### SVGs
2021-08-04 07:46:55 -04:00
#### Optimization
2021-08-04 07:46:55 -04:00
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.:
2021-08-04 07:46:55 -04:00
```js
import '../raw/rdnyc-logo.svg';
```
2021-08-04 11:11:15 -04:00
This will output an optimized version to `dist/images` with `svg-` prefix; these can be used per below:
2021-08-04 11:11:15 -04:00
#### Using optimized SVGs
2021-08-04 07:46:55 -04:00
SVG images can be implemented two ways:
2021-08-04 07:46:55 -04:00
- 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.