Create your own WordPress Information Widgets

Adding structure within blog postings can go further than using H1, H2, H3 headings and blockquote tags… You can create and use your own “information widgets”. Here’s an example: the “info box”…

WordPress Themes
The WordPress theme system is a really powerful way to change and customize layout and navigation for your blog. You can download themes, or develop your own.

The first and most easy step in developing your own theme is customizing the WordPress stylesheet, but you can go and change the structure of your blog by rearranging Template Tags in the WordPress Loop.

An info box (my definition, Information Architects probably have a better word for it… Peter?) contains some background info you want to add it as a side note, separate from the normal text flow. You can achieve the effect in 2 steps:

Define containing css classes

First we want to have a css class wrapping the box, sizing and positioning it on the right side in the blog text.
Simply add this to the style.css file of your theme:

.entrytext .infobox
{
width: 200px;
position: relative;
float: right;
padding: 0px;
margin: 0px 0px 10px 10px;
border: 1px solid #06c;
}

Then define infobox header and body text:

.entrytext .infoboxbody
{
font-size: 0.75em;
padding: 10px;
line-height: 1.2em;
}
.entrytext .infoboxheader
{
color: #FFFFFF;
font-weight: bold;
text-align: center;
line-height: 3em;
background-color : #06c;
}

Create your custom “quicktag”

Of course you do not want to write

<div class="infobox">
<div class="infoboxheader">Infobox Title</div>
<div class="infoboxbody">Infobox Body text</div>
</div>

every time manually. In /wp-admin/quicktags.js you can copy-paste:

edButtons[edButtons.length] = new edButton(‘infobox’
,’IBox’
,'<div class="infobox"><div class="infoboxheader">Infobox:
Title</div><div class="infoboxbody"></div>Infobox Body text</div>’
,”
,’x’
);

to get your own IBox button
Customized quicktags in WordPress admin interface
in between the similarly looking other definitions. The 5th argument makes the ‘SHIFT+ALT+x’ a shortcut key for inserting a dummy info box. By the way: the extra “H3” button is the result of almost identical code:

edButtons[edButtons.length] = new edButton(‘heading_3′
,’H3′
,'<H3>’
,'</H3>’
,”
);

the only difference being that with <H3> and </H3> split over 2 arguments, the same button will open and afterwards close the tag, or wrap selected text within them immediately.

Some caution

Note that /wp-admin/quicktags.js is not included in your WordPress theme, and so can be overwritten when upgrading WordPress. So don’t forget to document this somewhere you can refer back to when upgrading. Hey… why not simply blog it?

Update June 15: feeds…

Doesn’t seem to be a good idea if you include your entire posts in rss feeds: Bloglines preview… Including css in rss feeds (or rather, in the html of each and every individual post) is probably not really what rss is made for, and using tables or inline css makes the widget far less attractive… Any ideas?

3 Responses to “Create your own WordPress Information Widgets”

  1. Notes, links and conversation » Blog Archive » Create your own Information Widgets Says:

    […] Notes, links and conversation « Hunting spamblogs […]

  2. Daily Links | AndySowards.com :: Professional Web Design, Development, Programming, Hacks, Downloads, Math and being a Web 2.0 Hipster? Says:

    […] Create your own WordPress Information Widgets Interesting read about creating your own wordpress info widget (Oldie but goodie) (tags: wordpress ia) […]

  3. Eugene Yaroslavskiy Says:

    Thanks for this tip! It was exactly what I was looking for. I had to do the following adjustments for it to work:

    1) In the .js code, change all apostrophe symbols (crooked) to single quote symbols (straight)
    2) This line should actually look like this:


    Infobox Body text’

    (both closing div tags should be on the right)