Follow for free plugins, new theme releases and theme news
Plugin Description
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 that will be replaced by static values using a custom callback function that you provide.
Basic Example
First, add this to your functions.php file:
// 1. Load the library (skip this if you are loading the library as a plugin)
require_once 'wp-dynamic-css/bootstrap.php';
// 2. Set the callback function (used to convert variables to actual values)
function my_dynamic_css_callback( $var_name )
{
return get_theme_mod($var_name);
}
wp_dynamic_css_set_callback( 'my_dynamic_css_callback' );
// 3. Enqueue the stylesheet (using an absolute path, not URL)
wp_dynamic_css_enqueue( 'path/to/my-style.css' );
Then, create a file called my-style.css and write this in it:
body {
background-color: $body_bg_color;
}
In the above example, the stylesheet will be automatically compiled and printed to the of the document. The value of $body_bg_color will be replaced by the value of get_theme_mod('body_bg_color').
Now, let’s say that get_theme_mod('body_bg_color') returns the value #fff, then my-style.css will be compiled to:
body {
background-color: #fff;
}
You can find detailed documentation on how to use Kirki on the GitHub page
Useful Links
Screenshots
No screenshots provided
