Create an ‘About Me’ Sidebar Widget with Post Editor in WordPress

This article was first published on: Oct 27, 2012.

Large blogs make excellent use of “About Me” pages. To get users there, 99% of the time they include a brief, intriguing “About Me Section” in their blog sidebar. In this post I’ll show you how to create that section. It’s as easy as writing a new post. In fact, we’ll be using the new post editor in WordPress to create this.

The post editor is one of the most versatile tools in WordPress, and hardly anyone knows it. What I’m about to show you is a clever little design hack, a trick so overlooked that it wasn’t even covered in Hongkiat.com’s list of 40 WordPress Hacks.

This trick is also great for learning some basic HTML and CSS, if you’re just getting started.

Create Your Message

All you need for this tutorial is your “About Me” page, a photo of yourself and some text. Your “About Me” page should focus on your accomplishments in blogging, engage the reader with some questions, and include pictures of you blogging. Already have this page made? Perfect.

Now, we’re going to take all this over to the WordPress new post editor. Open it up, and upload your image. We’ll be doing much of this from the HTML tab. When you upload an image WordPress automatically generates the HTML code for it. Go to the HTML tab, and create a space (hit enter) above your image. Then, write a little hook message here, something like “Who’s Behind this Site?” or even just “About Me.” Be creative.

Add a short, 3-4 sentence description meant to intrigue the reader. At the end of this text block, write a sentence like “Find out more here” and link to your actual About page.

Style Your Message

Now go the Visual Tab. Center your text. When you go back to HTML, you’ll notice that WordPress wrote some code for you, in the form of a “p style.” This is the beauty of creating widgets in the new post editor; WordPress autowrite codes for you! You then just add some basic CSS!

Create something like this:

<p style="text-align: center; font-size: 16px; font-family: georgia, arial, verdana;"> YOUR MESSAGE </p>

Make sure to close of the p style with a </p>.

And add any other CSS you can think of or need. Don’t know CSS? Just Google Search “CSS code for ____” and in the blank put what you’re trying to do. Then copy and paste the p style. Place it around your text block message below the image. Style it however you’d like, and close it off. If you forget to close a p style, it’s no big deal. The styling will apply to more text that you want it to, but everyone make this mistake at least once.

Use codes <em> to italicize and <strong> to bold your text, and remember to close those off too.

We’re done creating, for now, and it’s time for the fun to begin.

Place Your Work in the Sidebar

In the HTML tab, copy and paste everything you created. Go to the Appearance, Widgets tab, and drag a blank Text widget into your sidebar. Paste in your code. Then hit Save, and click over to your blog’s homepage. How does it look?

You’ll almost for certain want to make some modifications here. The image may be out of size, or the fonts may not show up as how you imagined but not to worry, you can edit all of this directly in the Text widget, or better yet, in your new post editor where you can preview changes more easily.

Fun Styling Features and Other Additions

CSS really is a fun game. Here are some ways to make this About Me section really pop.

1. Use exotic colors.
2. Use a dotted or color border.
3. Put an “Opt In” form right below your text. I use Aweber for these.
4. Add links to places your work was featured.
5. Throw in a joke, or be mysterious.

Video Tutorial

You can also watch the video tutorial for this post as below or on YouTube.

What’s Next?

Now that you’ve got a basic About Me section and About Me page, go browse other blogs to see what strategies and designs work for them. Take a few notes. Then, do some more research on your own readers.

Tailor your About Me exactly to what your readers want, and you’ll eventually start seeing more readers, commenters, and loyal subscribers. Put yourself in the sidebar and it’s well worth it in the end.