0

I am looking for an alternate way than using functions.php and applying conditionals based on each page's ID, instead I would like to enqueue the CSS right at the top of each page like this:

<?php
defined('ABSPATH') or die();
?>

<?php get_header();?>
<?php wp_enqueue_style('home', get_template_directory_uri() . '/assets/css/style.css', '', 1, 'all'); ?>

And in the header, its own CSS script like this right before wp_head():

...
    <title><?php wp_title();?></title>

    <?php wp_enqueue_style('header', get_template_directory_uri() . '/assets/css/header.css', '', 1, 'all'); ?>

    <?php wp_head();?>

</head>

<body <?php body_class();?>>

So this way a CSS file would be enqueued in the header.php and then another in that specific page.php. Is this the right approach for someone wishing to add page specific css?

Improve this question

1 Answer 1

Reset to default
2

So this way a CSS file would be enqueued in the header.php and then another in that specific page.php.

No because:

  • all the things that get enqueued are processed in the header but you're calling it after the header has already been done. The cat has already gotten out of the bag, the horse has already bolted, the order matters. At best this will push the CSS to the footer instead
  • This would add the CSS to every single page

Instead, you're already using body_class() and that function is there for a reason, so add the CSS everywhere and use the classes from that function to target just the pages you want. This way you don't need a separate file or weird PHP logic, it just works. E.g. post archives has a archive class as well as others, ranging from generic classes such as post to single to single-post postid-1067, as well as other utility classes such as wether the user is logged in, or the specific template file ( single-post-template ). These exist for all pages WordPress can serve ( if body_class is used ).

A conditional enqueue is neither necessary or optimal here unless the file you're enqueing is especially large.

But if you insist, you can grab the post ID outside the loop and wrap your enqueue in an if statement using $id = get_queried_object_id();. Note that this can also return user IDs or term IDs if you're on an author archive or a category archive for example, so pay attention to the functions such as is_singular() or is_archive()

Also, if your styling blocks then use block.json to specify the stylesheets and scripts for the frontend. If you do this, WordPress will automatically enqueue those files but only when that block is used.

Improve this answer
6
  • Hello Tom. Thanks for your reply. I am a bit confused here now. You say that 'A conditional enqueue is neither necessary or optimal here ..'. How else shall I utilize the page classes that you mentioned? Aren't they supposed to be in an if conditional to check their existence? Secondly, I want to be able to have header/footer css to be available on every page, so I guess I create a header_footer.css and enqueue it in functions. php to load on every page? P.S.: I dont have 15 reputation to up-vote your answer :(
    – Raging Vids
    Dec 5, 2021 at 19:12
  • you don't need to, the browser can do that for you. E.g. .single-post-template h1 { color: blue; } makes all headings blue, but only on posts, even if the CSS is loaded everywhere. Instead of relying on PHP or conditional loading, rely instead on classic CSS rules. Those body tag HTML classes are not just for show.
    – Tom J Nowell ♦
    Dec 5, 2021 at 20:14
  • Interesting way to use body_class(). I wasn't aware of it. But I guess I am being misunderstood here. body_class() is defined in the header.php which will run on every page and will give all the default WP classes to the elements. But I need to have separate CSS files to define different styling for different pages to optimize CSS and load only the necessary CSS for each page. I don't want to have all h1s on my site be of the same color or size etc.
    – Raging Vids
    Dec 6, 2021 at 20:10
  • If I am having an entire CSS file for home page with specific class names that I manually give in the HTML, why would I want it to be loaded on a separate page where I have kept file names different and with different behavior?
    – Raging Vids
    Dec 6, 2021 at 20:10
  • One CSS file can power the entire thing, just because the CSS is loaded everywhere does not mean all the rules apply to all the pages, h1 { color: blue; } makes all h1's blue everywhere, but .postid-1067 h1 { color: blue; } makes only the heading on the post page with the ID 1067 blue, even if that CSS is present on the homepage
    – Tom J Nowell ♦
    Dec 6, 2021 at 21:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.