0

I'm trying to figure out how to get wp_add_inline_style to work inside a template file.

The code I'm using is this:

function custom_css() {

    $output = '.some-class { background: #000; }';

    if ( ! empty( $output ) ) {
        wp_add_inline_style( 'themename-style', $output );
    }

}
add_action( 'wp_enqueue_scripts', 'custom_css' );

I can get it working perfectly if I add the code inside the functions.php.

However, I've created a template (template-page-slider.php). This template is the same as page.php, but, it has a custom slider built in.

I want users to be able to style the slider different for each page the template is used. I figured wp_add_inline_style would be the best way to go about this but I can't get wp_add_inline_style to work inside a template file.

Is anyone aware of any specific reason why wp_add_inline_style doesn't work inside template files?

  • Where do you put that function call in template file? PS. Template files should contain only presentation code, no logic should be placed in there... – Krzysiek Dróżdż Jul 11 '18 at 11:35
  • I have a slider.php file included into the template-page-slider.php. The above code is actually in the slider.php file. – Devcode Jul 11 '18 at 11:48
  • And where is that slider.php file included exactly? Before or after wp_head call? – Krzysiek Dróżdż Jul 11 '18 at 11:51
1

Conceptually wp_add_inline_style adds some lines as if they were concatenated to a style file. This means that your setup will only work if you are adding the inline style to a style file loaded in the footer, because by the time you are calling add_inline_style in a template the header has already been assembled.

That said, this is really not a good idea. Functions need to be in the functions.php file to keep your code readable in the long term. If you want to enable users to add different styles per post, the best approach is to make a custom field for that, which you can read in time to enqueue it in the header.

  • Thanks for your answer. Using the link you provided I've managed to get the styles to appear in the footer. However, this definitely isn't the approach I want to take. The slider and all the controls are actually built with Advanced Custom Fields. Could you provide me with a link to an example or explanation of how I could do this with custom fields? Thanks again. – Devcode Jul 11 '18 at 13:20
  • I don't know about ACF, but I'm sure there's a function to access those fields. You would build a function that you attach to the wp_enqueue_scripts hook in which you access those fields to build the css, which you then add inline to a style file you have registered earlier. – cjbj Jul 11 '18 at 13:40
  • I really don't know why I didn't think of this approach before. I already build custom styles for my customiser controls in a separate file and it works perfectly. What a great learning curve this has turned into today. Thanks for your time. – Devcode Jul 11 '18 at 13:47

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.