CSS loading in footer

Hi Dpete,

That’s odd. register_frontend_styles is a utility method for wp_enqueue_style and that outputs in the head rather than the footer. Certain plugins do alter where this styling is output, but we don’t do that. Do the stylesheets output in the header if you disable all non-SiteOrigin plugins?

Kind regards,
Alex

I tried it on an install with only Page Builder and the Widget Bundle and it still seems to be happening. All other stylesheets output to the header. A style tag with id=”siteorigin-panels-layouts-footer” seems to be output in the footer first then the stylesheets from register_frontend_styles follow it. I can keep digging around.

Hi Dpete,

Thank you for clarifying. siteorigin-panels-layouts-footer is unrelated to register_frontend_styles and its output location can be altered by navigating to Settings > Page Builder and open the Layout tab. Set Page Builder Layout CSS Output Location to Header.

Can you please provide me with a copy of your widget code so I can take a look at it? register_frontend_styles isn’t designed to output to the footer so I’m unsure why it’s outputting there for your widget so I’ll need to take a closer look at it to work out what’s going on.

Kind regards,
Alex

I installed WP 5.9.3 with Page Builder and the Widget Bundle and added the built-in Post Carousel widget and it outputs the stylesheets to the footer as well. I’m also using a very simple theme that you can download here. It has a custom widget in it to look at. I tried changing the CSS output location to header but it didn’t seem to change anything. You can look at the source here and see the stylesheets in the footer. This page has the Post Carousel and the test widget added to it. Thanks for taking a look.

Hi dpete,

Thanks. I’ve identified a possible situation where WordPress will output styles to the footer when using wp_enqueue_style due to when it’s initiated – as of WordPress 3.3, this appears to be intentional. Unfortunately, unlike JavaScript WordPress doesn’t provide a method of forcing stylesheets to be added to a specific location. As the content area is processed well after the pages head, it’s too late to reliably conditionally load the widgets stylesheet (which is what register_front_styles does – it registers the style and then enqueues it when rendered).

If you would like for the stylesheet to always be output in the head, your best bet would be to output the stylesheet immediately when initializing the widget using wp_enqueue_style instead of register_front_style (which will conditionally load the stylesheet and thus potentially have it appear in the footer), or use a performance plugin that moves any stylesheets added to the footer – most performance plugins do this so I recommend checking if any existing plugin you’re using does this.

Kind regards,
Alex

Ok good to know. Using wp_enqueue_style when initializing the widget does solve it. I wrongly assumed register_front_style hooks into the wp_enqueue_scripts action to enqueue them (it would be great if it did). Using this initialize function seems to work the best.

function initialize() {
	add_action('wp_enqueue_scripts', function() {
		wp_enqueue_style('test-widget', get_template_directory_uri() . '/widgets/test-widget/css/style.css');	
	});
}

Hi,

It’s great to hear that helped! ??

register_frontend_styles uses wp_register_style and it’s designed to allow for conditional output of the styles. I’ll log adding a utility method for wp_enqueue_style.

Kind regards,
Alex

Will there be any consideration to allow the id=”siteorigin-panels-layouts-footer” style tag that the page builder outputs to be moved to the header? Changing the Page Builder Layout CSS Output Location settings to header doesn’t seem to have an affect.

Hi Dpete,

Unfortunately, we’re limited in how we output CSS due to how the Block Editor works. At the point where we’re able to output CSS, it’s already too late for it to be included in the head so it’s not possible for us to move it up. I recommend using a performance plugin that’ll move this CSS to the head. All major performance plugins include this functionality.

Kind regards,
Alex

I only use the Classic Editor but assume even with that it’s too late to include in the header?

In the Page Builder plugin it seems that the CSS is added from the “the_content” filter which is why it’s too late to add the CSS to the header. Could you run generate_post_content() earlier and then pass the generated content to the_content filter to output it?