OPML Renderer
Thank Dave Winer for linking to the OPML renderer for Wordpress. The renderer takes an OPML file and creates a collapse/expand blogroll. Smartly, it caches the blogroll, so if you link to something like Bloglines, you aren’t running a script every freakin time the page loads (and you specify how long it takes).
To add it to your blog, download it from author Dan MacTough’s site, and dump the entire directory into your wp-content/plugins/ folder. Add this code to your blog:
< ? OPMLRender('url', 'updatetime', 'page|sidebar'); ? >
Replace url (leaving the single quotes in all cases) with the OPML url. In the case of a public Bloglines OPML, it’d be “http://www.bloglines.com/export?id=USERID”, entering your ID at the end. Replace updatetime with the number of seconds between caching. Unless you change your subscriptions every ten minutes, set it to a very high number. I chose 360000, or every 100 hours. Replace page|sidebar with page or sidebar, choosing the correct stylesheet for where you are placing the blogroll.
Now, activate the plugin in your control panel.
You can download images so there are proper buttons for the thing, including proper +/- buttons and an OPML logo, or create your own. Dump them in your plugin/wp-content/opmlRenderer directory. Then go to the plugins panel, and look for:
Click here to edit XSL transform used for pages and posts and here to edit the XSL Transform used for the sidebar.
Click on the appropriate “here” for the XSL stylesheet you chose. Line 13 is:
< xsl :variable name="imgPath" >/wp/wp-images< /xsl >
Edit it to /wp-images/plugins/opmlRenderer, or whatever directory you used. Be aware that if your blog is in a subdirectory, you need to append that to the beginning (like /blog/wp-images/plugins/opmlRenderer).
Now open your site in Opera or Firefox. Try to click on the + symbol. If it doesn’t work (because the browser renders the text layer over several pixels of the sidebar), you can fix that by making the + symbol larger. To do so, scroll down to:
< img name="img-{$uniqueID}" src="{$imgPath}/{$imgCollapsed}" alt="[+/-]" title="[+/-]"/ >
Add width=”30″, or whatever number you are satisfied with that looks good and is clickable. Also, you can add align=”Left” to get it to act like mine, which I think is more asthetically pleasing, especially in thin sidebars.
Fiddle around with the code to get it to act the way you want it. The main thing is that it works very well, and can let you have a massive blogroll without taking up space.
