How to hide wpp block when no-data?

[NgKhanh]

Describe the solution you'd like When no data, it show block with class wpp-no-data, I can use css to hide this block. But I can't hide header of block

Describe alternatives you've considered I hope we can add custom class to block to header and block body, and add header title ínside container

<div class="custom-d-none">
<h3 class="wpp-header">Related posts</h3>
<ul class="wp-list">
</ul>
</div>

[cabrerahector]

Hi @NgKhanh,

This is a bit of a "hack" but it should work: you can use the wpp_no_data filter hook like this to hide the entire container from view (assuming you're using the widget of course):

/**
 * Hide WPP's widget if there's nothing to show.
 *
 * @param  string $no_data_html
 * @return string
 */
function my_custom_no_posts_found( $no_data_html ){ 
    $output = '<style>.popular-posts { display:none; }</style>';
    return $output;
}
add_filter('wpp_no_data', 'my_custom_no_posts_found', 10, 1);

You need to add this code snippet to your theme's functions.php file for it to work.

And regarding your question about how to customize the HTML code please have a look at this FAQ: How can I use my own HTML markup with WordPress Popular Posts?