Skip to content

Instantly share code, notes, and snippets.

@seothemes
Last active May 25, 2019 04:32
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save seothemes/4c28d92852926ac28a81611216cfef56 to your computer and use it in GitHub Desktop.
Save seothemes/4c28d92852926ac28a81611216cfef56 to your computer and use it in GitHub Desktop.
Dynamic CSS in WordPress
<?php
/**
* Load dynamic CSS stylesheet in WordPress. There are 4 steps:
*
* 1. Enqueue dynamic stylesheet on front end or add inline CSS if in Customizer.
* 2. Get the dynamic CSS with AJAX calls.
* 3. Generate CSS using PHP variables.
* 4. Minify CSS after before loading.
*/
add_action( 'wp_enqueue_scripts', 'prefix_dynamic_css_output' );
/**
* Enqueues dynamic CSS on frontend or adds inline styles if in Customizer.
*
* @since 1.0.0
*
* @return void
*/
function prefix_dynamic_css_output() {
$handle = 'prefix';
if ( is_customize_preview() ) {
// Add inline styles if in Customizer.
$css = prefix_generate_css();
wp_register_style( $handle, false );
wp_enqueue_style( $handle );
wp_add_inline_style( $handle, $css );
} else {
// Load external stylesheet.
wp_enqueue_style(
$handle,
admin_url( 'admin-ajax.php' ) . '?action=prefix_dynamic_css&wpnonce=' . wp_create_nonce( 'dynamic-css-nonce' ),
[],
'1.0.0',
'all'
);
}
}
add_action( 'wp_ajax_prefix_dynamic_css', 'prefix_dynamic_css' );
add_action( 'wp_ajax_nopriv_prefix_dynamic_css', 'prefix_dynamic_css' );
/**
* Load the dynamic CSS with ajax (if nonce is ok).
*
* @since 1.0.0
*
* @return void
*/
function prefix_dynamic_css() {
$nonce = $_REQUEST['wpnonce'];
if ( ! wp_verify_nonce( $nonce, 'dynamic-css-nonce' ) ) {
die( esc_html__( 'Invalid nonce.', 'textdomain' ) );
} else {
header( 'Content-type: text/css; charset: UTF-8' );
echo prefix_generate_css();
}
exit;
}
/**
* Generates the CSS output.
*
* Uses HEREDOC string to make it easier to add PHP variables in CSS string.
*
* @since 1.0.0
*
* @return string
*/
function prefix_generate_css() {
$body_background_color = get_option( 'body_background_color', 'blue' );
$css = <<<CSS
body {
background-color: $body_background_color !important;
}
CSS;
return prefix_minify_css( $css );
}
/**
* Quick and dirty way to mostly minify CSS with PHP.
*
* @since 1.0.0
* @author Gary Jones
*
* @param string $css CSS to minify.
*
* @return string Minified CSS
*/
function prefix_minify_css( $css ) {
$css = preg_replace( '/\s+/', ' ', $css );
$css = preg_replace( '/(\s+)(\/\*(.*?)\*\/)(\s+)/', '$2', $css );
$css = preg_replace( '~/\*(?![\!|\*])(.*?)\*/~', '', $css );
$css = preg_replace( '/;(?=\s*})/', '', $css );
$css = preg_replace( '/(,|:|;|\{|}|\*\/|>) /', '$1', $css );
$css = preg_replace( '/ (,|;|\{|}|\(|\)|>)/', '$1', $css );
$css = preg_replace( '/(:| )0\.([0-9]+)(%|em|ex|px|in|cm|mm|pt|pc)/i', '${1}.${2}${3}', $css );
$css = preg_replace( '/(:| )(\.?)0(%|em|ex|px|in|cm|mm|pt|pc)/i', '${1}0', $css );
$css = preg_replace( '/0 0 0 0/', '0', $css );
$css = preg_replace( '/#([a-f0-9])\\1([a-f0-9])\\2([a-f0-9])\\3/i', '#\1\2\3', $css );
return trim( $css );
}
@seothemes
Copy link
Author

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