Build an “About Me” Widget

Posted by on Thursday, June 7, 2012 · Leave a Comment 

text widgetText widgets give you unlimited options for adding cool stuff to your WordPress website. If you’re not a web designer, though, you may not be taking advantage of this opportunity. You might open up that text widget, see the empty box, and close it again, discouraged.

No need. You can do it.

Certainly, if you want something fancy done, you should contact your designer or developer.But one of the great things about WordPress is that you can get in there and play around with stuff yourself. If you’d like to get started with text widgets, why not build an “About Me” widget for your WordPress blog?

Here you see one I’ve built for a site we’re creating. Look below to see the code, and I’ll explain it step by step.

NOTE: I know that developers and designers read this blog, as well as site owners. I’m not talking to you today. I’m talking to people who are not familiar with html or, as people outside the field call it, the weird looking stuff with pointy brackets you sometimes see on computers. This is for beginners.

First, go to the Widgets page at your WordPress website and find the widget that says “Text.”  Under it there’s a line saying “arbitrary text or html.” I never get why they suggest that you should put arbitrary text into this, when you could put in highly strategic, exciting, or lyrical text, but of course it’s up to you. Grab the widget. Pull it into your sidebar or other chosen widget area.

 

Open it up. At this point, you can simply type in text. If you’ve never done this before, give it a try and see how bad it looks on the website. Now look at the text and html in the “about robin” widget:

I’m assuming that you don’t know html — otherwise, you’d already know how to do this and there’s be no reason for you to be reading this. Don’t be intimidated. Computer languages are way easier than human ones, and you’re completely fluent in at least one of those.

Let’s look at each section. The first part is the picture.

<p align=”center”><img src=”http://wordpress.sharphue.com/~robinspi/wp-content/uploads/2012/06/220px-Robin_Spielberg.jpg”/></p>

The bits on the outside edges, <p> and </p>, stand for “open paragraph” and “close paragraph.” They are simply telling the browser that you want to make something behave nicely on the page when people look at it. With a picture, you could skip this, but it’s an easy way to put the picture where you want it. In this case, we’ve said to put the picture in the middle of the space:

<p align=”center”>

This is an old-fashioned way to communicate with the computer, so don’t use it if you decide to build a website or anything, but for a widget, it’s fine.

Now we have to tell the browser where to get the picture. “img src” stands for “image source,” and it tells the computer where to find the picture. Choose a picture from your media library and copy the location — that’s the part that begins with “http.”

<img src=”PUT THE URL OF YOUR PICTURE HERE”/>

Again, this can be done in other ways and usually is, but we want this to be easy, so just cut and paste. Don’t skip any of the punctuation — the equals sign, quotation marks, brackets, and slashes all matter. Save your work and look at the website. Is your picture there, nicely centered? If not, chances are good that you’ve left out some little piece of the code. Try again.

Now we want a bit of space between the picture and the words, so we’ll ask for a break:

<br/>

We’re through with the picture and ready to put in text. We don’t want that to be centered, so we’ll give some new instructions:

<div style=”margin:15px;”>

“div” stands for “division.” This says, “We want a new section. Also let me tell you something about the style we want. We want to have margins.” Margin means space around the words, so they don’t smash up against the edge of the widget’s box and look ugly. We want 15 pixels here, pixels being the unit of measurement. You might want 10 or 20, but don’t get carried away. 3 pixels or 30 pixels will look odd.

Next we want to write a paragraph, so we use the <p> again. Type whatever you want to say and then close up that paragraph with </p>. You can write more than one paragraph if you like. Just put the <p> and </p> tags on each side of each paragraph.

Finally, tell the computer that you’re through with this division by putting down </div>. You see how similar it is to </p>?

Save your work and have a look. Is it the way you want it to be? If not, go make some changes. Check to see that the punctuation is just as it should be, change the number of pixels for the margin, or add a break.

Was this incredibly fun and easy? Are you wishing that you knew more so that you could get in there and create marvelous text widgets that do all kinds of clever things? Here are some books that I like for learning html:

 

Filed under SEO, WordPress · Tagged with

Speak Your Mind

Tell us what you're thinking...
and oh, if you want a pic to show with your comment, go get a gravatar!