Chris Bigelow

Disparate thoughts and musings…

Tutorial: WordPress.com Text Widgets

My last post was about how to add social media buttons to your VisualCV.  I got positive feedback on it so I thought I would follow it up with a tutorial on the “text” widget in WordPress.com.  This widget may be the least understood and underrated widget available to WordPress.com bloggers.  I’m no expert but am happy to share what I have learned.

I’m going to assume you know something about widgets.  If not, go to “Appearance”, “Widgets” and poke around.  There are lots of useful widgets and my dashboard reports that, as of this moment, I am using 20 on this blog.  But today we will talk specifically about the text widget.  Eleven of the 20 widgets I am using are text widgets.

What some people may not realize is that, in addition to plain vanilla text, this widget also supports a limited amount of HTML code which makes it extremely useful.  To illustrate, when I was first setting up my blog I added a blogroll with links to various blogs I feel are worth reading.  I categorized them too.  Imagine my dismay when I realized that both the categories and blog names were automatically alphabetized and there seemd to be nothing I could do about it (short of playing games with the names themselves).

Enter the text widget.  First, I looked at the source code for my blog to see what the HTML code was for the blogroll.  Mind you, I knew no HTML prior to this.  I then copied and pasted this code into a new text widget.  By keeping the format calls intact the rendered widget looked just like a normal blogroll.  Except that now I could manually rearrange the code to list the blogs in any order I wished.  A small triumph, perhaps, but it made my day.  As an example, the HTML code for my “Career Blogs” widget is as follows:

[sourcecode language=’html’]
<ul class=’snap_preview xoxo blogroll’>
<li><a href=”http://corcodilos.com/blog/&#8221; title=”Nick Corcodilos: The insider’s edge on job search &amp; hiring™” target=”_blank”>Ask The Headhunter®</a></li>
<li><a href=”http://www.hannahmorgan.typepad.com/&#8221; title=”Career Sherpa: Guide for lifetime career navigation” target=”_blank”>Hannah Morgan</a></li>
<li><a href=”http://personalbrandingblog.com/&#8221; title=”Navigating YOU to future success!” target=”_blank”>Personal Branding Blog</a></li>
<li><a href=”http://sirlinkedalot.com/&#8221; title=”Insights on job search, hiring, networking and all things LinkedIn” target=”_blank”>Sir LinkedAlot – a recruiter’s insights</a></li>
<li><a href=”http://blog.spinstrategy.com/&#8221; title=”Tools for Intelligent Job Search” target=”_blank”>Spin Strategy™</a></li></ul>
[/sourcecode]

So far so good.  Each section of my blogroll is a separate text widget so I can order the sections any way I wish.  I then used the text widget to create my social media links, complete with custom buttons.  The code for that widget is as follows:

[sourcecode language=’html’]
<br><a href=”http://www.linkedin.com/in/chrisbigelow&#8221; title=”Click here for LinkedIn profile”><img src=”http://www.linkedin.com/img/webpromo/btn_viewmy_160x25.gif&#8221; width=”170″ height=”27″ border=”0″ alt=”View Chris Bigelow’s profile on LinkedIn”></a>
<a href=”http://twitter.com/cbbigelow&#8221; title=”Click here for Twitter profile”><img src=”http://twitbuttons.com/buttons/siahdesign/twit1.gif&#8221; alt=”Twitter Button from twitbuttons.com” width=”170″></a>
<a href=”http://www.visualcv.com/chrisbigelow&#8221; title=”Christopher Bigelow’s VisualCV”>
<img src=”http://buttons.visualcv.com/visualcv_buttons/visualcv_button_without_head.jpg&#8221; width=”170″ border=”0″ alt=”Christopher Bigelow’s VisualCV”>
</a>
<a href=”http://www.google.com/profiles/C.B.Bigelow&#8221; title=”Click here for Google profile”><img src=”https://cbbigelow.files.wordpress.com/2009/05/google-chris-bigelow.gif&#8221; alt=”My Google Profile” width=”170″></a>
<a href=”http://www.facebook.com/people/Chris-Bigelow/734471596&#8243; title=”Click here for Facebook public profile”><img src=”https://cbbigelow.files.wordpress.com/2009/05/facebookwithlogo.jpg&#8221; alt=”My Facebook Profile” width=”170″></a>
<br><br>
[/sourcecode]

Everything in the fourth column of my blog and 60% of the third column is done with text widgets.  Poke around.  Play.  Discover.  And have some fun.

Clarification: To use my code you must remove the first and last lines of each example (the lines with the “sourcecode” tag in them).  These are required by WordPress.com for me to show you the code in my blog post – they have nothing to do with running it (actually, they are there specifically so it does not try to “run” in the body of the blog post).

Advertisements

7 Comments»

  moneyforstuff wrote @

Thanks Chris. I’m going to copy what you’ve done for LinkedIn into my blog. Great topic.

  Chris Bigelow wrote @

Hi, Michele.

Just looked at your blog and see that everything is working fine now. Looks good! Sorry about the confusion earlier. You might have noticed that I did edit the post to clarify that the sourcecode tags should be stripped out.

  Bill Griffin wrote @

Great posting Chris.

Chris I believe through your writing your teaching all of us. You figuer these things out with your engeneering mind and then disect and redistribute the info in easy to understand bite size pieces.

This is a highly sought after attribute. Not everybody with knowlege does this. It’s a testament to your charcter.

Keep up the teaching and the blogging, the world needs more people like you.

–Billy

  Chris Bigelow wrote @

Thanks, Billy.

I’m no expert on most of this stuff but I’m more than happy to share what I have learned, hopefully pushing a few people up the learning curve faster than I moved up it.

I’ve received feedback before from younger engineers regarding how they appreciated my mentoring. Maybe teaching is a calling?

  M. E. Leclerc wrote @

Hi,

I had such a mental block that I couldn’t figure out the arbitrary text button. Thanks for showing me a different angle…so that I could find it again, however I was trying to insert the networkedblogs widget into my page and it worked great after I read your posting but the FB app can’t read it.

Do you know if that issue can be mitigated?

Thanks

  Chris Bigelow wrote @

Hi, Maggie.

I’m glad that my post helped you better understand the Text Widget. I’m not sure I understand your question – can you email me at C.B.Bigelow at gmail dot com with additional details?

Chris

  M. E. Leclerc wrote @

Hi,

I confused myself. That’s what happens when one works too many hours with
too little sleep! ;o)

Problem solved. Thanks for the advice.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: