Related Posts Thumbnails

This is the plugin page for Related Posts Thumbnails plugin. Plugin will add related posts thumbnails after the post. Plugin allows to customize thumbnail sizes, display settings and type of relation. Plugin is using original WordPress taxonomy. It returns generated HTML, that is essential for page load speed of blogs that use many Javascript widgets. Live example is here.

Manual contents:

Display

Thumbnails are arranged in columns under the post with related posts title under each post thumbnail. Colors of background, border, text, text sizes and background color on mouse over can be customized. Plugin allows to customize number of related posts to display, top text, style settings – background colors and text formatting. You can specify where to display post thumbnails – single and main pages, or select specific categories.

By default plugin appends related posts thumbnails under post content. You can turn off automatic appending in plugin settings and use php tag in the Loop of your theme.

<?php get_related_posts_thumbnails(); ?>

You can use shortcode [related-posts-thumbnails] directly in the post body.

Related Posts Thumbnails for WordPress

Plugin in action

Output style

Starting from 1.2.7 version there is an option to select output style. By default it will be same as in previous versions – based on blocks. You can now select the version, based on “List” and you can also turn off plugin CSS completely. This is for more advanced users who wish to customize output as they desire.

List style produces clean output, without HTML errors and it is much more SEO friendly. So use it if possible. Plugin uses Block output style by default to support previous versions, and because Block style uses inline styling with absolute positioning for some elements it will more likely to work in all themes. Check List output style, if you are satisfied with it, use it.

Horizontal list

  1. Choose Output style as “List” in plugin settings
  2. Set “Turn off plugin styles” flag
  3. Now you can use your own CSS to customize output. For horizontal display you can use suggested CSS (you need to paste it in styles.css file of your theme):
#related_posts_thumbnails {
list-style-type: none;
list-style-position: inside;
padding: 0px;
margin: 0px;
}
#related_posts_thumbnails li {
padding: 10px 0;
border-bottom: 1px solid #ccc;
}
#related_posts_thumbnails li img {
margin-right: 8px;
vertical-align:text-top;
}

Center output

This is also a popular question how to center thumbnails on page. Styles that go with plugin display it aligned to the left side of post container.

The easiest way to center thumbnails without CSS editing is to use plugin’s tag instead of automatic appending in your theme files. Put this tag in div with desired padding style, like:

<div style="padding: 0px 20px;">
<?php get_related_posts_thumbnails(); ?>
</div>

Any other display editing

This plugin provides list output, that allows to change design completely in CSS. You need to select “Output style” as “List” and turn off plugin CSS in plugin settings. This will reset all plugin’s inline style, providing simple html list, that can be designed as required in your theme CSS files using #related_posts_thumbnails selector. Here are CSS settings, that will reproduce plugin CSS settings in your theme styles file (you use this as a basic to change what you need). You need to set height and width correctly as this is now not calculated automatically:

#related_posts_thumbnails {
list-style-type: none;
list-style-position: inside;
padding: 0pt;
margin: 0pt;
}

#related_posts_thumbnails li {
float: left;
margin: 0pt;
padding: 5px;
display: block;
border-right: 1px solid #DDDDDD;
background-color: #FFFFFF;
}

#related_posts_thumbnails li:hover {
background-color: #EEEEEF;
}

#related_posts_thumbnails li a {
border: 0pt none;
line-height: normal;
font-size-adjust: none;
font-stretch: normal;
}

#related_posts_thumbnails li a+a {
display: block;
width: 110px;
overflow: hidden;
height: 75px;
color: #333333;
text-decoration: none;
font: 12px Arial;
}

#related_posts_thumbnails img {
padding: 0px;
margin: 0px;
border: 0pt none;
}

Text block

  • Title – set posts title maximum length or 0 for no title
  • Excerpt – set excerpt maximum length or 0 for no excerpt
  • Text block height – set height in pixels of the block appeared under the image.

Top text

In the latest version of plugin top text is showing up only if you are using automatic appending in plugin settings. If you are using PHP tag, shortcode or sidebar widget top text will not show up to allow more customizable output. You need to enter it manually before PHP tag in theme settings, before shortcode in your post or in the widget title box.

Relations

Relations between posts are based on Categories and Tags. You can specify what kind of relation should be used in Plugin settings. It may be one of the following:

  • Categories – relation is based just on similar post categories
  • Tags – relation is based just on similar post tags
  • Categories and Tags – posts that have similar tags or categories are considered as related
  • Random – no relation restrictions will be taken into account. Posts from different categories and tags may be shown. This might be useful for blogs with small amount of posts.

Categories

You can set:

  • Categories on which related thumbnails will appear. In this parameter you can set on posts from which categories related posts thumbnails will be displayed. Default value is “All”.
  • Categories that will appear in related thumbnails. In this parameter you can specify what categories should be shown among related posts thumbnails. Default value is “All”.

Thumbnails

This plugin supports two types of thumbnails sources – WordPress post thumbnails feature and post custom field.

Thumbnails Sources

Thumbnails Sources

Custom field

If you input your thumbnail URL on post edit page under the post in specific field, like “thumbnail image URL” you are using “Custom field”. In plugin options set Thumbnails source as Custom field.

Make sure your Custom field name in plugin options is exactly as it is stored in database. For example, in Thesis “thumbnail image URL” can be stored as “thesis_thumb”. You need to use that key name. You can find it in database in postmeta table. Or ask your theme developer what’s the key name of that custom field you use to specify thumbnail URL.

If your theme resizes your images, you can specify Theme resize URL. Here you need to fill in URL to PHP script used in your theme for resizing. You can find it from HTML source of your page, looking at src of resized image or ask your theme developer.

For example your can see the IMG tag like the following:

<img src="link_to_my_theme_resize_script.php?src=image_url&w=100&h=100&zc=1&q=90">

So in Theme resize URL field you need to add this part of URL: link_to_my_theme_resize_script.php

If your theme does not contain such script, you can download image resizing script. For example, TimThumb resize script:
http://code.google.com/p/timthumb/

Put it, for example, in your /wp-content/thumbnails folder and create thumbnails/cache folder with writable permissions for this script to store resized images.

Post thumbnails

By selecting ‘Post thumbnails’ as a source for thumbnails plugin displays post thumbnails depending on your WordPress settings. Your WordPress theme may or may not support WordPress Post Thumbnails feature introduced in WordPress 2.9.

Read more information about WordPress Post Thumbnails feature here – New in WordPress 2.9: Post Thumbnail Images.

If your theme doesn’t support this feature On plugin settings page you will see this message: Your theme has to support post-thumbnails to have more choices.

Plugin warning if theme does not support post-thumbnails

This means that you limited to two thumbnail sizes options – ‘thumbnail’ and ‘medium’. These sizes were specified in your WordPress Media settings. Plugin will take the first image, that appears in post body and will display corresponding image thumbnail.

Please note: Plugin doesn’t directly support externally hosted images. You can either use Custom field option. Or you can use Generate Post Thumbnails and Auto Post Thumbnail plugins to create post thumbnails from external images.

If you want to use custom thumbnails sizes and your WordPress is at least 2.9, you can customize your theme according to New in WordPress 2.9: Post Thumbnail Images and use this plugin for automatic assigning thumbnails for existing posts – Generate Post Thumbnails.

Your theme supports post-thumbnails feature. In addition to basic ‘thumbnail’ and ‘medium’ sizes plugin will allow to select post-thumbnails name that is supported by your theme. Plugin will use post thumbnail that was set as thumbnail on Edit Post page. You can set specific post-thumbnail size for related posts and specify it plugin settings. For example:

add_image_size( 'related-post-thumbnails', 100, 100, true ); // thumbnail 100 pixels wide by 100 pixels height, hard crop

Please note, that you need to regenerate thumbnails after Media settings or theme setting were changed. Use this plugin for that – Regenerate Thumbnails or Ajax Thumbnail Rebuild.

Changing thumbnails size

1) If you use Custom fields to specify your thumbnails plugin interface allows you to specify thumbnails size

2) If not you can change thumbnails size either by:

– Editing thumbnail size on Media page of your WordPress (and running plugin Regenerate Thumbnails after that)

– Adding new thumbnail size in your theme and selecting it in plugin interface in “Thumbnail size” select box. How to do that read this article  New in WordPress 2.9: Post Thumbnail Images. You need to run plugin Regenerate Thumbnails after changing theme options.

Video thumbnails

Please take a look at this plugin, that creates thumbnails from video:
http://sutherlandboswell.com/projects/wordpress-video-thumbnails/
This should solve the problem with displaying images for posts with videos.

Default image URL

You can specify URL to default image, that will be used if there is no thumbnail found for the related post.

Sidebar Widget

After plugin is activated the new sidebar widget becomes available Related Posts Thumbnails on Widgets dashboard. It will be displayed only on single posts pages.

Possible problems and solutions

  1. Your thumbnails source is “Post thumbnails” and plugin always displays default image instead of thumbnails.
    1. If your theme supports post-thumbnails, probably your posts do not have assigned thumbnails and on Post Edit page in the block “Featured Image” there is no thumbnail for the post. You can run this plugin – Generate Post Thumbnails – to generate thumbnails for all your posts.
    2. If your theme does not support post-thumbnails feature, you can see this message “Your theme has to support post-thumbnails to have more choices” on plugin settings page. Posible problem is that at some moment your Media settings were changed but thumbnails were not regenerated. Try using this plugin – Regenerate Thumbnails
  2. You use “Custom field” as thumbnails source and thumbnails displayed on related posts are not the desired size. You need to specify theme resize URL in plugin settings for correct size display. (read more information here)
  3. If this doesn’t help please turn on Developer mode in plugin settings and let me know. This will output hidden debugging info in HTML source so I can see what’s going on.
  4. Plugin does not append thumbnails.
    1. Try clearing your caching plugin.
    2. If this doesn’t help, use plugin php tag in your theme <?php get_related_posts_thumbnails(); ?>
  5. Plugin’s style is conflicting with your theme design. Try different Output styles in plugin settings.

Configuring plugin for Thesis theme

Thesis is popular theme for WordPress. So if you use it you can follow this directions. In Thesis post thumbnails are usually specified on Post Edit screen in Custom field by providing image URL. So if not otherwise configured, you can use the following plugin settings:

  1. Set “Thumbnails source” as “Custom Field”
  2. Set “Custom Field Name” as “thesis_post_image”
  3. Set “Theme resize URL” as “http://YOUR_BLOG_TEMPLATE_URL/lib/scripts/thumb.php”, where YOUR_BLOG_TEMPLATE_URL is your themes folder, and is usually something like http://BLOG_URL/wp-content/themes/thesis_VERSION/lib/scripts/thumb.php, with correct BLOG_URL and VERSION.

Installation

  1. Download plugin
  2. Extract zip in the /wp-content/plugins/ directory.
  3. Activate the plugin through the ‘Plugins’ menu in WordPress.
  4. Customize plugin settings under Settings -> Related Posts Thumbs

Reviews

Example of plugin in action: http://foreverculinary.com/

If you have questions or suggestions please ask them here. I am trying to answer everything. If you like the plugin please vote.

Before asking questions, please make sure you read this manual first. 90% of questions I see are covered in this manual. Check the sections: possible problems and solutions, changing thumbnails size, display editing.

  • Guest

    I take a picture

  • http://www.kevincrank.hu/ kevincrank

    i take a picture

  • linguine

    Hi Maria,
    I am trying to work out how to get the related post thumbnails to center. You mention in this blog to add a div to the plugin’s tag. Can you tell me where I need to do this as I can’t find where the tag is called from.
    In the plugin options I have ticked the first box “Or use in the Loop”

    Thanks

  • http://notes.shaldybina.com/ Maria

    You do it in your theme files

  • http://notes.shaldybina.com/ Maria

    Alma, not sure, they use the same database, may be the page was cached.

  • http://notes.shaldybina.com/ Maria

    You can use plugin tag and put it in your theme where you need, please read the blog about it.

  • http://notes.shaldybina.com/ Maria

    The project is available on github: https://github.com/progmary/Wordpress-Plugin-Related-Posts-Thumbnails You can check TODO for the next features

  • http://notes.shaldybina.com/ Maria

    Please read the section possible problems and solutions, there could be different reasons

  • http://notes.shaldybina.com/ Maria

    Shortcodes only work in posts body. There could be a plugin that adds this functionality to plugins.

  • Ali

    Hi, After enabling this plugin, site gets very slow on opening another post.
    what to do?

  • linguine

    Hi Maria,
    Would you be able to provide any more information as I’m not sure what that means. Am I to search through my theme’s php files and look for where the plugin gets called? I already did that and can’t see where.
    Cheers

  • Fox

    Since installing plugin my wordpress install has slowed right down, can you please check for conflict? my site is http://www.metalmouth.net. I have no experience of coding whatsoever so I wouldn’t know how to check myself. Hopefully you can help.

    Thanks

  • fox

    my media thumbnails are set to 75px, I show 7 in the list. Maybe it’s a theme issue?

  • http://www.thebutterdish.net/ Tara @ TheButterDish

    HI Maria, this was working beautifully but suddenly it’s showing full size photos and therefore only picking up the top left corner of my photos. — I looked through the problems and solutions but do not see anything specific to this.. unless I’m just missing it.

  • Lauren @ Oatmeal With A Fork

    Hi! I’m wondering how I get this to display on my homepage? Thanks!

  • linguine

    Hi Maria, are you able to help with the question above. I really don’t know where to add the centering div.

  • http://notes.shaldybina.com/ Maria

    Hi linguine, if you want to use the tag you need to call it in your theme php files yourself. Look for the tag that outputs post content and put it under that. You need to disable automatic appending in plugin setting if you use plugin tag.

  • http://notes.shaldybina.com/ Maria

    Lauren, you can use plugin tag in your theme files to put where you need. See this post for plugin tag.

  • http://notes.shaldybina.com/ Maria

    Hi fox, if you have a lot of posts, that are not indexed properly this plugin may slow down your website. You can use cache plugins to cache your pages.

  • http://notes.shaldybina.com/ Maria

    Hi Ali, you can use cache plugins for your pages

  • http://notes.shaldybina.com/ Maria

    Alma, you can use CSS settings to add top padding.

  • http://www.facebook.com/jr.lang.98 Jr Lang

    HELP PLEASE!!! For some reason the plugin is not working on pages (not posts), I am using the php code in the loop, my theme reads php fine, I set the relation to random, cleared cache, UNchecked the show on posts only and still nothing shows up.

  • http://notes.shaldybina.com/ Maria

    Hi, plugin does not on pages, because pages in WordPress don’t have categories and tags and there is no relations between them because of this.

  • AH

    GREAY plugin – BUT how do I get it this: to work on the index page?

  • AH

    this: get_related_posts_thumbnails();

  • http://www.facebook.com/jr.lang.98 Jr Lang

    I understand that, but it does work on my other site with shortcode and relationship set to random, related posts appear on all pages, but not here.

  • Luis

    Hi,

    Nice plugin, however it doesn’t show umlauts and accents. Did I miss something?

  • Koen

    Hi Maria, is it possible to limit the number of posts in the sidebar widget only? Say 3 in the sidebar but 4 at the bottom of the page?
    Thanks for your wonderful plugin, time and effort!

  • vsimoes

    Hello Maria,

    Amazing plugin, one of the best for the WordPress plataform.
    Have one question to you:

    I have the plugin working on single post.. with 8 thumbs (two lines of 4) and now i would like to insert only 4 on homepage, in middle of the loop. Already put the code on the right place but shows 8, of course.

    Any ideia to solve this? Any shortcode or any “trick” to do this? I love your plugin.. don’t want one for posts and another for homepage.

    Thanks

  • vsimoes

    have to remove the option “show only in posts”.
    check the configuration page. 🙂

  • http://www.facebook.com/profile.php?id=100004075393453 Baddy Vedmeddy

    Hi! can ask you to help me – hоw i can make plugin width like blog post width or (maybe increase the distance between thumbnails)?

  • Felipe

    Hi Maria

    First of all thank you for creating a great plugin.
    Second I would like to suggest an option that I think would be useful to everyone:

    – When choosing a custom field as the source would be good, if the script didn’t find an image, for it to fall back to the post thumbnail.

    – Or if you prefer, instead of having only one option for the image source, to have a priority list, like when choosing how to boot a PC.

    Anyway, nice work!

  • Cindy

    We had a problem with a lot of broken image links on a site, due to the original images being smaller than the media thumbnail size. I added “|| !file_exists( $basic_url ) to line #297 so it shows the default image if the file doesn’t exist. This is when there is no featured image so it gets the image from the post and tries to figure out the name of the resized file.

  • rdiffin

    I have read through the forum and see that you have said repeatedly that this plug-in will only show up on the single post page – however, is there a way to change the setting/code so it can display on any page on my website? Thanks!

  • Nghia

    Is there any way to load custom field first, if not available, load post thumbnail. Then if Post thumbnail is not available, load default image?

  • http://twitter.com/Pavel419 Pavel419

    Good afternoon.
    You have a great plugin. But there is one question.
    The bad news is that for each individual page thumbnails permanently set is chosen randomly. First, it is an additional load on the server, and secondly, for the search engines is flashing link that’s too bad. Can I do something like caching? When a URL is given for each specific set of related posts. Or is already there and I just have not found?

  • Pavel

    Мария, здравствуйте! Плагин отличный, спасибо Вам за разработку, у меня есть небольшая проблема. В сайдбаре я вывожу список дочерних категорий для шаблона категорий, когда переходишь на страницу поста естественно он не отображается, можно ли приспособить ваш плагин чтоб он выводил еще список дочерних категорий при переходе на пост из родительской категории. Т.е пример Мы в Категории А (родитель), пост находится в категории А (родитель) + категории С (родитель), в категории А есть дочерние категории аа и бб, при переходе по посту нужно вывести список дочерних категорий из категории А,так же если мы перешли из категории С? Для меня очень важно еще и связать категории, не подскажете решение, или если нет не встречали ли Вы похожего плагина для постов на категории?

  • http://www.darkdesigngraphics.co.uk/ Alasdair

    Hi, right for some reason the thumbs of the last two posts suddenly do not work properly. If I have the featured image set it does not use a cropped image as before and if I do not have any image set it just leaves it blank. I on all my previous posts it would either crop the featured image or the first image in the post.

    My theme is suffusion and I believe supports post thumbnails.

    These are the two posts that aren’t producing proper thumbnails:

    http://darkdesigngraphics.co.uk/logo-design/spartan-helmet-logo-design/

    http://darkdesigngraphics.co.uk/tattoo-designs/drawing-with-guidelines-lion-coat-of-arms-tattoo-design/

    Any help would be greatly appreciated!

  • Robert

    привет Maria,

    Could you explain again, how do we add the Related Post Thumbnails to the specific page? Maybe there is something I need to paste into the specific pages? Part 2: then after, how would RPT know which category of posts to assign to that page? Thanks for any help.

  • Robert

    Maria,
    Just for clarity, I mean how do a show RPT on a specific page (not specific post).

  • http://www.facebook.com/kirsten.douglas1 Kirsten Douglas

    Hi Maria, excellent work with this plugin, it’s so easy to use and customise with CSS. I have one question that I’m hoping you’ll be able to help with – I’m using the code:

    <?php _e( 'Other Events you may like’, ‘related-posts-thumbnails’ ); ?>

    My question is, if there are no related events by tag, how do I stop the heading? I have used this <?php _e( 'Other Events you may like’, ‘related-posts-thumbnails’ ); ?> as the top box doesn’t appear when adding the php to a specific page. Even better would be if you could advise how to add the top box automatically – I assume it doesn’t appear if there are no related posts by tag? Or could I add a different message to show if no events are related? Many thanks for any advice you can offer. 🙂

    Here is a link to my site with related events :

    http://www.classicgrand.com/events/william-control/

  • Farid G

    Thank you for your Plugin, but is it possible to do something like that? http://www.rem.az/1.jpg thumb is in the left side, text in the right side

  • Igor

    Hi, i am using your plugin and it is really awesome! But I need one tweak. How can I exclude one tag from the relation? I need this because my theme defines “Featured post” through defined tag and those posts often doesn’t have a lot in common.
    Thanks in advance.

  • Ajay raiger

    why showing big pictures in my website http://gadgetsmoll.com

  • Christina G

    Hello, is there a way to put the related posts after the comment link/labels? (under the entry-meta-bottom)

  • Сергей

    Добрый день, Мария!
    Спасибо за отличный плагин. Всё хорошо, но есть (как я почитал – не только у меня) серьезная проблема: при выборе метода выводов похожих статей по тегам, кроме нужных, очень часто выводятся и совершенно с другими тегами. Представьте себе: тема статьи про праздник в городе, внизу выводятся еще про три праздника и…. про два криминальных трупа (((( Очень шокирующе выглядит. В самой админке WP, если выбирать сортировку по тегам, выводится правильно. Сможете помочь?
    Заранее благодарю!

  • http://twitter.com/AShapourian Adam Shapourian

    Question: I am trying to add padding to the space between the thumbnail and the headline text. This is specifically in the “list” view. Where can I edit this setting within the plugin settings? TIA

  • http://morrisjfwong.com/ morrisjfwong

    Hi! Mary/Maria :
    I installed your plugin in my wordpress BLOG(s) and all works well with good looking and clean arrangement. Thank you. It helps!

  • Anonymous

    Thanks Maria for this great plugin. I,m trying to get it to work in my website. It is a multi-author website, where people post their art works. What I need is a way of showing the related posts by “author”. Is there a way to do that? Rgds

  • Beer

    I saw this plugin showing up in the slow query log. If you have a lot of posts, the $related_objects contains too many values for the query. A solution was to choose a smaller random set before building the WHERE query.

    $related_objects = array_rand( array_flip($related_objects), $posts_number * 5 );
    // the line above was added
    $where .= ” AND ID IN (‘”. implode( “‘, ‘”, $related_objects ) . “‘)”;