Show Both Links and Pictures in WordPress wP_list_bookmarks()

Welcome to my blog, please feel free to subscribe to my RSS feed or leave a comment.

As some of you may have noticed, I updated the design for my site this week. It was a pretty major overhaul of the basic code, although it is still 100% WordPress. The upgrade that I’ve had the most messages about is my links list at the bottom of the page. It uses the standard WordPress Links list with a few minor scripting changes.

By default, WordPress wp_list_bookmarks() will display either the graphic or the title of your link but not both. If there is a graphic image set, it will simply ignore the title and output only the graphic. If no graphic is present, it will only output the text. Not exactly what I wanted.

What I wanted was what Jeremy had. So I set about trying to find the code to do this in WordPress only to find out that it simply didn’t exist. What I did find was a lot of people grumbling about it, so  I fixed the problem using WordPress’s built in get_bookmarks() function.

Here’s what I did:

<strong>What I’m Reading</strong>
<ul><?php 

$linklist = get_bookmarks(’category=70′); 
foreach ($linklist as $site) { 
echo “<li>”;
if (strlen($site->link_image)>2) {
echo “<span class=’linkimage’>”;

echo “<a href=’”.$site->link_url.”‘ title=’”.$site->link_description.”‘ rel=’me’><img src=’”.$site->link_image.”‘ alt=’”.$site->link_name.”‘/></a>”;
echo “</span>”;

} else {
echo “<span class=’linkimage’></span>”;
}

echo “<span class=’linkname’>”;
echo “<a href=’”.$site->link_url.”‘ title=’”.$site->link_name.”‘ rel=’me’>”.$site->link_name.”</a>”;
echo “</span>”;
echo “</li>\n\r”;
}
?></ul>

For those of you who know PHP what I did was pretty simple but for the rest of you, here’s the basic breakdown:

$linklist = get_bookmarks(’category=70′); 

Get the values of category #70 (I only wanted those links) and load them into a variable.

foreach ($linklist as $site) { … }

Loop through the variable.

if (strlen($site->link_image)>2) { … }  else { … }

If the link_image value (that’s where the image is stored) has a value of more than two characters, do this. Otherwise, do something else. For the record, sometimes the value returned a false positive when testing for isset() so I choose to do a strlen() instead.

echo “<span class=’linkimage’>”;
echo “<a href=’”.$site->link_url.”‘ title=’”.

$site->link_description.”‘ rel=’me’><img src=’”.$site->link_image.”‘ alt=’”.$site->link_name.”‘/></a>”;
echo “</span>”;

The code above displays a <span> tag. I repeat the process if there’s no image found using an empty <span> tag to keep the text alignment appropriate.

echo “<span class=’linkname’>”;
echo “<a href=’”.$site->link_url.”‘ title=’”.$site->link_name.”‘ rel=’me’>”.$site->link_name.”</a>”;
echo “</span>”;
echo “</li>\n\r”;

Finally, I display another <span> called linkname which stored the text based hyperlink to the site. 

That’s all she (actually he) wrote … do you have any suggestions how to improve this code? Let me know and I’ll owe you a pint. Also, if you use this code please post a link to your web site below so that I can see it in action. Thanks.

Other Posts of Interest

• Automatically Title Casing Titles in WordPress
• Adapting my holiday logo rotator for WordPress
• How to rotate your logo on holidays.
• Blog Roundup for 5th of October 2008
• Sick Riot Photography
• Blog Roundup for the 6th of September 2008
• Blog Roundup for the 30th of April 2007
• Blog Roundup for the 4th of March 2006
• How do you install WordPress Plugins?
• Fundraising Thermometer Plugin for Wordpress

Posted on: Wednesday, October 22nd, 2008
Tags: links, php, tutorial, WordPress
Posted in WordPress | | Read more