Add verified checkmark to Post Authors (Divi, Standard Theme and wpDiscuz)

Hi,

we are using Divi and wpDiscuz and we wanted to make sure, that people knew, when we we’re writing our responses, that it’s actually us. Therefore, we used this Code Snippet to add a verified checkmark with a responsive overlay when scrolling above it or clicking on it (on mobile).

This Snippet adds a change to the Name of Authors. When you go to an profile and hit the checkbox “Is this user verified”, then they will get a verified Icon behind their Name.

To ensure, that no one misuses this, we highly recommend, allowing only administrators to add HTML Tags to their Author Bio or Name.

Add this code to your functions.php, or via Code Snippet Plugin. Change the Line “Offizielles Konto. Verifiziert von gooloo.de.” according to your needs.

This Version is made specifically for Divi and wpDiscuz

// Add a custom checkbox for verification in user profiles
function add_verified_user_meta_field($user) {
    if (current_user_can('administrator')) { ?>
        <h3>Verified User</h3>
        <table class="form-table">
            <tr>
                <th><label for="verified_user">Verified User</label></th>
                <td>
                    <input type="checkbox" name="verified_user" id="verified_user" value="1" <?php checked(get_user_meta($user->ID, 'verified_user', true), 1); ?>>
                    <span class="description">Check this box to mark the user as verified.</span>
                </td>
            </tr>
        </table>
    <?php }
}
add_action('show_user_profile', 'add_verified_user_meta_field');
add_action('edit_user_profile', 'add_verified_user_meta_field');

// Save the custom field value
function save_verified_user_meta_field($user_id) {
    if (!current_user_can('administrator')) {
        return false;
    }
    update_user_meta($user_id, 'verified_user', isset($_POST['verified_user']) ? 1 : 0);
}
add_action('personal_options_update', 'save_verified_user_meta_field');
add_action('edit_user_profile_update', 'save_verified_user_meta_field');

// Append the verified badge to author names
function add_verified_badge_to_author_name($display_name, $user_id) {
    if (get_user_meta($user_id, 'verified_user', true) && strpos($display_name, '<span class="verified-badge"') === false) {
        $display_name .= ' <span class="verified-badge" title="Offizielles Konto. Verifiziert von gooloo.de."><i class="fa-solid fa-check"></i></span>';
    }
    return $display_name;
}

// Shortcode to display any author's name with a checkmark if verified
function shortcode_verified_author() {
    // Get the ID of the post's author
    $user_id = get_the_author_meta('ID');
    $display_name = get_the_author_meta('display_name', $user_id);

    // Return the author's name with the checkmark if verified
    return add_verified_badge_to_author_name($display_name, $user_id);
}
add_shortcode('verified_author', 'shortcode_verified_author');

// Apply filters to various functions that output author names
add_filter('the_author', function($name) {
    $author_id = get_the_author_meta('ID');
    return add_verified_badge_to_author_name($name, $author_id);
});

add_filter('get_the_author_display_name', function($name, $user_id) {
    return add_verified_badge_to_author_name($name, $user_id);
}, 10, 2);

// Ensure compatibility with wpDiscuz and other comment systems
add_filter('get_comment_author', function($author) {
    $comment = get_comment();
    if ($comment && $comment->user_id) {
        return add_verified_badge_to_author_name($author, $comment->user_id);
    }
    return $author;
});

add_filter('wpdiscuz_comment_author', function($author, $comment) {
    if ($comment->user_id) {
        return add_verified_badge_to_author_name($author, $comment->user_id);
    }
    return $author;
}, 10, 2);

// Prevent wpautop from adding line breaks around shortcodes
remove_filter('the_content', 'wpautop');
add_filter('the_content', function($content) {
    return wpautop(do_shortcode(shortcode_unautop($content)));
}, 99);

Additionally, you need the following CSS:

.verified-badge {
    display: inline-block;
    color: #1877F2; /* Facebook blue */
    margin-left: 5px; /* Spacing between name and badge */
    position: relative;
    cursor: pointer;
}

.verified-badge:hover::after,
.verified-badge:focus::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: #fff;
    padding: 5px 10px;
    border-radius: 6px;
    white-space: nowrap;
    z-index: 1000;
    opacity: 1;
    visibility: visible;
    font-size: 12px; /* Adjusted font size for tooltips */
}

.verified-badge::after {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-in-out, font-size 0.2s ease-in-out;
}

/* Ensure proper scaling on smaller devices */
@media (max-width: 768px) {
    .verified-badge:hover::after,
    .verified-badge:focus::after {
        font-size: 10px; /* Smaller font size for mobile */
        max-width: calc(100vw - 20px); /* Ensure tooltip fits within screen width */
        word-wrap: break-word; /* Wrap text if necessary */
        text-align: center;
    }
}

This Version is made specifically for the Standard Comments and Themes (in this case Twenty Twenty-Four):

// Add a custom checkbox for verification in user profiles
function add_verified_user_meta_field($user) {
    if (current_user_can('administrator')) { ?>
        <h3>Verified User</h3>
        <table class="form-table">
            <tr>
                <th><label for="verified_user">Verified User</label></th>
                <td>
                    <input type="checkbox" name="verified_user" id="verified_user" value="1" <?php checked(get_user_meta($user->ID, 'verified_user', true), 1); ?>>
                    <span class="description">Check this box to mark the user as verified.</span>
                </td>
            </tr>
        </table>
    <?php }
}
add_action('show_user_profile', 'add_verified_user_meta_field');
add_action('edit_user_profile', 'add_verified_user_meta_field');

// Save the custom field value
function save_verified_user_meta_field($user_id) {
    if (!current_user_can('administrator')) {
        return false;
    }
    update_user_meta($user_id, 'verified_user', isset($_POST['verified_user']) ? 1 : 0);
}
add_action('personal_options_update', 'save_verified_user_meta_field');
add_action('edit_user_profile_update', 'save_verified_user_meta_field');

// Append the verified badge to author names
function add_verified_badge_to_author_name($display_name, $user_id) {
    if (get_user_meta($user_id, 'verified_user', true) && strpos($display_name, '<span class="verified-badge"') === false) {
        $display_name .= ' <span class="verified-badge" title="Offizielles Konto. Verifiziert von gooloo.de."><i class="fa-solid fa-check"></i></span>';
    }
    return $display_name;
}

// Shortcode to display any author's name with a checkmark if verified
function shortcode_verified_author() {
    // Get the ID of the post's author
    $user_id = get_the_author_meta('ID');
    $display_name = get_the_author_meta('display_name', $user_id);

    // Return the author's name with the checkmark if verified
    return add_verified_badge_to_author_name($display_name, $user_id);
}
add_shortcode('verified_author', 'shortcode_verified_author');

// Apply filters to various functions that output author names
add_filter('the_author', function($name) {
    $author_id = get_the_author_meta('ID');
    return add_verified_badge_to_author_name($name, $author_id);
});

add_filter('get_the_author_display_name', function($name, $user_id) {
    return add_verified_badge_to_author_name($name, $user_id);
}, 10, 2);

// Ensure compatibility with wpDiscuz and other comment systems
add_filter('get_comment_author', function($author) {
    $comment = get_comment();
    if ($comment && $comment->user_id) {
        return add_verified_badge_to_author_name($author, $comment->user_id);
    }
    return $author;
});

add_filter('wpdiscuz_comment_author', function($author, $comment) {
    if ($comment->user_id) {
        return add_verified_badge_to_author_name($author, $comment->user_id);
    }
    return $author;
}, 10, 2);

// Prevent wpautop from adding line breaks around shortcodes
remove_filter('the_content', 'wpautop');
add_filter('the_content', function($content) {
    return wpautop(do_shortcode(shortcode_unautop($content)));
}, 99);

Additionally, you need the following CSS:

.verified-badge {
    display: inline-block;
    color: #1877F2; /* Facebook blue */
    margin-left: 5px; /* Spacing between name and badge */
    position: relative;
    cursor: pointer;
}

.verified-badge::after {
    content: attr(title); /* Tooltip text */
    position: absolute;
    bottom: 100%; /* Position above the badge */
    left: 50%;
    transform: translateX(-50%);
    background-color: #333; /* Dark background for tooltip */
    color: #fff; /* White text */
    padding: 5px 10px;
    border-radius: 6px;
    white-space: nowrap;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
}

.verified-badge:hover::after,
.verified-badge:focus::after,
.verified-badge:active::after {
    opacity: 1;
    visibility: visible;
}

/* Adjustments for mobile devices */
@media (max-width: 768px) {
    .verified-badge::after {
        font-size: 12px; /* Smaller font size for mobile */
        max-width: calc(100vw - 20px); /* Ensure tooltip fits within screen width */
        word-wrap: break-word; /* Wrap long text if necessary */
        text-align: center;
        bottom: auto; /* Position below the badge for better visibility */
        top: 125%;
    }
}