How to Create an Author Bio Widget {Without Plugin}

Displaying a WordPress author bio sidebar widget makes a blog more attractive. It allows visitors to establish reciprocity with the author or owner of the website. A good author bio widget should match with the website’s global design since it can increase the engagement rate.

For increasing your network with people of the same interest you can provide your social profile links and hopefully, linkup hire-me, testimonial page as well.

In this article, I want to share how to create a bio section in your WordPress sidebar using default WordPress functionality. For this, you don’t need to install any external plugin instead some simple html and CSS modifications will give you a nice looking Author bio widget.

After following this tutorial you would be able to achieve something similar to this:

Remember that you can always tweak the color, shape, and alignment of elements of the bio widget. You just need to change the codes a little bit which is very simple. It will help you match the design of the widget to your website theme.

This tutorial is intended for the widget design I think looks good with my website theme.

The advantage:

• You would avoid one more plugin installation.
• You have complete control of the widget design.
• Hopefully, page performance won’t drop because of code injection by a plugin.

Check this article how performance impact your website.

Disadvantage:

• The additional CSS code you are going to use may disappear with the next theme update so either use a child theme or plugin for holding your CSS.

---

Let’s start creating the author bio widget…

A bio widget has three sections, title, image, and bio. You can customize the image as a circle, square size, etc. The bio section may have one, two, or three paragraphs and some links to your important page or social profiles.

We are going to use the default text widget of WordPress.

Now follow the steps below:

• Navigate to Appearance > Customize.
• On the customize panel click on Widgets.
• Now from the widget panel select the widget area where you want to display the author bio widget.
• I want to put the widget on the sidebar so in this tutorial I am selecting sidebar.

• Now click on Add a widget and select Text widget.
• First of all name your widget and that will be the Title. (I personally prefer not to add any title, you can choose yours)
• Now add media to the widget, that will be your profile picture.

• You can customize the profile image by cropping it in a circle shape or in square size, both look great.
• Once the image is added you can change its alignment by clicking on the image and using its editor controls.
• Next, you need to add your bio inside the text area.
• After all these changes you should get the output something like this.

---

Style the author bio widget

It’s time to fix the bad looking design with some matching widget style. Let’s do it using the WordPress default customizing tool. It’s recommended to use a child theme while customizing so that your work doesn’t get lost during the theme updates.

• First, you need to find out the widget ID by inspecting the page.
• If you are unable to find the ID please go through this tutorial.
• Now in the WordPress customize panel click on additional CSS.
• Add the following codes for your widget ID.

Here is the complete CSS:

#yourWidgetID
{
     background-color:#ffff;
     padding:30px;
     border-radius:10px
}

Make sure to replace the yourWidgetID with the real ID.

Once these steps are complete you can save the changes and the widget would look like this:

This is just an example, you can do a whole lot of customization with the Author bio widget.

If you are unable align the bio texts to the center then use <center> your bio</center> in HTML mode.

Using <center></center> is deprecated, I realized it was a poor idea to recommend, instead you should use CSS as text-align: center for a better of your personal description.

The final CSS will look something like this:

#yourWidgetID
{
     background-color:#ffff;
     padding:30px;
     border-radius:10px;
     text-align:center
}

Wrapping up: Try this out, its fun to customize your site design according to your idea. Regarding this article, if you have any query please place them in the comment section.

Also check out the following Siteground WordPress hosting offer.

Follow our social media profiles on Twitter and Facebook 🙂

Need help with getting stuff done? Try Fiverr! You can find content writers for your website at a reasonable rate.