How to Pin Comment in WordPress (without a Plugin)

Pinning a comment in WordPress is a great way to highlight important feedback, questions, or discussions within your posts.

By pinning a comment, you ensure that it stays at the top of the comment section, making it the first thing your readers see. This feature is particularly useful for drawing attention to insightful contributions or emphasizing key points that enhance the overall conversation on your blog.

This tutorial will guide you through the process of adding a pin comment feature to your WordPress site without the need for any plugins.

Pinning Comment in WordPress

Step 1: Integrating a Custom Code

To enable the pinning of comments in WordPress without installing a plugin, you’ll need to incorporate custom code into your website.

For a safer approach, add the code to the functions.php file of a child theme or create your own custom plugin.

Here’s the code that will help you achieve this:

function wpp_pin_comment() {
    add_meta_box(
        'pin_comment_meta_box',
        __('Pin Comment', 'textdomain'),
        'wpp_render_meta_box',
        'comment',
        'normal',
        'high'
    );
}
add_action('add_meta_boxes_comment', 'wpp_pin_comment');

function wpp_render_meta_box($comment) {
    $is_pinned = get_comment_meta($comment->comment_ID, '_pin_comment', true);
    wp_nonce_field('save_pin_comment_meta_box', 'pin_comment_meta_box_nonce');
    ?>
    <p>
        <label for="pin-comment"><?php _e('Pin this comment:', 'textdomain'); ?></label>
        <input type="checkbox" name="pin-comment" id="pin-comment" <?php checked($is_pinned, '1'); ?> value="1" />
    </p>
    <?php
}

function save_pin_comment_meta_box($comment_id) {
    if (!isset($_POST['pin_comment_meta_box_nonce']) || !wp_verify_nonce($_POST['pin_comment_meta_box_nonce'], 'save_pin_comment_meta_box')) {
        return;
    }

    if (isset($_POST['pin-comment'])) {
        update_comment_meta($comment_id, '_pin_comment', '1');
    } else {
        delete_comment_meta($comment_id, '_pin_comment');
    }
}
add_action('edit_comment', 'save_pin_comment_meta_box');
add_action('wp_insert_comment', 'save_pin_comment_meta_box');

function wpp_comments_order($comments) {
    $pinned_comments = [];
    $regular_comments = [];

    foreach ($comments as $comment) {
        if (get_comment_meta($comment->comment_ID, '_pin_comment', true) == '1') {
            $pinned_comments[] = $comment;
        } else {
            $regular_comments[] = $comment;
        }
    }

    return array_merge($pinned_comments, $regular_comments);
}
add_filter('comments_array', 'wpp_comments_order', 10, 2);

function add_pinned_comment_class($classes, $class, $comment_id) {
    if (get_comment_meta($comment_id, '_pin_comment', true) == '1') {
        $classes[] = 'pinned-comment';
    }
    return $classes;
}
add_filter('comment_class', 'add_pinned_comment_class', 10, 3);

This code will create a custom meta box on the comment edit screen, where you can select the ‘Pin this comment’ checkbox to pin the comment and move it to the top of the comment list.

If you choose to place the code in the child theme’s functions.php, navigate to Appearance → Theme File Editor from your WordPress dashboard to access the file and paste the code into the editor.

🚨 Theme File Editor is located under the Tools menu in block themes.

Don’t forget to save the changes by clicking the Update File button, then proceed to the next step.

Step 2: Pinning the Comment

To pin a comment, you need to log in as a user with edit comment capabilities.

Once logged in, click the Edit link for the comment you want to pin, either directly from the post or from the Comments menu in your WordPress dashboard.

At the bottom of the edit screen, you’ll find a dedicated section with a ‘Pin this comment‘ checkbox. Check the box and then click the Update button to pin the comment.

Now, the pinned comment will appear at the top of the comment list.

However, there’s one issue — pinned comments can still be mistaken for regular comments since there’s no visual distinction between them. Proceed to the next step to address this.

Step 3: Enhance Visibility of Pinned Comments

The code from the first step includes a function that assigns the pinned-comment custom class to the pinned comment.

To give the pinned comment a distinct appearance, you just need to add some custom CSS that targets the pinned-comment class.

Here’s a custom CSS snippet you can use to give the pinned comment a light yellow background with a golden border, along with a ‘Pinned Comment’ label above the comment:

/* Pinned comments style */
.pinned-comment {
    background-color: #fffbcc; 
    border: 2px solid #ffc107;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 5px;
    position: relative;
}

.pinned-comment::before {
    content: "📌 Pinned Comment";
    position: absolute;
    top: -10px;
    left: 10px;
    background-color: #ffc107;
    color: #fff;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: bold;
}

To implement the CSS snippet, from the WordPress dashboard, navigate to Appearance → Customize and access the Additional CSS section to place the snippet.

If you’re using a block theme, we have a separate article on how to enable the theme customizer specifically for block themes.

With these changes, pinned comments will now have a standout appearance, making them easily recognizable as important messages.

The Bottom Line

In this tutorial, you learned how to pin a comment in WordPress to highlight important feedback, questions, or discussions within your posts. By pinning a comment, you ensured it stayed at the top of the comment section, making it the first thing your readers saw.

This tutorial guided you through the process of adding this pin comment feature to your WordPress site without the need for any plugins.