How to Add a Verified Badge to Author’s Name in WordPress (Without Plugin)
Adding a verified badge to author names in WordPress is a great way to show your readers that the authors of your blog posts are who they say they are. This can help build trust and credibility with your website visitors and make your blog posts more visually appealing.
In this article, we will show you how to add the verified badge to the author’s name in WordPress without the help of any third-party plugin.
Steps to Add a Verified Badge to Author’s Name in WordPress (Without Plugin)
Step 1: Select Your Preferred Verified Badge Icon
First, you need to select the icon you want to set as a verified badge to the author’s name. Many great icon libraries and toolkits are available online, such as Font Awesome, Iconify, etc. (Read: 8 Best Font Awesome Alternatives for SVG Icons).
In this tutorial, we will use Iconify to search for the icons we want to use as a verified badge to the author’s name. Iconfy allows us to use many open-source icon sets with a wide choice of open-source icon components and enables us to use the icons in CSS.
Alright, go to the Iconify site, then search and choose what icon you like to use as a verified badge to the author’s name.
Once you’ve selected your icon, you can customize the icon to your liking. In this example, we add a blue color to the icon.
Alright, we come to the last thing to do in this step; copying the icon’s CSS code.
Navigate to the Code for “Your-Icon” for developers section and set it to HTML and CSS. Afterward, copy all the code and place it in another file on your computer because we will use this code later.
Step 2: Identify the CSS Class of the Author’s Name
Next, you must find out the CSS class of your author’s name; each Author Name element might have a different CSS class depending on your WordPress theme. We will use the Author’s class to write the CSS snippet in the next step.
Open any blog post you have posted, navigate to your post’s author name, and then right-click on it. After that, click Inspect.
Once you click the Inspect, you will see the CSS class of the author name element on the right screen area. For our theme, the author’s class is set to be author-name.
Step 3: Add the Additional CSS
Once you’ve discovered the author’s class and got the CSS codes of your verified badge icon, it’s time to add the CSS snippet to your WordPress Additional CSS.
On your WordPress dashboard, go to Appearance -> Customizer -> Additional CSS.
Note: If you’re using a block theme, click here to learn how to enable Theme Customizer on your WordPress.
You can copy the CSS snippet below and paste it into the Additional CSS field if your author’s class is the same as us “author-name” and you are happy with our verified badge icon as we’ve just created in step one.
Once you finish adding the CSS snippet, apply it by clicking the PUBLISH button.
That’s it. As you can see from the image above, once you add the CSS snippet to the Additional CSS field, the verified badge is added after the author’s name. Feel free to customize the size and margin of your verified badge by modifying the property values on the CSS snippet.
The Bottom Line
In this article, we showed you how to add a verified badge to an author name in WordPress without the help of any plugin. The steps involve selecting a preferred verified badge icon, customizing it using tools like Iconify, copying the icon’s CSS code, identifying the CSS class of the author’s name element, and adding the necessary CSS code snippet to the WordPress Additional CSS section. Following these steps, you can successfully add the verified badge after the author’s name, as illustrated in the provided images and instructions.
Explore the possibilities of customizing the verified badge to elevate the overall user experience and make your content stand out. We hope this article is helpful, and if you have any questions or feedback, please don’t hesitate to contact us.
----------------
Steps to Add a Verified Badge to Author’s Name in WordPress (Without Plugin)
Step 1: Select Your Preferred Verified Badge Icon
First, you need to select the icon you want to set as a verified badge to the author’s name. Many great icon libraries and toolkits are available online, such as Font Awesome, Iconify, etc. (Read: 8 Best Font Awesome Alternatives for SVG Icons).
In this tutorial, we will use Iconify to search for the icons we want to use as a verified badge to the author’s name. Iconfy allows us to use many open-source icon sets with a wide choice of open-source icon components and enables us to use the icons in CSS.
Alright, go to the Iconify site, then search and choose what icon you like to use as a verified badge to the author’s name.
Once you’ve selected your icon, you can customize the icon to your liking. In this example, we add a blue color to the icon.
Alright, we come to the last thing to do in this step; copying the icon’s CSS code.
Navigate to the Code for “Your-Icon” for developers section and set it to HTML and CSS. Afterward, copy all the code and place it in another file on your computer because we will use this code later.
Step 2: Identify the CSS Class of the Author’s Name
Next, you must find out the CSS class of your author’s name; each Author Name element might have a different CSS class depending on your WordPress theme. We will use the Author’s class to write the CSS snippet in the next step.
Open any blog post you have posted, navigate to your post’s author name, and then right-click on it. After that, click Inspect.
Once you click the Inspect, you will see the CSS class of the author name element on the right screen area. For our theme, the author’s class is set to be author-name.
Step 3: Add the Additional CSS
Once you’ve discovered the author’s class and got the CSS codes of your verified badge icon, it’s time to add the CSS snippet to your WordPress Additional CSS.
On your WordPress dashboard, go to Appearance -> Customizer -> Additional CSS.
Note: If you’re using a block theme, click here to learn how to enable Theme Customizer on your WordPress.
You can copy the CSS snippet below and paste it into the Additional CSS field if your author’s class is the same as us “author-name” and you are happy with our verified badge icon as we’ve just created in step one.
Once you finish adding the CSS snippet, apply it by clicking the PUBLISH button.
That’s it. As you can see from the image above, once you add the CSS snippet to the Additional CSS field, the verified badge is added after the author’s name. Feel free to customize the size and margin of your verified badge by modifying the property values on the CSS snippet.
The Bottom Line
In this article, we showed you how to add a verified badge to an author name in WordPress without the help of any plugin. The steps involve selecting a preferred verified badge icon, customizing it using tools like Iconify, copying the icon’s CSS code, identifying the CSS class of the author’s name element, and adding the necessary CSS code snippet to the WordPress Additional CSS section. Following these steps, you can successfully add the verified badge after the author’s name, as illustrated in the provided images and instructions.
Explore the possibilities of customizing the verified badge to elevate the overall user experience and make your content stand out. We hope this article is helpful, and if you have any questions or feedback, please don’t hesitate to contact us.
Comments
Post a Comment