Line breaks and blank lines
Plain text typed or pasted in a text widget flows in one continuous paragraph. For line breaks you need this:
For blank lines you can use this (you can adjust it by changing the number):
This code can also be used alone in a nameless text widget, as a spacer (to create more distance between other widgets).
In some themes the text shows up too close to the widget borders; you create some space around it this way (you can change the number):
The plain code for a link to any webpage is this:
In most cases it’s better to use this:
This way the link opens in a new browser window or tab, so that visitors don’t really leave your blog when clicking on a link.
To avoid spam, it’s usually wiser not to disclose your e-mail address. You can use the WP contact form instead (but in a page, not a text widget) – see here. Or you can display your e-mail, but in a way that will elude spam robots – see here plus here.
The content of several widgets (e.g. Categories, Links or Recent Posts) is unordered lists. The design of each theme presents unordered lists in its own way. If you want a list of items in a text widget to show up the same way, you use the code for unordered lists:
The code for nested lists (with indented sub-items) is like that:
This is an example with only two main items and three sub-items to each, but it’s enough for demonstrating the structure of the code.
Items and sub-items can be plain words or phrases, or any kind of allowed html code (e.g. links and/or style formatting).
Text widgets with unordered lists can also be used instead of some of the other widgets (such as the links widget or the categories widget). This can be useful if you don’t like the default appearance of those widgets and want to change it using formatting for style, or if you want your links or your categories in a non-alphabetical order; or if you want to include images. The drawback, of course, is that each time you add a new link or category you’ll have to update the text widget manually.
If you want to limit the length a text widget occupies in the sidebar, you can have its content in a (vertical) scroll box:
The height number is just a suggestion – you can change it (but there’s a downward limit: below 45px there’s no room for the scrollbar). “Padding” is the space between borders and text – you can change that too. If you write an unordered list in a scrollbox, omit the padding altogether: the design of the theme will take care of that.
Or you may need a horizontal scrollbox:
In some themes it will look better if you create a visible border around the box; in that case add this right after the opening quotation mark:
The code for a plain image is this:
For an image that links to a webpage:
Of course the image has to be narrow enough to fit in the sidebar (in most themes, sidebars are around 150 to 200 pixels wide – see my post on sidebar width). If you’ve got a wider image, you can downsize it to fit – example:
But it’s better to use properly sized images: gives you faster loading, better quality, and no issues with Internet Explorer.
Also, it’s better to use images uploaded to your own blog. If you use the URL of an image hosted in another site, you get the delay of that site loading as well, plus you run the risk of losing the image if it gets relocated or removed. So, to get the right URL for an image, you upload it to your blog via Media > Add New, and then you click Edit and copy the File URL from the Save module.
In some browsers you get a (blue) border around images. If you don’t want that, add this after “img” (with a space inbetween):
If you want a simple thin border around the image, you can add this after “img” (with a space before and a spacer after):
Various sorts of borders are possible – see this post.
If you want a left-aligned image, with text wrapping around it, you need to add this after “img” (with a space before and a space after):
In some themes this may not work. For all kinds of combinations of image plus text, a more surefire way is coding for tables. (But that’s for a future post…)
If you’re having trouble placing text below an image, an easy alternative is using a second, untitled, text widget. (Note: when you add new widgets, you can rearrange them by dragging them into new positions.)
To display the code for an image, so that others can copy it (e.g. the code for a banner linking to your blog), you need to convert its special symbols into the html for them; you can do that here. Use it in a scrollbox.