Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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?

share|improve this question
    
+1, but edited to provide an example using query conditionals to keep all style enqueueing code together. –  Chip Bennett Apr 5 at 14:47
add comment

2 Answers

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_script('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_script('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.

Codex page for add_action()

share|improve this answer
add comment

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.