If you notice, I have a Current Music section on my sidebar - showing the album artwork of my latest tunes I have been listening to. You can create that too - ‘Currently Listening’ for music or ‘Currently Reading’ for books or ‘Currently Playing’ for game or anything you can think of. And all of them have one thing in common - showing a small picture - no long text - just picture/thumbnail.

How to do this?

First off, this method does not use any extra plugins - only a common Wordpress features. Yes, it is common - but you might have not think of this before ( ..like myself before I figure this out). This method utilize Wordpress Blogroll function.
However, the template tag that we are going to use, get_links, is already deprecated from the latest version of Wordpress. But, I tested it and yeah, so far its working fine.

Create your blogroll category and one link

Log in to your dashboard and create a new Blogroll category. I dont think theres any ‘New category’ link somewhere, right? So we need to create it while adding a link. Choose Add Link to start.

• [A] This is where the user will be directed to when they click the image.
• [B] Description will appear as a tooltip when user hover on the image. It can be set to appear somewhere around the image but its not in our discussion here.
• [C] The location of you image. Remember, hotlinking image from other websites is very very unethical. Upload them into you server or use free image hosting services
• [D] This is an important step. On the first link addition, you might need to create a new category. So create one that is relevant.

Now go back to the Blogroll manager, and click the name of the category you created just now. What you need is to get the ID of the category. Look in your address bar.

http://www.yoursite.com/blog/wp-admin/link-manager.php?cat_id=8

As you can see, the ID is ‘8′. We will use this in the code in the next step.

Continue with the codes

You need to add some codes in you layout (or widget) to accomplish this. For example, open you sidebar.php and place this code anywhere you want it to appear.

<div id="music">
<h2>Currently Listening</h2>
<ul>
<?php get_links(8, '<li>', '</li>', '', 'TRUE', '_id','','',6); ?>
</ul>
</div>

What does it means? Lets break the paramaters apart

• ‘8‘ is your category ID just now.
• <li> and </li> is the code that should be BEFORE and AFTER each link. Something common for a list though.
• TRUE is a parameter for image, say “YES I want the image to appear. True!”
• ‘_id‘ is the parameter for ‘order’ - meaning our images will be sorted up according to their ID. The underscore (_) sign is to reverse the order because we want the latest image (with higher ID value) to appear on top of the previous images and so on
• ‘6‘ is the number of images that will appear on your sidebar. You can change it to any number

However, you can add more customization on the parameters. Read more about them here.

CSS style

Now, you’ve put the code in you sidebar, we need to create some CSS styling.

#music {padding:5px;}
#music ul{list-style-image:none;}
#music ul li{display:inline;}
#music ul li img {
border:1px solid #999999;
margin:3px;
width:100px;
}

There are only few things you need to concern here, especially under #music ul li img.
The border is optional actually - set your own thickness and color.
margin:3px means you are putting 3px separation between the images.
width:100px means you want all the images to have the same width no matter what is the width of the original image. So don’t you have to edit an image every time you want to add a new one. Why only width, no height? because it may stretch the image

So thats it. Easy isn’t it? As I said before, this is not only meant for showing current music; you can do anything with it by utilizing this method. The Short Notes section on my sidebar is also using the same method but with different parameters. Maybe you want to try that out too.

Good luck!