{"id":42687,"date":"2016-03-21T03:29:43","date_gmt":"2016-03-21T03:29:43","guid":{"rendered":"https:\/\/wordpress.org\/plugins-wp\/wp-dynamic-css\/"},"modified":"2016-08-05T16:37:10","modified_gmt":"2016-08-05T16:37:10","slug":"wp-dynamic-css","status":"closed","type":"plugin","link":"https:\/\/wordpress.org\/plugins\/wp-dynamic-css\/","author":13680308,"comment_status":"closed","ping_status":"closed","template":"","meta":{"version":"1.0.5","stable_tag":"1.0.5","tested":"4.7.33","requires":"3.0","requires_php":"","requires_plugins":"","header_name":"WordPress Dynamic CSS","header_author":"Askupa Software","header_description":"","assets_banners_color":"65a6aa","last_updated":"2016-08-05 16:37:10","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"https:\/\/github.com\/askupasoftware\/wp-dynamic-css","header_author_uri":"http:\/\/www.askupasoftware.com","rating":5,"author_block_rating":0,"active_installs":10,"downloads":1284,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","changelog"],"tags":[],"upgrade_notice":[],"ratings":{"1":0,"2":0,"3":0,"4":0,"5":"1"},"assets_icons":{"icon-128x128.png":{"filename":"icon-128x128.png","revision":"1375326","resolution":"128x128","location":"assets"},"icon-256x256.png":{"filename":"icon-256x256.png","revision":"1375326","resolution":"256x256","location":"assets"}},"assets_banners":{"banner-772x250.png":{"filename":"banner-772x250.png","revision":"1375326","resolution":"772x250","location":"assets"}},"assets_blueprints":{},"all_blocks":[],"tagged_versions":["1.0.0","1.0.1","1.0.2","1.0.3","1.0.4","1.0.5"],"block_files":[],"assets_screenshots":[],"screenshots":[],"jetpack_post_was_ever_published":false},"plugin_section":[],"plugin_tags":[356,68566,2768,40112,68565],"plugin_category":[43,59],"plugin_contributors":[80273,80274],"plugin_business_model":[],"class_list":["post-42687","plugin","type-plugin","status-closed","hentry","plugin_tags-css","plugin_tags-css-variables","plugin_tags-customizer","plugin_tags-dynamic-css","plugin_tags-get_theme_mod","plugin_category-customization","plugin_category-utilities-and-tools","plugin_contributors-askupa-software","plugin_contributors-ykadosh","plugin_committers-askupa-software"],"banners":[],"icons":{"svg":false,"icon":"https:\/\/s.w.org\/plugins\/geopattern-icon\/wp-dynamic-css_65a6aa.svg","icon_2x":false,"generated":true},"screenshots":[],"raw_content":"\n

WordPress Dynamic CSS<\/strong> is a lightweight library for generating CSS stylesheets from dynamic content (i.e. content that can be modified by the user). \nThe most obvious use case for this library is for creating stylesheets based on Customizer options. \nUsing 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.<\/p>\n\n

As of version 1.0.2<\/strong> this plugin supports multiple callback functions, thus making it safe to use by multiple plugins\/themes at the same time.<\/p>\n\n

Basic Example<\/h3>\n\n

First, add this to your functions.php<\/code> file:<\/p>\n\n

\n\/\/ 1. Load the library (skip this if you are loading the library as a plugin)\nrequire_once 'wp-dynamic-css\/bootstrap.php';\n\n\/\/ 2. Enqueue the stylesheet (using an absolute path, not a URL)\nwp_dynamic_css_enqueue( 'my_dynamic_style', 'path\/to\/my-style.css' );\n\n\/\/ 3. Set the callback function (used to convert variables to actual values)\nfunction my_dynamic_css_callback( $var_name )\n{\n    return get_theme_mod($var_name);\n}\nwp_dynamic_css_set_callback( 'my_dynamic_style', 'my_dynamic_css_callback' );\n\n\/\/ 4. Nope, only three steps\n<\/pre>\n\n
Then, create a file called my-style.css<\/code> and write this in it:<\/p>\n\n
\nbody {\n    background-color: $body_bg_color;\n}\n<\/pre>\n\n
In the above example, the stylesheet will be automatically compiled and printed to the  of the document. The value of $body_bg_color<\/code> will be replaced by the value of get_theme_mod('body_bg_color')<\/code>.<\/p>\n\n
Now, let's say that get_theme_mod('body_bg_color')<\/code> returns the value #fff<\/code>, then my-style.css<\/code> will be compiled to:<\/p>\n\n
\nbody {\n    background-color: #fff;\n}\n<\/pre>\n\n
There's even support for array subscripts and piped filters:<\/p>\n\n
\nbody {\n    background-color: $myVar['index'];\n    color: $myVar|myFilter;\n}\n<\/pre>\n\n
You can find detailed documentation on how to use this library on the GitHub page<\/a><\/p>\n\n
Useful Links<\/strong><\/p>\n\n