[Resolved] Page specific CSS

[Espen]

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

[David]

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.

[Espen]

Thank you, David!

-Espen

[David]

You’re welcome

[Evenit]

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?

[David]

Hi there,

yes, if the plugin is set to combine/minify inline CSS.

[Evenit]

Thank you David

[David]

You’re welcome

[Author]

Posts