|
1 | 1 | # wp-dynamic-css |
2 | | -Dynamic CSS renderer for WordPress |
| 2 | + |
| 3 | +[](https://raw.githubusercontent.com/aristath/kirki/master/LICENSE) |
| 4 | + |
| 5 | +**Contributors:** ykadosh |
| 6 | +**Tags:** theme, mods, wordpress, dynamic, css, stylesheet |
| 7 | +**Tested up to:** 4.4.2 |
| 8 | +**Stable tag:** 1.0.0 |
| 9 | +**License:** GPLv2 or later |
| 10 | +**License URI:** http://www.gnu.org/licenses/gpl-2.0.html |
| 11 | + |
| 12 | +A library for generating static stylesheets from dynamic content, to be used in WordPress themes and plugins. |
| 13 | + |
| 14 | +## Contents |
| 15 | + |
| 16 | +* [Overview](#overview) |
| 17 | +* [Installation](#installation) |
| 18 | + * [Via Composer](#via-composer) |
| 19 | + * [Via WordPress.org](#via-wordpressorg) |
| 20 | + * [Manually](#manually) |
| 21 | +* [Dynamic CSS Syntax](#dynamic-css-syntax) |
| 22 | +* [Enqueueing Dynamic Stylesheets](#enqueueing-dynamic-stylesheets) |
| 23 | +* [Setting the Value Callback](#setting-the-value-callback) |
| 24 | + |
| 25 | +## Overview |
| 26 | + |
| 27 | +**WordPress Dynamic CSS** is a lightweight library for generating CSS stylesheets from dynamic content (i.e. content that can be modified by the user). The most obvious use case for this library is for creating stylesheets based on Customizer options. Using the special dynamic CSS syntax you can write CSS rules with variables instead of static values. |
| 28 | + |
| 29 | +## Basic Example |
| 30 | + |
| 31 | +First, add this to your `functions.php` file: |
| 32 | + |
| 33 | +```php |
| 34 | +// 1. Load the library |
| 35 | +require_once 'wp-dynamic-css/bootstrap.php'; |
| 36 | + |
| 37 | +// 2. Set the callback function (used to convert variables to actual values) |
| 38 | +function my_dynamic_css_callback( $var_name ) |
| 39 | +{ |
| 40 | + return get_theme_mod($var_name); |
| 41 | +} |
| 42 | +wp_dynamic_css_set_callback( 'my_dynamic_css_callback' ); |
| 43 | + |
| 44 | +// 3. Enqueue the stylesheet (using an absolute path, not URL) |
| 45 | +wp_dynamic_css_enqueue( 'path/to/my-style.css' ); |
| 46 | + |
| 47 | +// 4. Nope, only three steps |
| 48 | +``` |
| 49 | + |
| 50 | +Then, create a file called `my-style.css` and write this in it: |
| 51 | + |
| 52 | +```css |
| 53 | +body { |
| 54 | + background-color: $body_bg_color; |
| 55 | +} |
| 56 | +``` |
| 57 | + |
| 58 | +In the above example, the stylesheet will be automatically rendered and printed to the `<head>` of the document. The value of `$body_bg_color` will be replaced by the value of `get_theme_mod('body_bg_color')`. |
| 59 | + |
| 60 | +Simple, right? |
| 61 | + |
| 62 | +## Installation |
| 63 | + |
| 64 | +### Via Composer |
| 65 | + |
| 66 | +### Via WordPress.org |
| 67 | + |
| 68 | +### Manually |
| 69 | + |
| 70 | +## Dynamic CSS Syntax |
| 71 | + |
| 72 | +## Enqueueing Dynamic Stylesheets |
| 73 | + |
| 74 | +## Setting the Value Callback |
| 75 | + |
0 commit comments