Opened 9 years ago
Closed 6 months ago
#36391 closed feature request (wontfix)
Create a hook to handle dynamic CSS?
| Reported by: |
|
Owned by: | |
|---|---|---|---|
| Milestone: | Priority: | normal | |
| Severity: | normal | Version: | |
| Component: | Script Loader | Keywords: | close |
| 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 (8)
#2
in reply to:
↑ 1
;
follow-up:
↓ 4
@
9 years 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.
#4
in reply to:
↑ 2
@
9 years 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
@
8 years ago
- Summary changed from Create a hook to handle plugin CSS? to Create a hook to handle dynamic CSS?
#6
@
4 years ago
@CarlosRios Please see the concerns mentioned in https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html#rule-4-css-encode-and-strictly-validate-before-inserting-untrusted-data-into-html-style-property-values
We would need to develop a good way to sanitize dynamic css before attempting something like this. I ran into this ticket while looking to see if a ticket on css sanitization exists. Haven't found it yet.
Anyway, I know this looks simple and I really like the idea, but the sanitization side is a really tough issue we will have to solve first.
#7
@
2 years ago
- Keywords close added
- Milestone set to Awaiting Review
I'm going to add a close suggestion.
Dynamically creating a CSS file seems like it would be bad for performance and it would also create new and different potential caching problems.
The additional CSS feature has a filter hook that can be used to add needed CSS to a page. Since this ticket was created, the block editor and the concept of global styles & settings.
I'll return in a few months to close this out, unless anyone can spend time investigating what this request would look like in WordPress today and how it differs from what's available.
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.