Category Archives: WordPress Widgets

Widgets: Less is More

Posted on by
Widgets generally  accomplish one or more of the following things:
  1. improve the functionality of a site by providing reader accessibility to content that is not located on the front page;
  2. act as leaders for e-commerce or other transactions;
  3. promote and lead traffic to the site serving the widget;
  4. redirect readers to high quality sources of relevant information found in authoritative blogs in the same niche.

Keeping the amount of widgets and other sidebar clutter to a minimum may seem like common sense to veteran bloggers but to new bloggers the lure of adding widgets may be too overwhelming to pass up.  However, a  common mistake  beginner bloggers make  is the  overuse widgets as sidebar decorations, methods of bragging,  and as space fillers,  because they fail to consider the following:

  1. the impact of  the amount of script they have running on their blogs on their readers experience;
  2. the collection of  reader information (computer ip,  location, browser type and version) that some widget use results in; and
  3. how all those widgets clutter the 12 inch screen of laptops.

Widgets as spoilers

Widgets don’t only spoil the design and give the blog an amateurish appearance, but they also compromise blog speed (page loading time), in short viewers have to wait for widgets to load before they can interact with your blog. This may not seem important to bloggers on high speed broadband service but most people surfing the web today are on dial-up service.

“Too many widgets on a page will kill a blog’s design and turn off visitors. How should you gauge whether or not you have too many widgets on your blog? Check other blogs and see what kind of an impact widgets have on your experience as a reader.” – Glen L Graham II, Web-designer / Graphic artist  for The G&R Group

Widgets as distractions

Consider that readers come to our blogs to read our content. They don’t come to our blogs to view our awards, badges and buttons and they have no interest in seeing where every other visitor is coming from. Yet every day I witness distracting and tacky looking widget clutter in the sidebars of many personal blogs. The important point here is that widgets and other sidebar clutter distract readers’ attention by drawing the eyes and mind away from the content in our posts.

Widget test

The test for whether or not to add a widget or any sidebar link to your blog is to answer these questions:

1. Will adding this widget or link to my sidebar enhance my visitor’s reading experience?
2.  Will adding this widget or link to my sidebar provide my visitor’s access to blog content that’s not found on the front page?
3. Will adding this widget or link to my sidebar provide my visitor’s access to additional related resources beyond my blog?

The rule of thumb is that if it does not accomplish the foregoing , then do not add it.

References:
Too many widgets

Related posts found in this blog:
Why having a well designed blog is important

add to del.icio.us :: Add to Blinkslist :: add to furl :: Digg it :: add to ma.gnolia :: Stumble It! :: seed the vine :: reddit :: furl

Adding scroll bars to text widgets

Posted on by

Posted by Richard

This is a neat little trick that showed up in the WordPress.com forums (and I can’t find the thread right at the moment or remember who posted it so I can’t give the credit) and I thought it might be a useful thing to let everyone know about.

You may find a time when you want to put a long list of some sort into a text widget in your sidebar, but because of the length, it pushes your other widgets way down the page where your readers have to scroll way down the page in order to get to them. You can add scroll bars to text widgets and then limit the height so this does not happen. (Note that you can add scroll bars to pages and posts too.)

The following code should work with all themes (although I haven’t tested it in all) and you can use it as a starting point. In the example, I have set a height of 150px so the actual space the list takes up is minimal, but you can change that as needed.

I have overflow set to “auto” which puts the burden on the browser to determine if scroll bars are needed, but most real browsers (Safari, Opera, Firefox) should have no problems. With IE6 and IE7, I don’t know since they are… well… less web savvy than they should be.

<div style="overflow:auto;height:150px;">
<p>First entry and a really long one to see how it handles a long line</p>
<p>Second entry</p>
<p>Third entry</p>
<p>Fourth entry</p>
<p>Fifth entry</p>
<p>Sixth entry</p>
<p>Seventh entry</p></div>

[The original code I had posted above, was put directly into the visual editor, was not meant to be copied and pasted since like with any html document, strange things are brought along for the ride. I tried using the "sourcecode" short code but it took out the opening and closing "p" tags so I have now put it in as "preformatted, which should make it so that you can copy and paste to try it out. Sorry for the problems, I should have done this in the first place.]

By putting the entries in nested (inside the div) “p” tags, it will automatically put a blank line between entries.  If you do not want a blank line, just use <br /> at the end of each line and do away with the “p” tags. You can also use “overflow:scroll;” but this will also put a horizontal scroll bar at the bottom of the widget (whether it is needed or not) which doesn’t look as clean.

This would be one solution for people who have a lot of tags and do not like the 45 tag limit on the tag cloud, but it would be quite a bit of work to keep up. One way to minimize the amount of work would be to alphabetize your tags and then when you write a new post, you can easily check to see if the tags you have used are already in the list or not. One thing to note is that I do not know if there is any limit on the amount of stuff you can put into a text widget or whether having long lists will cause any issues.

add to del.icio.us :: Add to Blinkslist :: add to furl :: Digg it :: add to ma.gnolia :: Stumble It! :: seed the vine :: reddit :: furl :: TailRank

WordPress: Placing images in text widgets

Posted on by

Updated with an example April 22, 2010
I have noticed that many new users have difficulty with placing images in text widgets. IMO the easiest way to do this is to create a draft post first, then copy and paste the data into a text widget, and delete the draft post after you see the image display correctly in your sidebar. Prior to trying to insert an image into a text widget I recommend reading these two FAQs entries:
Put an image in your sidebar
Using the text widget
I hope they will provide enough background information so that the walk through below will simply function as a guide.

Walk through – Insert an Image into a text widget

–> New Post –> upload image into the post –> send image to editor –> click the image and position it using icons 7, 8, or 9->  switch to the code tab (HTML) on the visual rich text editor and copy the entire image code to your clipboard –> save the draft post (you can delete it later)

->Appearance –>  Widgets –> drag a text widget out of the available widgets box and drop it into the sidebar box –> open text widget and paste in the image code –> click ‘Save’ then -> click ‘Close’  -> now view your site (it should be there) -> go back delete the draft post.

Walk through – Linking a sidebar graphic to external link:

-> New Post ->  browse for your image and click ‘upload’ (this will take you to a new page) -> select the size (usually ‘thumbnail’)  and click ‘insert into post’. Switch from visual mode in the editor to code (HTML) and your html will appear there.

In the first portion of the HTML is the link reference page. You will change this to link to the url for the site you want to link to, instead of the long text so make sure you leave in the image code {img scr} and then copy all of the code with your cursor and save the draft post.

-> Appearance -> Widgets’ and drag a ‘Text’ widget from the Available widgets box and drop it into the sidebar box -> click on the  the ‘text’ widget in the right hand corner and it will open -> paste the code from the draft post you’ve copied in there and click  ‘Save’ and ‘Close’.  Click ‘view your site’ and make sure everything went accordingly and then delete the draft post.

Example: Copyright Notice or License

Here is an example for placing a text widget in your sidebar for displaying a copyright license or notice.

official copyright symbol

You can simply place “Copyright © 2010 All Rights Reserved”  in a text widget.

Or you  can register copyright licenses with either creativecommons.org or MyFreeCopyright.com or creators.icopyright.com as described here > How to copyright your digital  works and then display these license images in your blog’s sidebars in  a text widget.

Or if you prefer you can create a static page for displaying your copyright and then link to it from “Copyright © 2010 All Rights Reserved ” placed in text widget in your sidebar by following the walk through below.

1. Copy the HTML code or the phrase “”Copyright © 2010 All Rights Reserved “.
2. Dashboard > Appearance > Widgets
3. Drag a Text widget out of the Available widgets box
4. Drop the Text widgets into the Sidebar box
5. Click the top right hand corner of the Text widget to open it.
6. Paste the HTML code or the phrase “”Copyright © 2010 All Rights Reserved “” into the Text widget.
7. Click “Save” and Close” at the bottom of the Text widget.
8. View the front page of your blog and the copyright symbol/notice should be there.

Related post: Working with wordpress widgets

add to del.icio.us:: Add to Blinkslist :: add to furl ::  :: add to ma.gnolia :: Stumble It! :: seed the vine :: :: :: TailRank

Text Links in Posts, Pages and Text Widgets

Posted on by

Text Links in Posts, Pages and Text Widgets
by guest author, Richard

Text Links in Posts and Pages
For those who are not fluent in HTML, writing text links can be a daunting thing, but it doesn’t have to be. The WordPress visual editor can make quick work of it for you. For reference, you might want to take a look at this WordPress.com Support Documentation which explains what all the icons in the Visual Rich Text Editor do.

(1) Type in and highlight the text you want to use as the link

(2) Click icon 10 in the tool bar that looks like three chain links hooked together

(3) In the box that pops up, enter the full URL of the page or site that you want to link to in the “Link URL” field. If you wish the link to open in a new page, click on the arrow on the end of the “Target” field and select “open link in new window.” Click the “Insert” button and you have created the link.

The text you selected to use as the hyperlink in your page or post will appear blue with an underline in the editor. What your link text will look like when you publish your page or post depends on the theme you are using. That’s all there is to it.

(4) If you want to change the link to different text, or remove the link, highlight the current text that has the link and click on the icon that looks like broken chain links.

Text Links in Text Widgets
If you want to put text links in a text widget, again, you don’t have to know HTML to do it. Use the WordPress Visual Rich Text Editor.

(1) Type the text you want to put into the text widget into the visual editor. Note that you can use the alignment icons 7, 8, 9 to align the link to left, center or right.

(2) Follow the directions above to create the text link.

(3) When finished, click on the “Code” tab at the top of the editor, highlight all the text and code and copy it to the clipboard (ctrl +c Windows or cmd + c Mac).

(4) Go to Appearance > Widgets and drag a text widget from the “available” widgets pane at the bottom of the page to the “sidebar” pane and position it where you want it. (If there isn’t a text widget in the “available widgets” pane, scroll further down on the page and increase the number of text widgets available to you and press “save.”)

Open the text widget you placed in the “sidebar” pane by clicking on the small icon on the right end of the text widget in the “sidebar” box.

TIP! I typically open Appearance > Widgets in another browser tab or window so that I can quickly switch back and forth between them..

(5) Paste the code and text you copied from the editor into the text widget (ctrl + v Windows or cmd + v Mac). Type in a title for the text widget if you wish (not required) and click the small “X” at the upper right on the widget title bar, and then click “Save Changes.” You are done.

add to del.icio.us :: Add to Blinkslist :: add to furl :: Digg it :: add to ma.gnolia :: Stumble It! :: seed the vine :: :: :: TailRank