Adding a CSS file based on body_class

  • Hi there,

    I am wanting to create separate CSS files for each page of my website and wondered if this is possible to do so using the body_class ?

    For example, if I am on my about page, the page would load a stylesheet called about.css or if I’m on a contact page, it would load contact.css

    Is this possible?

    Thanks!

Viewing 3 replies - 1 through 3 (of 3 total)

  • Not sure if you need a different CSS file, because you’ll end up duplicating a lot of styles… but here’s a guide on how to add custom classe to your pages (that will be equal to pages slug):

    https://www.wpbeginner.com/wp-themes/how-to-add-page-slug-in-body-class-of-your-wordpress-themes/

    Thread Starter thetoolman123

    (@thetoolman123)

    I would probably have one main CCS file with the main stuff like UI stuff and then each page would have CSS relating just to that page rather than loading every single page’s CSS into one file

    Moderator bcworkz

    (@bcworkz)

    You can do so, but body classes are determined rather late. I recommend conditionally enqueuing appropriate CSS files earlier based on the queried object ID, which would be the post ID in the case of single page requests. You can get it with get_queried_object_id().

    It would simplify enqueuing if the CSS file for a particular page was consistently named based on the related ID, for example style-12345.css for page ID 12345.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Adding a CSS file based on body_class’ is closed to new replies.