Verified Badge on WordPress: Add a Verified Badge to WordPress Authors Without a Plugin
We will be showing you the simple method on how to add a Verified Badge or icon to WordPress Authors on your post, without the use of any plugin. Let’s dive in to read some introduction before we proceed.
You don’t need to have the knowledge of CSS or HTML before you can do it, it’s very simple. You only need to understand the basic of codes and snippets that will used to add the verified badge or icon.
Overview
This article will show you how to add a verified badge to the profiles of multiple trusted authors on your WordPress blog, without the need for any plugins. This can be achieved by using a simple CSS code.
Are We Using Any Plugin to Add the Badge?
No, we will show you how to add the verified badge or icon to the profiles of multiple trusted authors on your WordPress blog, without the use of any plugin. Instead, we will be utilizing the CSS classes of author names specific to each WordPress theme.
Those It Apply to All the Authors or Only Admins?
The badge we plan to add will be available for all authors on your website. There’s the one for only selected author and the one for general authors. Since we are not using any external plugins, which may slow down the website, it will be a nice option to learn from us.
See How to Add Your Verified Badge
- You need to get a cdnjs link tag from font-awesome.
- You need to get the CSS class for your author class using the using inspect mood.
- You need to get your CSS code, which we will provide you with it here.
- You need to have a knowledge of how to add CSS code in your WordPress backend.
Follow all the necessary procedures and method we are going to show yoou on this section to make you add the verified badge successfully without any error in your blog or in your backend.
Read the Steps
Click on this link: Get Your cdnjs link tag here. see the screenshot below, it will guide you on how to copy the code. Copy the code, and add the code into any of your header, footer code inserter and save, make sure you save it as header snippet, or you add the code directly into your theme header.
Access your WordPress Dashboard, and then go to the “Appearance” section, in the upper-left corner of the appearance section, select “Customize” from the Dashboard menu.
Under your customize dashboard, scroll down to where they write additional CSS, click on it and paste the below CSS code in the empty space. Click on it and save, am sure by now you will see the icon appear right after the name of any author on your blog.
Here is the code, copy and paste it in the CSS field.
.author:after {
content: '\f058';
font-family: FontAwesome;
font-size: 13px;
margin-left:5px;
color:#800000;}
.author{
color:#800000;
}
You can change the color of the icon’ using the color code, change the margin to the left and change the font size of the badge to suit your theme color or design.
Find the Css Class Used for Author Name in Your Theme
To find the CSS class used for an author’s name on a blog post, follow these steps:
- Open a blog post in a separate tab.
- Right-click on the author’s name and select “Inspect.”
- Look for the CSS class used for that specific element, which is often “author-name.” Though my theme author class name is just “author.”
- Once you have found the class name, you can use it to customize the appearance of the author’s name in your theme’s settings. ((turbohosty.com))
Add Verified Badge to Selected Users
Use the below CSS code instead of the above one to add a verified badge or icon on your blog to selected authors.
.author-name[user_id=”123″]:after { content: ‘\f058’; font-family: FontAwesome; font-size: 13px; margin-left:5px; color:#800000; }
Follow the same prompt as the above instructions to add the selected author verified badge.
Importance of Using Verified Icon or Badge in Your Blog
A Verified Icon serves as a form of social proof, building trust between the author and readers. It serves as a psychological factor in determining the credibility of content.
The badge represents the exclusivity of a blog and is often viewed favorably by audiences. Our article on “Add a Verified Badge to WordPress Authors Without a Plugin” provides helpful information on this topic.
If you found it useful, please share your experiences or any challenges you faced while implementing it on your website.
the code to add the badge as a general badge to all users works no issues. However trying to use the code for giving specific users the badge via user_id is not working to display/add the badge on the users profile.
I had to change the .author to .user-name via my css class.
Does the user_id need to be a certain length of characters for example if im trying to add this to user_id=3 would it be user_id=”0003″?
Hi kody,
We have tried our possible best to find a way on how to add the code to specific authors, but to no avail.
We advise you look for a professional in coding to assist you get that done.
How can I display it in comment section.
We are currently working on it.