[Support request] Stylesheet firing order

[GL]

Hello Again,

I’m working on a plugin that I like to use with GeneratePress – basically I have a few different predefined stylesheets that use an admin options page to select the stylesheet I want to use.

What I’m trying to do here is load the stylesheet immediately after the main generate-style-css, before any childtheme stylesheet or customizer/head inline css.

I can get the styles to load before the main generate-style-css, but I have some css rules that override the generate-style-css, so that wont help placed there. I can also load the stylesheets after the inline styles, but then if I need to override anything with a child theme or the customizer I cant without using those !important declarations that we all try to avoid.

Desired firing order:

1)generate-style-css
2)my-plugin-styles
if exist
3)generate-child;
4)inline-css

Thanks in advance for any input.

[Tom]

Hi there,

I don’t believe it’s possible, unfortunately, as those files are enqueued together: https://github.com/tomusborne/generatepress/blob/2.3.2/inc/general.php#L33

There would need to be a hook in that location.

You could add inline CSS, but not a file. I took a look through the core function and didn’t see a way to filter into it.

[GL]

Thanks Tom.

I looked high and low and couldn’t find a way either. However, you gave me some ideas – as I only use the plugin for GeneratePress, I can override the generate_scripts function. I did a quick test and it worked.

Here is what I am doing – I am creating a set of predefined theme styles for forms, buttons, and some various elements colors. Some of these styles will not have a need for overriding as they are things like border radius, box shadows, text-shadows, some margin and padding – all things that make the theme what it is. But of course there may need to change colors of elements.

I may just load a stylesheet after the inline css and then use filters for color options within the customizer.

I found that I can apply filters to the existing customizer options, then from the GeneratePress options panel I can reset the settings and then my plugins filter settings will show up. I have a different set of filters load for each predefined style that is chosen from my plugins options panel.

I guess now the only thing I would really prefer is if there were a method to apply the filters and have them show up immediately without the need to reset the core/color options, yet afterwards still be able to apply any color changes in the customizer and have them stay.

[Tom]

I wouldn’t overwrite the entire generate_scripts() function, as you won’t get any updates to it in the future.

There are two ways to set options using a filter:

1. Set the defaults – this requires the option in the Customizer to be empty to show up.
2. Overwrite the settings – this will prevent the Customizer options from working.

That’s it I think, unfortunately. Inline CSS with wp_add_inline_style() might be your best bet.

[GL]

I would only overwrite any functions using the plugin, never in the theme core:)

I think I’m going to filter the default colors so that if the customizer is reset the new defaults for particular style will show, maybe I can hook into the reset function and have it only reset the elements the styles will be using when I choose desired style.

And I will also have a go with inline-styles. The more I dig in here it looks more and more like thats the way to go.

If you have any links to anything that could help as a starting point I would appreciate it.

Thanks for your help so far, the ideas are flowing!

[Tom]

Overwriting theme functions is still usually a bad idea, even if it’s inside a plugin/child theme. Definitely a last resort type of thing.

Inline styles are the way to go, especially since you can use a plugin like Autoptimize to package it all up into a static file 🙂

[Author]

Posts