Load CSS only if comments are present

Hi there,

In generatepress by default I observed that comments.min.css is loaded only where there are one or more comments present on the post

Yes that's correct as shown here - https://github.com/tomusborne/generatepress/blob/b60b853630da6d9015722da903e53c8064148b0a/inc/general.php#L21-L24

You can copy how the comments.min.css is enqueued on this code.

Example:

if ( is_singular() && comments_open() ) {
	wp_enqueue_style( 'custom-comments-styling', get_template_directory_uri() . '/your-comments-style.css' );
}

This assumes you have a custom child theme (as you've mentioned) and have the file saved on its child theme root folder.

Thanks Elvin,

I assume we should place this in some "function XXXX" and then call that function?
Can you please share the complete code which I should place in functions.php as I am not familiar with this.

Thanks again

Here's an example.

function generatepress_child_enqueue_scripts() {
if ( is_singular() && comments_open() ) {
	wp_enqueue_style( 'custom-comments-styling', get_template_directory_uri() . '/your-comments-style.css' );
}
}
add_action( 'wp_enqueue_scripts', 'generatepress_child_enqueue_scripts', 100 );

Thanks Elvin

Is there a way to add a check if the post has one or more comment then only load the CSS?
As many of the singular posts have 0 comments so no point in loading CSS stylesheets there

Regards
Deepak

Hi there,

change this:

if ( is_singular() && comments_open() ) {

to:

if ( is_singular() && comments_open() && have_comments() ) {

Thanks David

When I add the above provided code

function generatepress_child_enqueue_scripts() {
if ( is_singular() && comments_open() ) {
	wp_enqueue_style( 'custom-comments-styling', get_template_directory_uri() . '/your-comments-style.css' );
}
}
add_action( 'wp_enqueue_scripts', 'generatepress_child_enqueue_scripts', 100 );

then I get 404 for the respective stylesheet
https://xxxx/wp-content/themes/generatepress/XXXXX.css

As the path used is not from child theme. The path should have been
https://xxxx/wp-content/themes/generatepress_child/XXXXX.css

And if I modify the above code to use
if ( is_singular() && comments_open() && have_comments() ) {
then the XXXX.css doesn't load at all on any of the posts (with or without comments)

This one doesn't seem to exists:

.../wp-content/themes/generatepress/golinuxcloud-safelist.css

But this one does so you're correct on that one.

.../wp-content/themes/generatepress_child/golinuxcloud-safelist.css

As for the condition, try this one:

if ( is_singular() && comments_open() && get_comments_number() > 0 )