Hover Link Descriptions

Posted by Steve Hanna on July 17th, 2007 filed in Technical, WordPress Plugin

I really like WordPress, just in case you couldn’t tell. I can easily add plugins, publish content, resize images, etc. without taking up too much time. However, sometimes I need to do things beyond the capabilities of WordPress, that or I cannot find out how to implement the feature that I want using the provided documentation. So, as you’ll notice, I got tired of having my Blogroll link descriptions only appear when a cursor was placed over the links. By following these few steps, you can add hover over link descriptions to WordPress! It will make your blogroll so much fun, I promise. This should be fairly easy to do, even for the people who lack PHP and HTML experience.

First
Modify wp-includes/bookmark-template.php line 121 (in my version of WordPress).
$output .= '<a href="'.$the_link.'"'.$rel.$title.$target.'>';
to
$output .= '<a href="'.$the_link.'"'.$rel.$title.$target. ' onMouseOut=\'setDivDesc("");\' onMouseOver=\'setDivDesc("'.$desc.'");\".'>';

Second
Open sidebar.php (based on whatever your current theme is) and I paste:
<script language="javascript">
function setDivDesc(desc)
{
var divDesc = document.getElementById("divDesc");
divDesc.innerHTML = desc;
}
</script>

Third
Also, in sidebar.php add this code to make a division right below the blog roll. Feel free to add it wherever you like!
<div id="divDesc" style="margin:5px; text-align: center;">
</div>

Done!
That’s all there is to it. Now you can let your friends really know what you think of them.