Well another solution would be to use wp_add_inline_style()
which affords you an opportunity to inject dynamic inline styles:
function my_custom_style() {
wp_enqueue_style(
'custom-style',
get_template_directory_uri() . '/css/custom-style.css'
);
//our customer percentage set by a user in some options panel
$percentage = get_theme_mod('my-custom-percentage');
$inline_style =<<<DOC
.progress-bar {
width: {$percentage}%;
}
DOC;
//inject our custom percentage after "custom-style.css"
wp_add_inline_style( 'custom-style', $inline_style );
}
add_action('wp_enqueue_scripts', 'my_custom_style');
Aside from that, when a user changes settings in the backend it is also possible to generate a css file programmatically, storing it somewhere in the uploads directory and then dynamically enqueueing that file using wp_enqueue_scripts
.
You can also hook onto wp_head
and inject your styles that way too although probably not the best way, but here’s an example just for the sake of it:
function my_custom_style() {
$percentage = get_theme_mod('my-custom-percentage');
?>
<style type="text/css">
.progress-bar {
width: <?php echo $percentage; ?>%;
}
</style>
<?php
}
add_action('wp_head', 'my_custom_style', 100);