Skip to content

Instantly share code, notes, and snippets.

@konradsroka
Last active December 21, 2015 15:19
Show Gist options
  • Save konradsroka/6325980 to your computer and use it in GitHub Desktop.
Save konradsroka/6325980 to your computer and use it in GitHub Desktop.
A small class to help building the FrontEnd CSS from the WP Customizer Options. Better Readability. Lean CSS. No more PHP Noodles in your styles!
<?php
/**
* This small PHP class provides you some functions to build the frontend CSS from the WP Customizer Options.
*
* == Fight the PHP Noodles in your CSS! ==
* As the resulting dynamic CSS of themes can look ugly,
* we thought about a sweet and short solution for this.
*
* == Better Readabilty ==
* No need of writing CSS with all that PHP checks and echos inside.. brr..
* Actually you simply write down which CSS selectors should be defined with what option.
* The rest just happens automagically.
*
* == Lean CSS ==
* You will only get a CSS style back if a value has been saved in the WP Customizer
* You can still add static CSS that should be added anyway, no matter if the option has been set
* You can generate one style from multiple options (for example font size, weight and color just for the h1)
*
* @author Sven Lehnert, Konrad Sroka
* @license GPL http://www.gnu.org/licenses/gpl.html
* @package WP Customizer Frontend CSS
* @since 1.0
*
*/
class Customizer_Frontend_CSS {
var $css_tmp = '';
/**
* PHP 4 constructor
*
* @package WP Customizer Frontend CSS
* @since 1.0
*/
function CC_Customizer() {
$this->__construct();
}
/**
* PHP 5 constructor
*
* @package WP Customizer Frontend CSS
* @since 1.0
*/
function __construct() {
}
/**
* Add a style to the Customizer_Frontend_CSS object!
*
* @package WP Customizer Frontend CSS
* @since 1.0
*/
function add_style( $selector, $args = Array() ) {
$this->css_tmp .= $selector.' { ';
foreach ($args as $key => $css) {
$option_value = '';
if( isset( $css['option'] ) )
$option_value = get_theme_mod( $css['option'] );
if( isset( $css['value'] ) && !empty($option_value) ) :
$this->css_tmp .= $css['style'].': ';
$this->css_tmp .= str_replace("$", $option_value, $css['value']);
$this->css_tmp .= '; ';
elseif(!empty($option_value)) :
$this->css_tmp .= $css['style'].': ';
$this->css_tmp .= $option_value;
$this->css_tmp .= '; ';
endif;
if(isset($css['static']))
$this->css_tmp .= $css['static'];
}
$this->css_tmp .= ' } ';
}
/**
* Output the Customizer CSS!
*
* @package cc2
* @since 2.0
*/
function output_css(){
echo $this->css_tmp;
}
}
?>
@konradsroka
Copy link
Author

Some Examples how to use this class can be found here:
https://gist.github.com/konradsroka/6326016

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment