I am using YARPP WordPress’ plugin and it is a great one. All the customization that you can do is amazing, but I wanted to have related posts with images in the widget sidebar. It seems that people are more attracted to images, and when I thought in getting another plugin; none of the one I found I liked it better. So, here is a template I wanted to share with everyone who needs it and likes it.
This template is for the sidebar widget in YARPP.
If you know WordPress there is a pretty good chance that you know how to install a plugin. Here is the link for YARPP, download it and install it.
First and foremost I don’t want you guys editing files and then regretting it, so back up your files (template-widget.php & Style.css) before you try this in case you want to revert back to your original settings! That said… Let’s start.
1- We are going to be modifying the template-widget.php located in the WordPress plugin folder (look for yet-another-related-posts-plugin folder ), empty the template-widget.php file and copy the code below and save the file.
Note: In the code below you need to supply a path for a default thumbnail in case there is not a thumbnail for the post.
[code]<!–Sidebar Related Thumbnail Template for YARPP(http://wordpress.org/extend/plugins/yet-another-related-posts-plugin/)http://Pureinfotech.com–><!–?php if ($related_query—>have_posts()):?>
No related posts yet[/code]
2- Now we just need to add some code to the Style.css to make it look pretty, the Style.css is located in your WordPress themes folder.
Add the code below to the Style.css in any section you prefer, here you can play with the style and make it your own, then save and close the file.
[code]/* Related Posts-sidebar Play with these settings until you find what you like*/
ul.related-posts-sidebar1 {
width:265px;
margin:1px;
padding:1px;
list-style:none;
float:left;}
ul.related-posts-sidebar1 li {
width:265px;h
eight:60px;
margin:1px;
padding:1px;
float:left;
overflow:hidden;
}
ul.related-posts-sidebar1 img {
margin:1px;
padding:1px;
float:left;
}
ul.related-posts-sidebar1 a {
width:265px;
height:60px;
float:left;
margin:1px;
padding:1px;
text-decoration:none;
font-size:13px;
color:#262525;
}
ul.related-posts-sidebar1 a:hover {
text-decoration:none;
background:#2CB9F6;
color: white;
}
[/code]
3- The new widget template is going to be looking for a thumbnail with the “thumbnail_url” field. To get the thumbnail to be displayed, go to one of your posts or create a new one then look for the “Custom Fields” section (See image 1); in “Name” type thumbnail_url and in “Value” here you need to add the path for the thumbnail. Repeat this process for each post.
Click image to expand. Image 1.
Tip: If you are using Chrome Browser, go to “Media” section, right click on any of the thumbnail image that you want and click on “copy image url”, if you are using the WordPress’ default settings, the thumbnail picture is going to be 150px x 150px on dimension; don’t worry because the code in template-widget.php will resize to to fit the 52px x 52px or the size that you’ll supply. Read the code for reference.
Tip2: When you are done with this project you might want to save a copy of “Template-widget.php” in case there is an update in the future and the file gets over written.
You Are Done!
See an image sample result below:
Get Yet Another Related Posts Plugin for WordPress Here
July 15, 2010, Update:
A new release of YARPP (v3.1.9) just came out they did some modifications. If you want to keep using this template follow the following steps:
1- Make a copy of “template-widget.php”
2- Rename it to “yarpp-template-widget.php”
3- Open the file and at the very beginning, before any code, add this:
Related Posts
Save a close the file.
4- Upload the new “yarpp-template-widget.php” to your theme folder where you have all of the other yarpp-template-* files.
5- Go to “Apperance” > “Widgets” in the Related Posts (YARPP) widget Select “Display using a custom template file” and choose the newly created “yarpp-template-widget.php”, Click “save” and everything should be back to normal.
