Archived topic
Page specific CSS
7 replies · Started by Espen on March 4, 2021
Hi,
I'm creating some pages using GP and GenerateBlocks and on some pages, there is a lot of custom CSS. This is CSS that is not needed elsewhere on the site and so I would prefer not to add it to the child theme CSS file since then it will be loaded sitewide.
Is there a way to add CSS to a page so that is only loaded on that page?
Thanks!
-Espen
Hi there,
you can use the Simple CSS plugin as that provides a CSS meta box in the post editor:
https://wordpress.org/plugins/simple-css/
Or you can use a Hook Element to add the styles to those specific pages:
https://docs.generatepress.com/article/hooks-element-overview/
Create a new Hook.
Add your styles to the content like so:
<style>
/* Your CSS here */
</style>Set the Hook to: wp_head
And set the Display Rules to the pages you want it applied.
Thank you, David!
-Espen
You're welcome
Hi David, just a question about the possibility to use a Hook Element to add the styles to specific pages. Doing so, do the css will be minified and optimized by third party plugins like WP-Rocket or similar?
Hi there,
yes, if the plugin is set to combine/minify inline CSS.
Thank you David
You're welcome
