wpcanyon.com

Show Top Commentators in WordPress Without a Plugin

If you want to highlight your most engaged readers by showing the top commentators on your WordPress site, you might think you need a plugin. However, you can achieve this easily with a bit of custom code. This tutorial explains how to show top commentators in WordPress without a plugin, giving you full control and keeping your site lightweight.

Quick Fix: Display Top Commentators with Custom Code

1. Add a custom function to your theme’s functions.php file or a site-specific plugin to query and display top commentators.
2. Use a shortcode or call the function directly in your theme templates where you want the list to appear.
3. Style the output with CSS to match your site’s design.

Why This Happens

WordPress stores all comments in the database, including the author’s name and email. By querying this data, you can count how many comments each user has made and display a ranked list. Plugins automate this, but the underlying process is straightforward and can be done manually with a few lines of code.

Step-by-step: Show Top Commentators Without a Plugin

1. Backup your site: Before editing theme files, always back up your site or use a child theme.
2. Open your theme’s functions.php file: Access this via Appearance > Theme Editor or FTP.
3. Add the following function to fetch and display top commentators:

function get_top_commentators( $number = 5 ) {
    global $wpdb;

    // Query to get commenters and their comment counts
    $results = $wpdb->get_results( "
        SELECT comment_author, comment_author_email, COUNT(comment_author_email) AS comment_count
        FROM $wpdb->comments
        WHERE comment_approved = 1
          AND comment_author_email != ''
        GROUP BY comment_author_email
        ORDER BY comment_count DESC
        LIMIT %d
    ", ARRAY_A, $number );

    if ( empty( $results ) ) {
        return '<p>No commentators found.</p>';
    }

    $output = '<ul class="top-commentators">';
    foreach ( $results as $commentator ) {
        $avatar = get_avatar( $commentator['comment_author_email'], 48 );
        $name = esc_html( $commentator['comment_author'] );
        $count = intval( $commentator['comment_count'] );

        $output .= "<li>{$avatar} <strong>{$name}</strong> ({$count} comment" . ( $count > 1 ? 's' : '' ) . ")</li>";
    }
    $output .= '</ul>';

    return $output;
}

// Shortcode to display top commentators anywhere
function top_commentators_shortcode( $atts ) {
    $atts = shortcode_atts( array(
        'number' => 5,
    ), $atts, 'top_commentators' );

    return get_top_commentators( intval( $atts['number'] ) );
}
add_shortcode( 'top_commentators', 'top_commentators_shortcode' );

4. Use the shortcode [top_commentators number="5"] in posts, pages, or widgets to display the top 5 commentators.
5. Or call echo get_top_commentators(5); directly in your theme files where you want the list.

Discussion Settings & Styling

Make sure your WordPress Discussion Settings allow comments and that comments are approved to be counted.

To style the list, add CSS to your theme’s stylesheet or Customizer:

.top-commentators {
    list-style: none;
    padding: 0;
    margin: 0;
}

.top-commentators li {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.top-commentators img.avatar {
    border-radius: 50%;
    margin-right: 10px;
}

This CSS makes the avatars circular and aligns the list items neatly.

Common Pitfalls

• No comments showing: Ensure comments are approved and not spam.
• Empty author emails: Comments without an email are ignored to avoid counting anonymous users multiple times.
• Function placement: Adding code to a parent theme’s functions.php may be lost on updates. Use a child theme or site-specific plugin.
• Performance: On very large sites, the query might be slow. Consider caching the output.

Test & Verify

1. Place the shortcode [top_commentators] on a test page.
2. Visit the page and verify the list shows commenters with avatars and comment counts.
3. Test with different number values, e.g. [top_commentators number="10"].
4. Check on mobile and desktop to confirm styling.
5. Approve new comments and refresh to see the list update.

Wrap-up

Showing top commentators in WordPress without a plugin is simple and efficient. By adding a custom function and shortcode, you can engage your community and showcase your most active readers without bloating your site. Customize the code and styling to fit your theme and enjoy a more interactive site.

Works on

FAQ

Q: Can I limit the list to commenters on a specific post or category?

A: The provided code counts all approved comments site-wide. To limit by post or category, the query needs customization using comment_post_ID or joining with post taxonomy tables.

Q: How do I update the list automatically?

A: The list updates dynamically each time the page loads. For better performance on busy sites, consider caching the output with transients.

Q: Can I show commenters’ website links?

A:

Displaying What Time Ago a Post or Comment Is Published in WordPress

Showing how long ago a post or comment was published is a popular feature that improves user engagement and readability on WordPress sites. Instead of displaying a static date and time, you can show dynamic, human-friendly timestamps like “5 minutes ago” or “2 days ago.” This guide explains how to quickly implement this feature for both posts and comments using WordPress functions and custom code snippets.

Quick Fix

1. Use WordPress’s built-in human_time_diff() function to calculate the time difference between the current time and the post or comment date.
2. Modify your theme’s template files (e.g., single.php for posts, comments.php for comments) to replace the static date with a dynamic “time ago” string.
3. Optionally, add CSS styling to ensure the new timestamps fit your site’s design.

Why This Happens

By default, WordPress displays the published date and time in a fixed format (e.g., “March 15, 2024 at 3:00 pm”). While precise, this format can be less intuitive for users who want to quickly understand how recent a post or comment is. Using relative time (“time ago”) improves readability and user experience by providing context at a glance.

Step-by-step

1. Displaying “Time Ago” for Posts

Edit your theme’s single.php or wherever the post date is displayed. Replace the existing date output with the following code snippet:

<?php
$time_diff = human_time_diff( get_the_time('U'), current_time('timestamp') );
echo sprintf( esc_html__( '%s ago', 'your-text-domain' ), $time_diff );
?>

This code calculates the difference between the post’s publish time and the current time, then outputs it in a localized “X ago” format.

2. Displaying “Time Ago” for Comments

Edit your theme’s comments.php file or wherever comment dates are shown. Replace the comment date output with:

<?php
$comment_time = get_comment_time('U');
$time_diff = human_time_diff( $comment_time, current_time('timestamp') );
echo sprintf( esc_html__( '%s ago', 'your-text-domain' ), $time_diff );
?>

3. Optional: Adding a Title Attribute for Exact Date

For accessibility and clarity, you can add a tooltip showing the exact date on hover:

<?php
$exact_date = get_the_date();
$time_diff = human_time_diff( get_the_time('U'), current_time('timestamp') );
?>
<time title="<?php echo esc_attr( $exact_date ); ?>">
  <?php echo sprintf( esc_html__( '%s ago', 'your-text-domain' ), $time_diff ); ?>
</time>

Discussion Settings & Styling

WordPress’s Discussion settings do not affect how dates are displayed but control comment moderation and display options. To style the “time ago” text, add CSS targeting the <time> tag or a custom class you add around the timestamp.

Example CSS:

time.time-ago {
  color: #666;
  font-style: italic;
  font-size: 0.9em;
}

Wrap your PHP output in a <time class="time-ago"> tag for styling:

<time class="time-ago" title="<?php echo esc_attr( $exact_date ); ?>">
  <?php echo sprintf( esc_html__( '%s ago', 'your-text-domain' ), $time_diff ); ?>
</time>

Code Snippets

Here are reusable functions you can add to your theme’s functions.php or a custom plugin for cleaner templates.

/**
 * Returns a formatted "time ago" string for a post.
 *
 * @param int|null $post_id Post ID. Defaults to current post.
 * @return string Human-readable time ago string.
 */
function get_post_time_ago( $post_id = null ) {
    $post_id = $post_id ? $post_id : get_the_ID();
    $time_diff = human_time_diff( get_post_time('U', false, $post_id), current_time('timestamp') );
    return sprintf( esc_html__( '%s ago', 'your-text-domain' ), $time_diff );
}

/**
 * Returns a formatted "time ago" string for a comment.
 *
 * @param int|null $comment_id Comment ID. Defaults to current comment in loop.
 * @return string Human-readable time ago string.
 */
function get_comment_time_ago( $comment_id = null ) {
    $comment = $comment_id ? get_comment( $comment_id ) : get_comment();
    $time_diff = human_time_diff( strtotime( $comment->comment_date_gmt ), current_time('timestamp') );
    return sprintf( esc_html__( '%s ago', 'your-text-domain' ), $time_diff );
}

Usage in templates:

<?php echo get_post_time_ago(); ?>

<?php echo get_comment_time_ago(); ?>

Common Pitfalls

• Timezones: Always use current_time('timestamp') instead of time() to respect WordPress timezone settings.
• Translation: Wrap strings in esc_html__() or similar functions for localization.
• Theme Overrides: Some themes hardcode dates in JavaScript or use custom functions—check your theme’s documentation before editing.
• Caching: If you use caching plugins, dynamic “time ago” values may not update frequently. Consider using JavaScript for live updates if needed.

Test & Verify

1. Clear your site cache and browser cache.
2. Visit a single post page and verify the post date shows as “X ago.”
3. View comments and confirm comment dates also display “X ago.”
4. Hover over the timestamp to see the exact date if you added the title attribute.
5. Test on different devices and browsers to ensure consistent display.

Wrap-up

Displaying “time ago” for posts and comments in WordPress is…