Have you ever wanted to add an About Me bio to your blog sidebar? Today I’ll show you how easy it is.
Your blog sidebar is an important area of your site but it’s often overlooked. If you’ve left the default WordPress widgets there, there’s a lot of unnecessary info in your sidebar. Your readers don’t need those Meta links, or a list of your recent posts, since that’s the same as the first page of your blog.
And you’re probably missing a few essential things that help you connect with your readers and keep them engaged and reading further through your site.
An About Me section is one of those.
You see them on a lot of blogs: at the very top of the sidebar there’s a photo of the author and a short introduction to them and the site.
Your home and about pages are usually the most visited pages on your site. That’s because we love to know more about the people we’re working with or taking advice from. People are nosy curious!
But not every visitor to your site will arrive on your home or about pages. They might arrive straight at a blog post, and won’t have seen your about page. They probably know nothing about you. So having a short bio in your sidebar provides that introduction to you and your business. It also provides an easy link for them to find out more about you if they want.
[Tweet “Is your blog missing this important detail?”]
Let’s add an About Me bio to your blog sidebar.
Firstly, you’re going to upload an image.
You might also like: How to prepare images for your website
In your WordPress dashboard, go to Media > Add New. Drag the image you want to use onto this screen and once it’s uploaded, click Edit.
Add some Alternative Text to the image. This is used by screen readers and by search engines to determine what the image is about. Click on Update.
Now, open a new browser tab. This makes the next steps easier as you’re going to copy and paste the info from the image into a new widget.
Create your widget.
In the new tab, go to Appearance > Widgets.
In the left column you see a list of the available widgets and on the right you see the available sidebar/s. Depending on your theme, you may only have one sidebar/widget area, or you may have several. Find the one that’s your blog sidebar – in my case, you can see that’s the Primary Sidebar.
Drag a text widget from the left to the top of your sidebar.
Add a title to your widget, like “Hello”.
Next you’re going to add in your image. Copy and paste this code into your widget:
<img src="http://www.image-url.png" class="aligncenter" width="164" height="164" alt="Put your alternative text here" />
Replace http://www.image-url.png with the file URL of your image. Leave the quotation marks intact or the code will break.
Where you see width=”164″ height=”164″, replace those numbers with your image’s dimensions.
And replace Put your alternative text here with your image’s Alternative Text.
You’ll see I’ve also added in some code that will centre the image: class=”aligncenter”. If you don’t want that, just delete that part.
Next, add a subtitle. Here’s the code:
<h4>I'm Fiona</h4>
This is an h4 heading. The text is surrounded by the HTML tags <h4> </h4> that tells your web browser how to style the text. Replace I’m Fiona with your own text, and be sure to leave the HTML tags intact, including the brackets.
Now add some more text:
<p>I create lovely branding to help small businesses make a great first impression and attract more customers. </p>
These <p> </p> tags show that this is normal paragraph text. Customise this with your short bio.
And finally, add a link to your about page:
<p><a href="https://www.fionarobertsongraphics.co.uk/about/">Find out more</a></p>
Again, this is paragraph text, but there’s an extra bit of code that also turns it into a link – the <a> </a> tags. The opening <a> tag contains the address of the page you want to link to, so go ahead and replace https://www.fionarobertsongraphics.co.uk/about/ with the URL of your page. You need to include the http:// at the start or the link won’t work.
Let’s look at what this gives us:
All the content is there, but it would be nice to add more styling to make the widget stand out more.
So what you’re going to do is add some extra code.
[Tweet “Want to add an About Me bio to your blog’s sidebar? I’ll show you how”]
Style your widget
At the very top of your widget, right before you added the image, add this:
<div class="featureBox">
And at the very bottom, add this:
</div>
The <div> tags define this widget and lets you add some specific styling to it using CSS. I’ve called the class featureBox, but you can change that if you want.
Now, you need to create some styles for your div.
Click on Customize, either from the Appearance menu, or the WordPress admin bar you see at the top of your screen when you’re looking at the front end of the site.
Click on Additional CSS and you can add your styles there. Here’s the code:
.featureBox { text-align: center; background-color: #cce3e6; border-radius: 4px; padding: 10% 5% 5%; }
If you changed the name of your class, remember to change it here too.
Let’s take these line by line – and remember you can delete any of these you don’t want to use:
Firstly, you’ve centred the text.
The next line added a background colour. To customise that, just find the hex value (such as #cce3e6, #cccccc etc) of the colour you need. Your branding guidelines should include this info.
Next, you added slightly rounded corners to the box. Increase or decrease this by using a higher or lower number. Delete this line if you want square corners.
And because there’s a background colour, it’s good to add some padding to the inside of the box so the content doesn’t reach right to the edge of the coloured box. Again, increase or decrease that by changing the numbers.
Why are there 3 values here? The first one (10%) adds padding to the top of the box. Next (5%) adds it to the right. The next 5% is for the bottom. Left doesn’t need to be defined as it’s the same as the right one. You could add in a fourth number, like 8%, if you don’t want equal space at either side. And to make the top and bottom both 10%, just delete the third value.
What does that look like?
As with mine, your widget title (Hello) probably falls outside the coloured box. That’s easily fixed. Simply, delete the widget title and add it into your h4 heading instead, giving us:
And that’s how you add an About Me bio to your blog sidebar!
Never miss a post
Sign up for actionable WordPress tips and advice, plus exclusive tips and offers, just for subscribers.