WordPress Blogroll Icon

After a long pause I came back with this tweak for wordpress. Here it comes, since I work a lot with wordpress these days. :)

I came across this wordpress tweak when one of my client wants a Blogroll Icon to be displayed along with the blogroll link. So here’s the steps on ‘How to show a Blogroll Icon’ in wordpress blog. Originally, what you have with wordpress blogroll is a list of links to websites and blogs. So to show image beside the blogroll link (most probably on the right side of the link text), perform the following steps.

Step1:
First you need to get the plugin ZocPowerblogroll from his website. Download the plugin and this plugin will do most of the work for us.

Step2:
Before activation of the plugin, you have to put this funtion in your ‘sidebar.php’. Placed this function

<?php 
wp_zoc_powerblogroll(); 
?>

in your sidebar where you want the blogroll to appear. If your template is widgetized, you need to keep this function outside of the widget ‘if’ condition, place before or above this ‘if’ condition

<?php
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('lsidebar') ): 
?>

Step3:
Load the plugin in the plugin directory, activate the plugin and you are ready to go. This plugin is compatible upto wordpress version 2.5.x. So you will not have any problem here. You may want to change how the blogroll is displayed by adding simple CSS code in the ‘style.css’.

Step4:
Now, to show the icon in the blogroll, you need to have the icon files. You have two options, you can upload the icons directly to your server in your wp-content directory or you can get the links of an icon from freeicon websites. Now, you need to include the link of the icons in your blogroll links.

Step5:
Log in to the admin panel and go to ManageĀ»Link (for wordpress 2.5 and later) or Blogroll in wordpress 2.3.x. Click on the edit blogroll link option, now you have the edit-link page, expand the advance tab and you will find an input form for ‘Image Address’. You have to paste the link here. Now save the blogroll link and check your blog or website again, the icon will appear on the right side of the link you have just edited.

The modification:
Now, you have the icon appeared on the blogroll, but there is one simple modification I made on the plugin. In the input form for Image address, the plugin originally accept or allow only the hyperlink like http://www.sitename.com/iconfilename for the icon location. If you upload your icon file in the wp-content directory (/wp-content/icons/), you cannot specify the path of the icon like this (/wp-content/icons/iconfilename.xxx) for the ‘Image Address’ using this plugin. So the following modifications have been made. It’s a simple modification, first find the following lines in the plugin file (zoc_powerblogroll.php).

if (substr($book->link_image,0,4) == 'http' && $showLinkFavicon)
echo "<a href=\"" . $book->link_url . "\"> <img src=\"" . $book->link_image . "\" alt=\"" . $book->link_name . " website\" /> </a>\n";

After you find this lines, make the modification as below, or replaced the above lines with the code below or download the modified plugin here.

if (substr($book->link_image,0,4) == 'http' && $showLinkFavicon)
echo "<div class=\"blogroll_image\"> <img src=\"" . $book->link_image . "\" alt=\"" . $book->link_image." website\" /> </div>";
elseif ($showLinkFavicon)
echo "<div class=\"blogroll_image\"> <img src=\"" . get_settings('home') . $book->link_image . "\" alt=\"" . $book->link_name . " website\" /> </div>";

Leave a Reply