wp add inline style in loop

Question

I want to add inline styles thanks to the wp_add_inline_style wordpress function.

The inline styles will be added in a loop. In my case, I output an isotope grid in my loop and this grid can have differents css customization for each grid.

Actually I have this php script:

function grid_register_styles(){
    $themeversion =  wp_get_theme()->display('Version');
    wp_register_style( 'grid-style', get_bloginfo('stylesheet_url'), array(),     floatval($themeversion) , false  );
}
add_action( 'init', 'grid_register_styles' );

function grid_inline_styles($guttercss) {
    wp_enqueue_style( 'grid-style' );
    wp_add_inline_style( 'grid-style', $guttercss);
}

/* this is the function used for the loop */
function grid_init() {

    /* There is some stuff before */

    /* I calculate a variable in order to apply a style base on some options */
    $guttercss  = '.gutter-'. $gutter .' .to-item-wrapper {';
    $guttercss .= 'margin: '. $gutter/2 .'px !important;}';

    /* Then I call my function to output inline css style */
    grid_inline_styles($guttercss);

    /* There is some stuff after */

}

This code works in the loop and output different css style for each generated isotope grid.

However, the generated css is in the footer instead of the head....

I success to put it in the head with an add_action() but it can't only works outside the loop and only one time.

I think that I don't correctly understand the way to use wp_add_inline_style().

Answer 1

If grid_init() runs inside the Loop, then it executes after the page head and after the associated hooks-- wp_head, wp_enqueue_scripts, etc. PHP executes line by line in sequence, so if you miss a hook you just missed it. You can't go backwards. The script/style enqueueing subsystem does have to ability to put things int he footer though, and in this case that is the only option. I am sure that is what you are seeing.

The markup you are getting might work, but it is also invalid. Styles have to be in the head.

The simplest solution, and probably the best, is to echo inline style= tags in your markup.

If that solution doesn't work then you will need to:

1. Loop through the Loop in the head of the document-- probably in the wp_enqueue_styles hook
2. generate the markup
3. reset the Loop
4. then let the page load

There is obviously additional processing time involved in that, but unless you have a lot of posts per page, you probably won't notice.