Skip to content

Instantly share code, notes, and snippets.

@konradsroka
Last active December 21, 2015 15:19
Show Gist options
  • Save konradsroka/6326016 to your computer and use it in GitHub Desktop.
Save konradsroka/6326016 to your computer and use it in GitHub Desktop.
Some Examples how to use the WP Customizer FrontEnd CSS Class https://gist.github.com/konradsroka/6325980
<?php
// Some Examples
// The following examples show how you can use the CC_Customizer class to generate the CSS for the frontend.
// First create a new Customizer_Frontend_CSS object.
$cc_customizer = new Customizer_Frontend_CSS();
// Now we can start defining the styles we need for the frontend,
// based on the saved option values in the WP Customizer.
// Example #1
// Define the CSS for ONE option
// For example if '#000000' was saved, the output would be: p { color: #000000; }
$cc_customizer->add_style( 'p', Array(
Array(
'option' => 'text_color',
'style' => 'color'
))
);
// Example #2 - With Custom String
// Define the CSS for ONE option, but with a CUSTOM STRING around the option value
$cc_customizer->add_style( 'h1', Array(
Array(
'option' => 'h1_font_size',
'style' => 'font-size',
'value' => '$em'
))
);
// The output would be: h1 { font-size: $em; margin: 10px; overflow: 10px; }
// ** while '$' will be auto-replaced with the value saved in WP Customizer
// Example #3 - With Static Styles
// Define the CSS for ONE option, but with a CUSTOM STRING around the option value
$cc_customizer->add_style('h1',Array(
Array(
'option' => 'h1_font_size',
'style' => 'font-size',
'value' => '$em',
),
Array(
'static' => 'margin: 10px;
overflow: 10px;'
))
);
// The output would be: h1 { font-size: $em; margin: 10px; overflow: 10px; }
// ** while '$' will be auto-replaced with the value saved in WP Customizer
// Example #4 - With Multiple Options
$cc_customizer->add_style('h1',Array(
Array(
'option' => 'h1_font_size',
'style' => 'font-size',
'value' => '$em'
),
Array(
'option' => 'h1_font_family',
'style' => 'font-family'
))
);
// The output would be: h1 { font-size: $em; font-family: $; }
// ** while '$' would be replaced with the values of course
// Example #5 - With Multiple Options AND static styles
$cc_customizer->add_style('h1',Array(
Array(
'option' => 'h1_font_size',
'style' => 'font-size',
'value' => '$em',
),
Array(
'option' => 'h1_font_family',
'style' => 'font-family'
),
Array(
'static' => 'margin: 10px;
overflow: 10px;'
))
);
// Don't forget to output all your CSS!
// When finished, just hook it all to wp_head
add_action( 'wp_head', $cc_customizer->output_css() );
// That's it!
// Use this class for all styles that need to have the values of the WP Customizer.
// But keep all your static-only CSS in a normal CSS file.
?>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment