Set Up YARPP Custom Template Related Posts With Thumbnail

By Anil Gupta, 0  Tech Tips

Step by step process to set up YARPP custom template for related posts with thumbnails at a custom location on your web page.


The Requirement

We have just implemented Boostrap on our blog and wanted to use the YARPP’s (Yet Another Related Post Plug-in for wordpress) custom template feature to show related posts with thumbnails.

There is an out-of-the-box related posts with thumbnail feature from YARPP, but the problem with it is, you can only show it up at the bottom of a post.

I could not find any option to choose other location and hence jumped on to use YARPP custom template feature. One thing leading to another, I struggled to find a good article listing the step by step process to use this feature.

Having implemented it now on this website, here are the steps for you:

  1. Copy YARRP template files

    The first important point is that YARPP allows custom templates but the template file name cannot be changed. As far as I could test, it only identifies the ones that it ships along with the plug-in package.You can find these files in its Plug-in folder

    \wp-content\plugins\yet-another-related-posts-plugin\yarpp-templates

    YARPP custom templates are available in its Plug-in folder

    Copy and paste all these files (or just the thumbnail one as I did – last in the image above) in your active theme’s folder.
  2. Activate Custom templates

    Note that if you have NOT completed above step, the YARRP would not let you enable the custom template option.

    Go to WordPress Admin -> Settings -> YARPP -> Display Options

    Choose the following settings:

    • Un-check Automatic display check boxes.
    • Select the &lt?php Custom option.
    • Choose a template from the drop-down option box. I chose the thumbnail one. The options would only list the ones that were copied to your theme’s folder.
    YARPP custom templates - wordpress settings

    YARPP custom templates – wordpress settings
  3. Modify Custom template File

    This is the sample modified custom YARPP-template-thumbnail.php code that I used. The CSS classes are based on the bootstrap CSS library.

                <?php
    /*
    YARPP Template: Thumbnails
    Description: Requires a theme which supports post thumbnails
    Author: Anil Gupta (AM22 Tech)
    */ ?>
    
    <?php if (have_posts()):?>
    <div class="list-group">
        <?php while (have_posts()) : the_post(); ?>
    		<?php if (has_post_thumbnail()):?>
    		<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>">
                <div class="thumbnail"><?php the_post_thumbnail(); ?>
                    <div class="caption"><small><?php the_title(); ?></small></div>
                </div>
            </a>
            <?php else:?>
            <a class="list-group-item list-group-item-success" href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a>
    		<?php endif; ?>
    	<?php endwhile; ?>
    </div>
    
    <?php else: ?>
    
    
    <?php endif; ?>
    

    You can copy and paste the above sample code or use the default one as provided by mitcho – the plugin author.

  4. Choose a location for related postsI chose the left sidebar, you can choose whatever you want. This is the piece of code that would display the posts with thumbnail using custom template.
                <?php related_posts(); ?>
    

    Remember, the number of posts to display and all other settings can ONLY be set at the YARPP settings in WordPress admin.

    The related_posts() is the function that internally creates a list of related posts (picks number from YARPP settings) and then uses the custom template that you chose to create the HTML rendering code.

    You can now use this function at any number of places (above post, below post, sidebar or anywhere) to display the posts in your own custom style.

  5. Remove YARPP CSS files (Optional)

    You may want to remove the YARPP CSS files from loading, if you are using your own custom CSS.

    If you have not modified the custom thumbnail template, you can skip this step.
    But, if you are using Bootstrap based theme like us, it is better to off-load them and decrease the page load time.

  6. Custom Thumbnail Size (Optional but recommended)

    By default, the YARPP would fetch the wordpress’s ‘featured image’ and show on the posts. If you want to specify something custom, you should add this code to the active theme’s functions.php file:

    // post thumbnail support
    if ( function_exists( 'add_image_size' ) ) add_theme_support( 'post-thumbnails' );
    
    if ( function_exists( 'add_image_size' ) ) 
        {
    	    add_image_size( 'yarpp-thumbnail', 100, 50, true );
    	    
        }
    

    The syntax is add_image_size(‘yarpp-thumbnail’, $width, $height, true);

Demo?

You can see it in action on this very blog that you are reading. Here is a snapshot for your reference:

Show related posts in left sidebar with YARPP custom templates thumbnail

Show related posts in left sidebar with YARPP custom templates thumbnail

If you have more ideas on making YARPP posts look better, do share them in the comments.
Reference: YARPP developer Mitcho’s article about custom templates