Highlight Hot Topic Post Which Contains More Than 5 Comments
While running a WordPress blog, most important thing is to provide high-quality, original content, that will engage the readers. If you have some popular posts with a lot of comments, you should consider highlighting this hot topics. It’s a great way to catch the readers’ attention.
This is a very easy modification, which doesn’t require a plugin, and it can help you to visually filter content on a blog list and to highlight important posts. For example, you could choose to highlight all posts which contain more than 5 comments.
First, let’s dive a little bit inside WordPress core files in order to have clear understanding of the final solution.
If you did some modifications of theme files in the past, probably you have seen something like this:
<?php /** * The template part for displaying single posts * * @package WordPress * @subpackage Twenty_Sixteen * @since Twenty Sixteen 1.0 */ ?> <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <header class="entry-header"> <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?> </header><!-- .entry-header --> <?php twentysixteen_excerpt(); ?> <?php twentysixteen_post_thumbnail(); ?> <div class="entry-content">
This is just example of a template for displaying single posts in Twenty Sixteen theme, and what is important here is post_class
function. Note that every theme that is coded in the proper way, uses this function for printing post specific classes. This modification can’t be done if it is missing which probably won’t be the case.
If you search for post_Class within WordPress core files, you can easily find this part located inside wp-includes/post-template.php:
$classes = array_map( 'esc_attr', $classes ); /** * Filters the list of CSS classes for the current post. * * @since 2.7.0 * * @param array $classes An array of post classes. * @param array $class An array of additional classes added to the post. * @param int $post_id The post ID. */ $classes = apply_filters( 'post_class', $classes, $class, $post->ID ); return array_unique( $classes ); }
What is important is that apply_filters
function is being used. This is how we can filter classes in order to add our custom class under the certain conditions by using add_filter function.
Our function for achieving this will look like this:
/** * Function for adding custom css class to post_class for posts with minimum number of comments * Then styling of hot-topic css class can be done inside child theme style.css file or from WP Back end > Appearance > Customize */ if (! function_exists('wpklik_function_css_class_for_highly_commented_posts')) { function wpklik_function_css_class_for_highly_commented_posts($classes, $class, $post_id) { $min_comments = 5; // change this number to your liking if ( is_archive() || is_home() ) { if (get_comments_number() >= $min_comments) { $classes[] = 'hot-topic'; } } return $classes; } add_filter('post_class', 'wpklik_function_css_class_for_highly_commented_posts', 10,3); }
With our function, we will simply process the number of comments on blog list and archive pages for each post and if that number is higher or equal with our desired minimum number (by default set to 5), we will pass our custom hot-topic css class to these articles. Effectively, this will highlight all single posts with 5 or more comments in them.
If you now visit blog, and inspect posts containing more than 5 comments, you will notice hot-topic class.
With class in place, you can now easily add some additional css code in order to make these post stand out a bit. You can add your css code from child-theme style.css
file or simply from WordPress backend > Appearance > Customize, and you can be as creative as you want, knowing that by targeting your custom class, you won’t affect anything else on your blog.
Here’s an example of the code which I’ve used for this purpose:
article.hot-topic:before { content: "Trending !"; position: absolute; left: -20px; top: -20px; transform: rotate(-7deg); color: red; font-weight: 600; } article.hot-topic .entry-title a { text-decoration: underline; } article.hot-topic .entry-title a:hover { color: red; } article.hot-topic span.comments-link a { color: red; font-weight: 600; }
And final result is this:
Hope that some of you will find this interesting and helpful, if so, please don’t forget to share.
We hope this article was helpful. If you liked it, feel free to check out some of these articles as well!