Skip to content

Commit 0b280f2

Browse files
author
Yoav Kadosh
committed
Updated readme to reflect 1.0.3 syntax changes
1 parent 5b4b4bb commit 0b280f2

File tree

1 file changed

+61
-2
lines changed

1 file changed

+61
-2
lines changed

README.md

Lines changed: 61 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -130,6 +130,16 @@ body {
130130

131131
During run time, this file will be compiled into regular CSS by replacing all the variables to their corresponding values by calling the 'value callback' function and passing the variable name (without the $ sign) to that function.
132132

133+
**Array variables (since 1.0.3)**
134+
135+
Version 1.0.3 added support for array subscripts, using a syntax similar to that of PHP. For example:
136+
```css
137+
body {
138+
font-family: $font['font-family'];
139+
}
140+
```
141+
The callback function should accept a second variable that will hold an array of subscript names. A more in-depth explanation can be found in the [Setting the Value Callback](#setting-the-value-callback) section.
142+
133143
Future releases may support a more compex syntax, so any suggestions are welcome. You can make a suggestion by creating an issue or submitting a pull request.
134144

135145
## Enqueueing Dynamic Stylesheets
@@ -176,8 +186,8 @@ In that case, we can tweak our callback function to return default values as wel
176186

177187
```php
178188
$theme_mod_defaults = array(
179-
'body_bg_color': '#fff',
180-
'body_text_color': 'black'
189+
'body_bg_color' => '#fff',
190+
'body_text_color' => 'black'
181191
);
182192

183193
function my_dynamic_css_callback( $var_name )
@@ -205,6 +215,55 @@ body {
205215
}
206216
```
207217

218+
**Array variables**
219+
220+
It is also possible to access array values using subscripts. An example dynamic CSS file may look like:
221+
222+
```css
223+
body {
224+
background-color: $body_bg_color;
225+
color: $body_text_color;
226+
font: $font['font-size']px '$font['font-family']';
227+
}
228+
```
229+
230+
However, in this case the callback function is passed 2 parameters: one holding the variable name, and a second holding an array of subscript names. The second variable is always going to be an array since there may be more than one subscript (multidimensional arrays). To retrieve to array value, the subscripts array is to be looped through to get each subscript. For example:
231+
232+
```php
233+
$theme_mod_defaults = array(
234+
'body_bg_color' => '#fff',
235+
'body_text_color' => 'black'
236+
'font' => array(
237+
'font-familiy' => 'Arial',
238+
'font-size' => 14
239+
)
240+
);
241+
242+
function my_dynamic_css_callback( $var_name, $subscripts = null )
243+
{
244+
$val = get_theme_mod($var_name, @$theme_mod_defaults[$var_name]);
245+
if( null !== $subscripts )
246+
{
247+
foreach( $subscripts as $subscript )
248+
{
249+
$val = $val[$subscript];
250+
}
251+
}
252+
return $val;
253+
}
254+
wp_dynamic_css_set_callback( 'my_dynamic_style', 'my_dynamic_css_callback' );
255+
```
256+
257+
whic compiles to:
258+
259+
```css
260+
body {
261+
background-color: #fff;
262+
color: black;
263+
font: 14px 'Arial';
264+
}
265+
```
266+
208267
## API Reference
209268

210269
### wp_dynamic_css_enqueue

0 commit comments

Comments
 (0)