I want to add dynamic CSS, so currently I am adding directly to the div, ie:
$color = "#000000";
echo '<div style="background:'.$color.'">
Is it bad to add code like above?
I have read in some forum that it adds server burden and it is not recommended by WordPress coding standards. I should use wp_add_inline_style()
. So I am trying to use that but it does not work. Here’s what I’m trying:
functions.php:
function add_custom_css() {
wp_enqueue_script('custom-css', get_template_directory_uri() . '/custom.css');
}
}
add_action( 'wp_enqueue_scripts', 'add_custom_css' );
single.php
$color = "#000111";
$custom_css = "
.mycolor{
background: {$color};
}";
wp_add_inline_style( 'custom-css', $custom_css );
It does not add any code in the custom.css file. What am I doing wrong?
Try this:
Using query conditionals
Putting style enqueueing directly in the template is not advisable. It is possible (if you understand the order that relevant actions fire, and ensure that your call to
wp_add_inline_style()
happens at the right point in the execution order). It is far easier to keep all the code together, and use an appropriate query conditional, such asis_single()
, to add the dynamic style:Original Answer
functions.php
single.php
The 3rd parameter in the
add_action()
calls is the priority, which tells WordPress what order to add the action — higher numbers means later execution.Edited to add This won’t add any code to
custom.css
— it’ll just add inline styles ifcustom.css
has already been loaded.References
add_action()
wp_enqueue_style()
wp_add_inline_style()
Those styles are added in the HTML document, within
<style>
tags, not in the stylesheet you enqueued. You’re still required to enqueue the stylesheet before adding “inline” styles though.The function name is a bit confusing, because it produces style blocks, not actual inline styles. What you did with the DIV above is an inline style. You should avoid these because they take the highest precedence before
!important
rules (overriding them would be very hard).No, it doesn’t. You are probably mistaking this with PHP scripts acting as stylesheets. Those are bad.
Maybe it’s just me, but it feels like we’re straining at a gnat and swallowing a camel, here. (it’s a phrase… look it up 🙂 )
If you’re building a theme that might have a child theme associated with it, both adding it directly inline, and adding it to a style block via wp_add_inline_style() is going to require an !important in order to override it.
If this is a custom plugin, and changing the background color is a critical part of the functionality, then by all means, add it inline.
I don’t see any advantage to overcomplicating this.
To answer the original question.
The simple answer is, No, it’s not bad. It does have consequences, but server performance is not one of them, and I don’t see anything in the WordPress coding standards that discourages this. In general, inline styles should be used sparingly, and carefully, but they’re not bad.
If you want to make sure to keep concerns separated, you might add a class inline instead of styles.
And then define .black in your style sheet. (That, of course, only works if you have a pre-defined list of color options.)
Just use:
I do this in all my templates, use:
This will put the referenced style tags and styles within the head section upon completing
<?php wp_head();?>
If you are coding it into a template make sure you put it before the
<?php wp_head();?>
section. You can learn more about it here WordPress Codex