soderlind / Dynamic Enqueue Scripts
How to enqueue dynamic CSS and JavaScript in WordPress
dynamic-enqueue-scripts.php
Plugin that demonstrates how to enqueue dynamic CSS and JavaScript in WordPress.
plugin code
Excerpt from thefunction dynamic_enqueue_scripts() {
wp_enqueue_style(
'dynamic-css', //handle
admin_url( 'admin-ajax.php' ) . '?action=dynamic_css_action&wpnonce=' . wp_create_nonce( 'dynamic-css-nonce' ), // src
array(), // dependencies
DYNAMICSCRIPTVERSION // version number
);
}
function dynamic_css_loader() {
$nonce = $_REQUEST['wpnonce'];
if ( ! wp_verify_nonce( $nonce, 'dynamic-css-nonce' ) ) {
die( 'invalid nonce' );
} else {
/**
* NOTE: Using require or include to call an URL (created by plugins_url() or get_template_directory(), can create the following error:
* Warning: require(): http:// wrapper is disabled in the server configuration by allow_url_include=0
* Warning: require(http://domain/path/dynamic-javascript.php): failed to open stream: no suitable wrapper could be found
* Fatal error: require(): Failed opening required 'http://domain/path/dynamic-javascript.php'
*/
require_once dirname( __FILE__ ) . '/dynamic-css.php';
}
exit;
}
add_action( 'wp_enqueue_scripts', 'dynamic_enqueue_scripts' );
add_action( 'wp_ajax_dynamic_css_action', 'dynamic_css_loader' );
add_action( 'wp_ajax_nopriv_dynamic_css_action', 'dynamic_css_loader' );
dynamic CSS
A simple example<?php
//prevent direct access
if ( ! defined( 'ABSPATH' ) ) {
die();
}
header( "Content-type: text/css; charset: UTF-8" );
//get color from options, settings etc
$color = 'blue';
?>
a {
color: <?php echo $color;?> !important;
}
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].