Forked from konradsroka/wp_customizer_frontend_css_examples.php
Created
August 26, 2013 09:52
-
-
Save svenl77/6339844 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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