WordPress.org

Make WordPress Core

Opened 20 months ago

Last modified 16 months ago

#36391 new feature request

Create a hook to handle dynamic CSS?

Reported by: CarlosRios Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Script Loader Keywords:
Focuses: performance Cc:

Description

I'm not sure if this has been suggested before, but it would be really cool if there was a hook for plugins that would allow them to add their css to a css file that is generated and enqueued automatically when that hook is not empty.

This would be done to prevent plugins such as Visual Composer, from loading all of their custom css in the <head> of the page which can be bad for caching. Instead they would hook in, add their css, and then the css would be added to a single file along with all of the other css that has been hooked to it.

add_filter( 'options_css', 'add_my_plugin_css' );
function add_my_plugin_css( $hooked_css ) {
   $bg_color = get_option( 'header_background_color' );
   $hooked_css .= '#header{background-color:'.$bg_color.';}';
   return $hooked_css;
}

This code would then be hooked, sanitized, and minified, and then enqueued where it needs to be. I'd even suggest that the name of the css file could be wp-options.css or options.css

Change History (5)

#1 follow-up: @ghera74
20 months ago

Hi! I like your idea and it made me thinking about the problem of changing the plugins style in my Wordpress projects.
The common solutions are modifying the plugin directly, bad for future update, or add changes to the theme style file.
It would be interesting to have a hook for add this changes with a function like your proposal.

#2 in reply to: ↑ 1 ; follow-up: @CarlosRios
20 months ago

I've thought about it for a while and think it could be really useful :) Not sure how we could get this going since I've never contributed to WP core though. I'm also not too sure on what the benefits and risks would be either. I've thought that it would be really awesome to also be able to generate page specific css files. So that could be done with a separate hook that supplies the object's ID as an argument, and allows you to add css based on the ID.

Replying to ghera74:

Hi! I like your idea and it made me thinking about the problem of changing the plugins style in my Wordpress projects.
The common solutions are modifying the plugin directly, bad for future update, or add changes to the theme style file.
It would be interesting to have a hook for add this changes with a function like your proposal.

#3 @chriscct7
20 months ago

  • Version trunk deleted

#4 in reply to: ↑ 2 @ghera74
20 months ago

Thanks for your answer Carlos. Actually, it would be the first time for me too :-)
Let's see if someone else finds it interesting, I will be happy to contribute!

Replying to CarlosRios:

I've thought about it for a while and think it could be really useful :) Not sure how we could get this going since I've never contributed to WP core though. I'm also not too sure on what the benefits and risks would be either. I've thought that it would be really awesome to also be able to generate page specific css files. So that could be done with a separate hook that supplies the object's ID as an argument, and allows you to add css based on the ID.

Replying to ghera74:

Hi! I like your idea and it made me thinking about the problem of changing the plugins style in my Wordpress projects.
The common solutions are modifying the plugin directly, bad for future update, or add changes to the theme style file.
It would be interesting to have a hook for add this changes with a function like your proposal.

#5 @CarlosRios
16 months ago

  • Summary changed from Create a hook to handle plugin CSS? to Create a hook to handle dynamic CSS?
Note: See TracTickets for help on using tickets.