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

Improve this question

1 Answer 1

Reset to default
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.

Improve this answer
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? Commented Mar 4, 2014 at 15:29
  • Yes, it is constructed dynamically, so it is a dynamic style. Commented Mar 4, 2014 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... Commented Mar 4, 2014 at 15:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.