How to add a verified badge to your author-name in WordPress [easy]

On Instagram, Facebook, and other social media, the verified badge or the check icon confirms that the account is the authentic presence of the public figure, celebrity, or brand.

On WordPress, the check symbol gives more value to posts written by trusted users and credible writers.

Adding a verified badge next to your author’s name on your own site/blog is very easy. There are many ways to do it, but we’ll share with you the best/quickest way. In 4 steps only, no coding or WP plugins are required (as WP plugins might slow your site).

1. Prepare the Checkmark

The check symbol must be an image, you can choose any format, but an SVG is very recommended, so your check symbol doesn’t look pale, blurred, or pixelized when resized.

You can use the same one that we’re using for browntips.com, to do that:

data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 41.1 40.6'><path fill='brown' d='M41.1 21.4c.1-1.6-1.5-3.1-3.9-4 2-1.7 2.9-3.7 2.3-5.2-.6-1.4-2.6-2.1-5-1.9.9-2.3.9-4.3-.2-5.4-1.2-1.1-3.3-.8-5.4.4-.1-2.5-1-4.4-2.5-4.8-1.6-.5-3.4.8-4.9 3C20.3 1.2 18.6-.2 17 .1c-1.6.3-2.7 2.1-3 4.6-2-1.5-4.1-1.9-5.4-1-1.4.9-1.6 2.9-.9 5.2-2.4-.4-4.4 0-5.2 1.4-.8 1.4 0 3.4 1.7 5.3-2.5.7-4.2 2-4.2 3.6-.1 1.6 1.5 3.2 3.9 4C2 25 1 27 1.7 28.5c.6 1.5 2.6 2.1 5 1.9-.9 2.3-.9 4.3.2 5.4 1.2 1 3.3.8 5.4-.4.1 2.5 1 4.3 2.5 4.8 1.6.5 3.4-.8 4.9-3 1.2 2.3 2.9 3.7 4.5 3.4 1.6-.3 2.7-2.1 3-4.6 2 1.5 4.1 1.9 5.4 1 1.3-.9 1.5-3 .8-5.3 2.4.4 4.4 0 5.2-1.4.8-1.4 0-3.4-1.7-5.3 2.5-.7 4.2-2 4.2-3.6z'/><path fill='%23FFF' d='M30.2 16.5L19.1 27.6c-.2.2-.6.3-.9 0l-7.3-5.9c-.6-.6-.6-.9 0-1.5l2-2c.8-.8 1-.6 1.6 0l3.6 2.8c.2.2.6.2.8-.1l7.9-8.1c.6-.6.9-.7 1.5 0l2 2c.6.8.7.9-.1 1.7z'/></svg>

1. Copy and open the SVG image script above, in your browser (you’ll be able to see the SVG preview).
2. In the address bar, you’ll find “fill=’brown'”, change that color with any other color you like or prefer, for example ‘black’, ‘green’, ‘lightblue’, ‘pink’… etc.
3. Click Ctrl+S on Windows, or Command+S on Mac to save your image.
4. Now your SVG is ready.

If you want, you can use any other checkmark image, just be careful not to download any, from a non-trusted source, as SVG images can contain malicious code, read more about it here. However, there is no security risk in creating and using your own SVG files.

2. Upload your SVG to WordPress

By default, WordPress doesn’t allow you to upload SVGs to your media library (due to the security risk we mentioned before), so, in order to do that, simply install the SVG Support plugin, which allows you to safely upload SVG files to your media library and use them like any other image.

Can I deactivate the SVG Support plugin after uploading my image? Yes, you can deactivate it, and still have your image uploaded, with no issues.

Now save your image’s URL, because we gonna use it later.

Important: You can use other websites’ images without having to upload them to your WordPress library, but it’s totally not recommended, as the image won’t show up if their website or server was down.

3. Inspect your element

Define the element you want to add a verified badge next to it. In our case, it’s the author’s name.

1. Go to any blog post
2. Right-click on the author’s name → Inspect
3. Copy what’s inside class=” “, usually something like ‘author-name’

Now that we have the class, let’s jump to step 4.

4. Add CSS

1. In your WordPress dashboard, hover over Appearance and click Customize.
2. Now click on Additional CSS, and paste the code below.
3. Replace the class name with yours (if not the same already).
4. Replace the background image URL with yours (definitely not the same).
5. You can also change the font size, as desired.

.author-name {
	font-size:14px;
        padding-right: 1.2em;
        background: right center / 0.9em no-repeat;
        background-image: url('https://browntips.com');
}

By now, the check badge should be up and visible on your site.

Basically, what we did is: set a background image for the author-name element, have it placed in the right-center, and added some space between it and the author’s name with the padding propriety.

That was it, enjoy your verified badge, and thank you for visiting Browntips.com.

Post by: Anselh, a blogging addict, WordPress fanatic, SEO writer, and online marketing expert. linkedin twitter