Displaying the most commented posts on your website is a great way to showcase your most engaging content. Posts with high comment counts often indicate that readers found them relevant, or valuable, making them a perfect addition to your homepage, blog sidebar, or other high-traffic areas. By highlighting these posts, you improve user engagement and encourage more discussions and interactions on your site.
In this tutorial, we will show you how to display the most commented posts on your WordPress site, whether you build your website with the WordPress Gutenberg editor or with some popular WordPress page builders such as Divi and Elementor.
Without including the use of additional plugins, we will guide you through the step-by-step process to display the most commented posts on your website by implementing special treatment for each builder (Gutenberg, Divi, and Elementor), such as adding the custom code, CSS code, and tweaking the specific features, to ensure that your website visitors can easily discover your most popular discussions and engage them to visit other posts on your website.
How to Display the Most Commented Posts in WordPress (Gutenberg, Divi, and Elementor)
1. Display the Most Commented Posts on Gutenberg
Add the Custom Code to the functions.php file
First, we will add the PHP snippet to the functions.php file.
On your WordPress dashboard, go to Appearance > Theme File Editor. You can find Theme File Editor under the Tools menu if you’re using a block theme.
Once you enter the Theme File Editor page, select the functions.php file. Afterward, paste the PHP snippet below at the end of the function file content. Next, update the theme file by clicking the Update File button.
// Add this to your theme's functions.php file or a custom plugin
function display_most_commented_posts_grid($atts) {
// Set default attributes
$atts = shortcode_atts(
array(
'posts_per_page' => 6, // Number of posts to display
),
$atts,
'most_commented_posts_grid'
);
// Query the most commented posts
$args = array(
'posts_per_page' => intval($atts['posts_per_page']),
'orderby' => 'comment_count',
'order' => 'DESC',
'post_status' => 'publish'
);
$most_commented_query = new WP_Query($args);
// Initialize output
$output = '';
if ($most_commented_query->have_posts()) {
$output .= '<div class="most-commented-posts-grid">';
while ($most_commented_query->have_posts()) {
$most_commented_query->the_post();
$output .= '<div class="grid-item">';
$output .= '<h2><a href="' . get_permalink() . '">' . get_the_title() . '</a></h2>';
// Display post thumbnail if available
if (has_post_thumbnail()) {
$output .= '<div class="post-thumbnail"><a href="' . get_permalink() . '">' . get_the_post_thumbnail(get_the_ID(), 'medium') . '</a></div>';
}
// Limit excerpt to 120 characters
$excerpt = get_the_excerpt();
if (strlen($excerpt) > 120) {
$excerpt = substr($excerpt, 0, 120) . '...';
}
$output .= '<p>' . esc_html($excerpt) . '</p>';
// Display comment count
$output .= '<p><strong>Comments:</strong> ' . get_comments_number() . '</p>';
$output .= '</div>';
}
$output .= '</div>'; // End grid container
wp_reset_postdata();
} else {
$output .= '<p>No posts found.</p>';
}
return $output;
}
// Create a shortcode for the function
add_shortcode('most_commented_posts_grid', 'display_most_commented_posts_grid');
Note: If you are afraid of breaking your site after adding the new function to the functions.php file, you can create a child theme or custom plugin. Read here to learn more.
Add the Custom CSS
Next, we will add the additional CSS to your WordPress theme. Adding the custom CSS allows you to create a responsive grid layout and have more control over the design of your most commented posts page.
On your WordPress dashboard, go to Appearance -> Customizer -> Additional CSS. Copy the CSS snippet below and paste it into the input field. If you use a block theme, you may need to enable the theme customizer first.
Here is the CSS snippet you can use:
.most-commented-posts-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
.grid-item {
border: 1px solid #ddd;
padding: 15px;
border-radius: 5px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.grid-item h2 {
font-size: 1.5em;
margin-bottom: 10px;
}
.post-thumbnail img {
width: 100%;
height: auto;
border-radius: 5px;
}
.grid-item p {
font-size: 1em;
line-height: 1.6;
}
@media (max-width: 768px) {
.most-commented-posts-grid {
grid-template-columns: 1fr;
}
}
Once you finish adding the CSS snippet, apply it by clicking the PUBLISH button.
- What did the CSS code do?
This CSS code creates a responsive grid layout for displaying posts. The grid adapts to different screen sizes, using multiple columns on larger screens and stacking items into a single column on smaller screens (below 768px).
Each grid item is styled with a light border, padding, rounded corners, and a subtle shadow to enhance its visual appeal. Images within the grid maintain their aspect ratio and have rounded corners.
Add the Shortcode
Next, create a new page by navigating to Pages -> Add New in your WordPress dashboard. Give your page a title, and then add the Shortcode block into the content editor.
Afterward, simply paste the shortcode where you’d like the most commented posts to appear.
[most_commented_posts_grid posts_per_page="6"]
This shortcode allows you to display a grid of the most commented posts based on the PHP code you’ve integrated. You can insert this feature (most commented posts) into any part of your site by placing the shortcode on a page.
Once you’ve added the shortcode, click Publish button to make the page live. You can also preview the page to ensure that the posts are displaying correctly in the desired grid layout. Don’t forget to save and publish your project if you want to.
2. Display the Most Commented Posts on Divi
Alright, next we’re moving on to display the most commented posts on Divi. The process is much the same as what we did with Gutenberg: adding custom code, customized CSS, and shortcodes, but with changed code.
Add the Custom Code to the functions.php file
Navigate to the Theme File Editor page, and select the functions.php file. Afterward, paste the PHP snippet below at the end of the function file content. Next, update the theme file by clicking the Update File button.
// Shortcode to display most commented posts in a 3-column grid layout with fallback excerpt
function display_most_commented_posts_grid($atts) {
// Set default attributes
$atts = shortcode_atts(
array(
'posts_per_page' => 4, // Number of posts to display
),
$atts,
'most_commented_posts_grid'
);
// Query the most commented posts
$args = array(
'posts_per_page' => intval($atts['posts_per_page']),
'orderby' => 'comment_count',
'order' => 'DESC',
'post_status' => 'publish'
);
$most_commented_query = new WP_Query($args);
// Initialize output
$output = '';
if ($most_commented_query->have_posts()) {
// Grid container with a responsive class
$output .= '<div class="most-commented-posts-grid">';
while ($most_commented_query->have_posts()) {
$most_commented_query->the_post();
// Individual grid item
$output .= '<div class="grid-item">';
$output .= '<h2><a href="' . get_permalink() . '">' . get_the_title() . '</a></h2>';
// Display post thumbnail if available
if (has_post_thumbnail()) {
$output .= '<div class="post-thumbnail"><a href="' . get_permalink() . '">' . get_the_post_thumbnail(get_the_ID(), 'medium') . '</a></div>';
}
// Get the post excerpt or fall back to trimmed content
if (has_excerpt()) {
$excerpt = get_the_excerpt();
} else {
$excerpt = wp_strip_all_tags( get_the_content() ); // Strip tags from content
if (strlen($excerpt) > 75) {
$excerpt = substr($excerpt, 0, 75) . '...'; // Limit excerpt to 75 characters
}
}
$output .= '<p>' . esc_html($excerpt) . '</p>';
// Display comment count
$output .= '<p><strong>Comments:</strong> ' . get_comments_number() . '</p>';
$output .= '</div>'; // End grid item
}
$output .= '</div>'; // End grid container
wp_reset_postdata();
} else {
$output .= '<p>No posts found.</p>';
}
return $output;
}
// Create a shortcode for the function
add_shortcode('most_commented_posts_grid', 'display_most_commented_posts_grid');
Add the Custom CSS (Optional)
Next, you can add the additional CSS snippet to your Divi theme. Go to Divi -> Theme Options -> Custom CSS and paste the CSS code there.
/* Container for the most commented posts grid */
.most-commented-posts-grid {
display: flex;
flex-wrap: wrap; /* Ensure items wrap to next line */
gap: 20px; /* Space between grid items */
margin: 40px 0; /* Add margin to top and bottom */
justify-content: space-between; /* Even spacing between items */
}
/* Individual grid item */
.grid-item {
background-color: #fff; /* White background for each post card */
border: 1px solid #e5e5e5; /* Light grey border */
border-radius: 10px; /* Rounded corners */
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover effect */
text-align: center; /* Center align for content */
flex: 0 1 calc(33.333% - 20px); /* 3 columns with 20px gap */
box-sizing: border-box; /* Ensure padding and borders are included in width */
}
/* Hover effect for each grid item */
.grid-item:hover {
transform: translateY(-10px); /* Slight lift effect */
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); /* Darker shadow on hover */
}
/* Post title styling */
.grid-item h2 {
font-size: 1.8em;
color: #333;
margin-bottom: 15px;
transition: color 0.3s ease;
}
/* Hover effect for post titles */
.grid-item h2 a:hover {
color: #2d89ef; /* Divi-like accent color */
}
/* Post thumbnail styling */
.grid-item .post-thumbnail img {
width: 100%; /* Full width images */
height: auto; /* Maintain aspect ratio */
border-radius: 5px; /* Rounded corners on images */
margin-bottom: 15px;
transition: opacity 0.3s ease;
}
/* Hover effect on image */
.grid-item:hover .post-thumbnail img {
opacity: 0.9; /* Slight transparency on hover */
}
/* Excerpt text styling */
.grid-item p {
font-size: 1em;
color: #666;
line-height: 1.6em;
margin-bottom: 20px;
}
/* Comment count styling */
.grid-item p strong {
color: #2d89ef; /* Divi accent color for comment count */
}
- What did the CSS code do?
The CSS snippet creates a flexbox-based grid layout for displaying posts, with responsive spacing and hover effects for titles and images. The code ensures that the posts are visually appealing with smooth transitions, shadows, and accent colors that fit well with aesthetic design.
The design is clean, with a focus on readability and interactivity.
Add the Shortcode
Next, we’re going to add the shortcode to the page where you want to display the most commented posts.
Navigate to the Divi Visual Builder by creating a new page. Afterward, add a single column row and then insert the Code module inside the column. Next, copy the shortcode below and paste it into the available field.
[most_commented_posts_grid posts_per_page="6"]
Once you add the shortcode, your page will display the most commented posts. Don’t forget to save and publish your project if you want to.
3. Display the Most Commented Posts on Elementor
Unlike the previous two methods, Elementor has a default built-in feature to display the most commented posts on your page. So, you don’t need to add any custom code to display the commented posts.
To display the most commented posts on Elementor, you can customize the Posts widget to show posts based on their comment count. Here’s a step-by-step guide:
Add the Posts Widget
Go to the Elementor editor by creating a new page or selecting the existing one. Afterward, please search for the Posts widget and drag it to your desired container.
Set the Query Order
On the Content of your Posts widget settings, navigate to the Query option. Next, set the Order to Comment Count.
Once you’ve already set the order of your posts to Comment Count, the Posts widget will automatically display the orders for the most commented posts.
You can tweak and style up the widget with your preference to achieve the best looks. Don’t forget to save your page and publish it if you’ve finished it.
The Bottom Line
To display the most commented posts in WordPress using Gutenberg, Divi, and Elementor, we as a user can take advantage of various tools and widgets available in each builder.
Gutenberg and Divi don’t have a built-in feature to display the most commented posts, so utilizing and cooperating with the custom code and CSS code is a must you do. Elementor allows for a dynamic listing of posts using its built-in widget (Posts widget), so you don’t need to incorporate custom code and CSS code to display the most commented posts on your website.
In all three cases, customizing and optimizing the display of the most commented posts can help increase user engagement by highlighting content that generates high discussion.
