0

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

0

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.

3
  • thank you for your anwser. Yes my added inline styles are placed inside the footer. In fact at the begining, I was created a <style></style> at the begining of the html grid. But it's not w3c valid. So I decided to create inline style thanks to worpdress function. I think I can't use wp_add_inline_style() because I also load a lot's of stuff in ajax. My only solution is inline style and it will works of course. Does <div style="<?php echo $gutter; ?> is consider as a dynamic inline style?
    – lolo
    Mar 4 '14 at 15:29
  • Yes, it is constructed dynamically, so it is a dynamic style.
    – s_ha_dum
    Mar 4 '14 at 15:32
  • Ok thank you! I asked this question to be sure, because I'm french and sometimes I'm not sure about some definitions...
    – lolo
    Mar 4 '14 at 15:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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