How to add dynamic inline style?

Question

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?

Answer 1

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 as is_single(), to add the dynamic style:

function add_custom_css() {
    wp_enqueue_style('custom-css', get_template_directory_uri() . '/custom.css');   
    // Add dynamic style if a single page is displayed
    if ( is_single() ) {
        $color = "#000111";
        $custom_css = ".mycolor{ background: {$color}; }";
        wp_add_inline_style( 'custom-css', $custom_css );
    }
}
add_action( 'wp_enqueue_scripts', 'add_custom_css' );

Original Answer

functions.php

function add_custom_css() {
    wp_enqueue_style('custom-css', get_template_directory_uri() . '/custom.css');          
}
add_action( 'wp_enqueue_scripts', 'add_custom_css', 20 );

single.php

function wpse104657_custom_color() {
    $color = "#000111";
    $custom_css = "
        .mycolor{
            background: {$color};
        }";
    wp_add_inline_style( 'custom-css', $custom_css );
}
add_action( 'wp_enqueue_scripts', 'wpse104657_custom_color', 21 );

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 if custom.css has already been loaded.

References

• Codex page for add_action()
• wp_enqueue_style()
• wp_add_inline_style()

Answer 2

It does not add any code in the custom.css file. What I'm doing wrong?

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).

I have read in some forum that it adds server burdon

No, it doesn't. You are probably mistaking this with PHP scripts acting as stylesheets. Those are bad.

Answer 3

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.

Is it bad to add code like above?

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.

$color = "black";
echo '<div class=".$color.">'

And then define .black in your style sheet. (That, of course, only works if you have a pre-defined list of color options.)

Answer 4

Just use:

add_action('admin_head','myfunc24235235');
function myfunc24235235(){ ?>

  <style>
  .smth{ color:red;}
  </style>

    <?php
}

Answer 5

I do this in all my templates, use:

<?php
    function hook_css() {
        ?>
            <style>
                .sub { margin: auto; max-width: 1140px;}
            </style>
        <?php
    }
    add_action('wp_head', 'hook_css');
?>

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