WordPress Mini Tutorials: How to Create a Sidebar About Me Widget for the Absolute Beginner

Today’s tutorial is an extra quick one. If you are new to blogging, I have several posts already covering such topics. These include writing content, designing your site, choosing a hosting platform, and networking. Today we will focus specifically on one element of your blog…your About Me. Often, blogs will include a widget in their side bar showcasing the writer and a few notes about them. Bloggers may also include an About Me page, which goes into more depth about the author or creative team.

To create a widget, there are several methods you can use. The first step is to access your widgets, which can be done by either going to the admin page (appearance -> widgets) or to the live page editor (your site top bar -> customize -> widgets). Once you get to widgets, you can create your “About Me” using either a Text widget or an Image widget.


Option 1: Add Simple Text Code

One option if you are looking for something very simple is to add a text widget and insert code. You can simply copy and paste this code into the text box, and add your information:

<a class=“image-hover” href=WEBSITE WHERE YOUR IMAGE IS FROM><img class=“img-none” src=URL OF YOUR IMAGE></a><p class=“sidebar-caption”>YOUR ADDITIONAL TEXT <br /> <a href=YOUR WEBSITE ABOUT ME PAGE URL><input type=“button” value=“About Me” /></a> </p>

What this code will give you is a section that is titled “About Me”, followed by your image, followed by your text, and ends with a button you can link to your About page (or other page of choice).

Option 2: Add an Image of Your About Me Section

Another option that allows you to customize further without in depth knowledge of code is to add a completed image instead. For my About Me, I created what I wanted my widget to look like on a free software program called Inkscape. You can use a different digital editor, illustrator, etc. if you would like.

You can choose to make yours with or without a background. Mine has a white background (a white rectangle underneath), but if you did not want one you can do that too. In this case, you would want to make sure there are no white objects (or other unwanted objects) on the page when you save.

To make my image a circle, I imported my image as normal, then selected my image and pressed “CTRL -> D” on my keyboard to make a duplicate (you must do this step first before moving on to the others!). You can delete the original image.

Next, go to “Object” at the top of your screen and select “object to path”.

The next step is to go to “Object” again and open the “Fill and Stroke” panel. A panel will open on your right with the color wheel. Right above the color wheel there are four boxes with fill options, including a circular gradient, linear gradient, etc. Make a square on your screen, then select the checkerboard box on the fill and stroke panel. Your image will appear in that square.

You can now make a circle where you want it, select both your image and the circle, go to “Path” on the top of your screen, and select “Intersection”. This will cut out your image in the shape of the circle.

Now for some customization. Overlapping images and text will get you that professional feel, so you may want to consider adding these touches. As you can see with my About Me Widget, I have text that overlaps my image and matches the buttons on my website.

Speaking of overlapping text, professional typefaces are also a must. Yes, programs like Inkscape do come with a variety of fonts, but they can be overused. There are a variety of sites that offer royalty-free fonts and images, but one easy place you can go to is Google Fonts. Google Fonts has a wide variety all in one place. Simply select a font (or several) and download to your computer. They will download in a zipped folder, which you can extract but there is no need. What you do need to do is install the font, which you can do by right clicking the actual file and selecting “install”. Your newly downloaded font should then be viewable in the list of fonts within Inkscape.

Once you have your image ready, you can use the Image widget to insert the image and link it to a url on your site, such as your About Me or Contact Us Page.

Thank you for reading! Did you find this tutorial helpful? What tutorials would you like to see in the future? Let me know in the comments below.

Let's Talk

This site uses Akismet to reduce spam. Learn how your comment data is processed.