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.

  • Lea Hudson

    Hi! I would like to know how to center the plugin using css. Also, the “related posts” are stucked to the “Posted on… 3 comments” below. How do I add some space/lines between them?

    Sorry if I don’t have the right vocabulary, I’m a beginner :)

    Thanks!

  • http://www.facebook.com/mailking Coen Wubbels

    I’ve just updated plugins and wp and I have come across some strange things. On pages with single posts your “Related Posts Thumbnails” appear twice in the sidebar with some strange sharing buttons underneath. And I don’t even want them in the sidebar. I think there is some conflict with the new “WYSIWYG Widgets” plugin?

    I have activated your “Developer mode”. Could you please have a look at my site:

    http://www.landcruisingadventure.com/the-tarantula-road/

  • http://twitter.com/agentbey David M. Bey

    Is it possible to use the shortcode on pages or only on posts?

  • Abrahan Enrique Nunez

    Excelent! You rock maria! awesome plugin :)

  • http://www.bloodygoodgames.com/ BloodyGoodGames

    I have the same problem on one of my websites. The plug in works great on other sites, but on one site the photos are MASSIVE. Can’t fix it no matter what i try :(

  • lukeMV

    I am trying to run this on a custom post type without luck. Is there something that I’m overlooking?

  • http://morrisjfwong.com/ morrisjfwong

    Dear sir : I apply your plugin in my personal blog article, it works good and well. Thank you…have a nice day!

  • Spike

    Brilliant plugin: much lighter and easier than many others. Thanks very much! I do have one question, though:

    Is there a way to pass parameters to the php function, so that it could be used to generate (for example) x random images from the entire database, with or without criteria?

    I ask because it’d be nice to be able to use the plugin to generate content for a “random posts” page, with a given number of items, but it doesn’t work on pages. If the function took parameters, I could set it to random, tell it how many posts to find and bingo! :o)

  • Farzad

    Hi, I choose 4 post do display, but it shows only 3.

    You can check that here for example just before the comments section: http://baghbagho.com/make-bright-eggs/

  • http://www.Sezin.org/ Sezin

    Hello,

    Thank you for this great plugin!

    I am having a slight problem, though: I’ve set the plugin to only appear on posts, but related posts are still appearing on all my pages. Can you help me figure out how to turn this off? I’m more than happy to donate if we’re able to solve this. Thanks a million,

    Sezin

  • http://lifelearningtoday.com/ Kris

    Just wondering if this plugin will continue to be maintained and supported as wordpress evolves? Thank you!

  • Farzad

    Hi Maria, I asked this question a few days ago & didn’t received any answer. Maybe this time help. Note I didn’t find my answer in the manual.
    My problem is: I choose 4 number to show, but it shows only 3 related posts. It shows 3 number always, when I choose 1,2,3,4…
    Thank you.

  • DAN

    You need to make a CSS for all the styles that you have and add a feature that the images will be responsive to the browser size.
    Please update me if you will update it.
    Best regards

  • Danny

    How to make images to be responsive?
    Thanks.

  • Serkan Izgi

    hi maria! i would like to change the text format to arial bold. what do i have to do?

  • Wendy Saide

    Hi can u help me, i cant use this pluguin on my page http://www.laginecologa.com i had installed but it doesnt work

  • Elvira DeCuir

    Question: all of a sudden on my post is showing the Related Thumbnails post twice, the first one not showing the pictures and having spacing issues – can you please advise how I can fix. Here is an example: http://3d-memoirs.com/holidays-for-heroes

  • Andrei Tudor

    Hi Maria. I’m new to wp and I find your plugin extremely useful. Thank you for it. The problem is I want to use it once at the end of the post, and 3 or 4 times in the sidebar widget, each time for a different main category. How can I do that? I don’t find the options to set a different category for each related-posts widget. If there is not such an option, can you give me a php function where I will insert the category ID? thanks again

  • Sasha

    HI, I updated to WordPress 3.8 and some of the thumbnails are not showing. I regenerated thumbnails with multiple plugins (including the ones suggested) but this hasn’t solved the problem. I’ve turned on developer mode at http://www.sashamuse.com Maybe when you have a chance you can suggest something for me to do. I can’t think of anything else.
    Thanks!
    Sasha

  • http://maleday.ru/ Maleday.ru | Мужской журнал

    Перестал отображаться результат работы плагина.

  • http://blog.igormroz.com/ Igor Mróz

    Hi, after auto-upgrade to wordpress 3.8.1 this plugin started to slow down my blog. I’m sure it’s the one cause I plaed “enable disable” plugin game. And that’s one causing single post to load 30-40 seconds (actually freeze for 30-40 seconds before it continues to load)

    ANy other reports like that? Any ideas? Anu hopes for fixes? :-)

    Best Regards

  • dilshan

    how. editing the file u mean ?

  • SusanneCA

    I would love to use this plugin but it is VERY out of date. It says it is only compatible up to WordPress 3.2 and WordPress is up to 3.9. Can you let me know when this is going to be updated? I looks great but I don’t want it to break my site, thanks.

  • Pingback: Herramientas para hacer feliz a un Community Manager | Croma Visual - Agencia Digital 2.0()

  • Muhammad Faheem

    hi

  • http://samglover.net/ Sam Glover

    Is there an easy way to add a UTM code after the URL for each post? I’d like to see whether people are actually clicking on the links.

  • Anonymous

    Hi Maria,
    I have a large database of posts.
    Do you know how can I speed the query? I found in query monitor thousands of querys that I dont need and slow the load.

    It would be useful the option to order by date the results as well.

    thank you.

  • http://www.brightverge.com/ Bright Verge

    Dear Admin im looking some related posts wordpress plugins
    for my web site Bright Verge plz suggest some tips. Kindly
    also tell some email subscription plugins pop or widgets etc…

  • http://davefagg.com.au/ Dave Fagg

    I am wanting to change the location of “Related posts”. I have an author plugin that appears at the end of each post. I’d like that to come first, and then Related Posts.

    Is there a way to configure this?

  • BangkokRealProperty

    Though this plugin does not update for more than 2 years but it’s still effective. We use it on our website http://bangkokrealproperty.com. We do hope someone will carry on this plugin.

  • Paul

    Hi, I have just noticed the plugin has errors: Notice: Undefined index: onlywiththumbs in /var/sites/p/paulunderhill.com/public_html/wp-content/plugins/related-posts-thumbnails/related-posts-thumbnails.php on line 421
    Notice: Undefined index: relpoststh_cleanhtml in /var/sites/p/paulunderhill.com/public_html/wp-content/plugins/related-posts-thumbnails/related-posts-thumbnails.php on line 423

    Notice: Undefined index: relpoststh_categories in /var/sites/p/paulunderhill.com/public_html/wp-content/plugins/related-posts-thumbnails/related-posts-thumbnails.php on line 445

    Notice: Undefined index: relpoststh_show_categories in /var/sites/p/paulunderhill.com/public_html/wp-content/plugins/related-posts-thumbnails/related-posts-thumbnails.php on line 447

    Notice: Undefined index: relpoststh_devmode in /var/sites/p/paulunderhill.com/public_html/wp-content/plugins/related-posts-thumbnails/related-posts-thumbnails.php on line 448

    Notice: Undefined index: relpoststh_custom_taxonomies in /var/sites/p/paulunderhill.com/public_html/wp-content/plugins/related-posts-thumbnails/related-posts-thumbnails.php on line 450

  • http://www.bracontece.com.br bracontece

    Tou usando no meu site muito bom. http://www.bracontece.com.br/