Verified badge is a premium feature of most of the social networking sites including Elon Musk’s Twitter, LinkedIn, DeviantArt etc. The reason for charging money is that a verified badge works as social proof to increase the trustworthiness of the author. It is a marketing tool. When you are paying for your own self-hosted WordPress, why not verify your self for free? Especially if you already loading font awesome CSS, probably you have already loaded the icon. Adding 5-6 lines of CSS code will not increase the page loading speed.
We have extensively searched the internet and found that one guide on adding a verified badge using CSS has been copied by the others. As the initial guide had the wrong conclusion, others did the same blunder.
The CSS code is not unique because the target CSS class will defer depending on the theme. Also, using this method, you can not target any specific author. Trying more than what we are describing will open up security risks (writing a CSS snippet exposing the user ID may open the way for the hackers, hence we avoided “over-customize”).
---
How to Add the Verified Icon on StudioPress Genesis
It is very easy! Probably you are already using Genesis Simple Edits plugin. Navigate to the settings page of the plugin, besides “Entry Meta (above the content)”, you’ll find something like this:
1 | By [post_author_posts_link] [post_date] [post_time] Updated on [post_modified_date] |
Simply add the HTML markup of the icon class:
1 | By [post_author_posts_link] <i class="fa fa-check-circle" aria-hidden="true"></i> [post_date] [post_time] Updated on [post_modified_date] |
Save it. On the front end, you will get a verified badge beside the author’s name. But by default, the colour of the icon will be grey and small. You can adjust by adding CSS:
1 2 3 4 5 6 7 8 | <style> .fa-check-circle { color: #1DADFF; font-size: 135% !important; margin-right: 8px; margin-left: 2px; } </style> |
How to Add the Verified Icon on Any WordPress Theme
At the front end, right-click over the author name (in author meta), in the case of StudioPress Genesis, the HTML will be like this one:
1 2 3 4 | <p class="entry-meta">By <span class="entry-author" itemprop="author" itemscope="" itemtype="https://schema.org/Person"> <a href="https://thecustomizewindows.com/author/abhishek/" class="entry-author-link" itemprop="url" rel="author"> <span class="entry-author-name" itemprop="name">Abhishek Ghosh</span></a></span> <time class="entry-time" itemprop="datePublished" datetime="2023-05-23T17:59:02+00:00">May 23, 2023</time> <time class="entry-time" itemprop="datePublished" datetime="2023-05-23T17:59:02+00:00">5:59 pm</time> Updated on <time class="entry-modified-time" itemprop="dateModified" datetime="2023-05-23T17:59:02+00:00">May 23, 2023</time></p> |
As you can see, if you target the span class entry-author-name, you can achieve your desired goal. If in your theme, the class is named author-name, you should use that. So the name of the span class, markup and the existing CSS depends on the theme/child theme.
Suppose, you have already loaded Font Awesome icon fonts, like we have loaded this one:
1 | https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css |
In case of Font Awesome, then the possible candidate’s documentation is here:
1 2 | https://fontawesome.com/v4/icon/check-circle https://fontawesome.com/v4/examples/ |
Open the theme/site customizer from the WordPress admin page, add the below CSS in the field saying “Additional CSS”,
Click on the “Publish” button after adjusting the size, margin, colour etc:
1 2 3 4 5 6 7 | .entry-author-name:after { content: '\f058'; font-family: FontAwesome; font-size: 15px; margin-left:5px; margin-right:5px; color: #1DADFF;} |
