0

How would you include a stylesheet in both the block-editor and on the front-end if the page meets certain criteria?

In this case I want to include a stylesheet called homepage.css if the page is the home page only. I therefore did this:

 add_action('enqueue_block_assets', function () {
   if(is_front_page()){
     wp_enqueue_style(
       'homepage-stylesheet',
        get_template_directory_uri() . '/homepage.css',
     );
   }
});

Whilst the code works on the front-end it does not in the block-editor as it appears that is_front_page() cannot be determined until the page is rendered.

How would you go about this?

8
  • it would be easier to use the .home rule and take advantage of the body classes WP adds to help with this. Otherwise what you want is impossible if you ever plan to use the template or site editors as there's no way to know from PHP since the user can click into another template and it would be broken
    – Tom J Nowell
    Oct 4, 2023 at 15:26
  • @TomJNowell I see you point but its about loading fewer resources, or more accurately, only relevant resources. I can think of a number of ways to do this but I just thought that something a simple as this would be included in the code base.
    – Walrus
    Oct 5, 2023 at 9:00
  • in the strictest sense nothing prevents you doing this using the same strategy on the frontend, just don't expect it to work on the backend as it's a React/JS application, enqueue_block_assets may not be the ideal action to do that on, and there are definitely disadvantages to this approach and additional complexity, it's not the silver bullet it first appears to be
    – Tom J Nowell
    Oct 5, 2023 at 13:44
  • @TomJNowell . I've implemented a it using the template slug as the identifier and it works perfectly on the front end and the block editor with every single stylesheet. I'm yet to find the problem you mention in any case.
    – Walrus
    Oct 6, 2023 at 11:01
  • 1
    as an aside, you could register a "homepage" block style on a group block to selectively apply homepage styling to everything inside it, so that you can have sections of a page without styling the entire page and place it anywhere you want across the entire site
    – Tom J Nowell
    Oct 6, 2023 at 12:11

1 Answer 1

0

This can be done. @TomJNowell does point out the potential for a problem with this solution in the comments to the question but I cannot replicate that problem in any test.

In this example I locked on to the template slug. Therefore for this to work instead of using is_front_page() or similar, create a template called homepage and use it only for the homepage. Then do the same for any other pages you want to have a custom stylesheet.

add_action('enqueue_block_assets', function () {

  global $post; 

  $template = get_page_template_slug($post->ID);

  wp_enqueue_style(
    $template . '-template-styles',
    get_template_directory_uri() . '/' . $template . '.css',
  ); 

});

Your Answer

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

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