YARPP tweaks

By

Tony

,

April 9, 2023

These are the customizations I made to get “Yet Another Related Posts Plugin”, YARPP, doing what I wanted on the Zoyinc site. Bear in mind this is being done for the “Twenty Twenty-Three” theme which is “designed to take advantage of the new design tools introduced in WordPress 6.1” using Gutenberg and blocks.

It is worth noting that there were previously significant issues with performance for YARPP. The plugin was purchased by Jay Meattle and a team of dedicated developers. Apparently they then began optimizing YARPP to a point where there are now apparently no significant performance issues – see “YARPP—Yet Another Related Posts Plugin—Now Supported On WP Engine” from WP Engine https://wpengine.com/blog/yet-another-related-posts-plugin-now-supported-wp-engine/ and

Plugins

Install plugins

Install the following plugins:

YARPP – Yet Another Related Posts Plugin” by YARPP
Advanced File manager by modalweb

Disable or remove other related posts plugins

It appears that many of these plugins share the same name for functions and this can cause obvious problems. For this reason I suggest removing or disabling all other “related posts” plugins such as “Custom Related Posts”, “WordPress Related Posts Thumbnails”, and “Similar Posts”. For the purposes of this post, I have actually deleted the plugins.

Configure YARPP

Go to “Dashboard | Settings | YARPP”

Ensure you disable “Automatically display related content on”. By default “Posts” will be selected. We will be putting YARPP specifically where we want it. Remember to Save your changes. It should end up looking like:

In my case I set the “Maximum number of posts” to 4. Note you may also need to set it to 4 on any templates where you use it – such as the “Single” template.

We need to create a custom file, I do this using File Manager, this should go to:

/srv/www/zoyinc/wp-content/themes/twentytwentythree/yarpp-template-zoyinc1.php

Alternatively you can create it in File Manager:

Then edit it in the File Manager “Code Editor”. My file looks like:

<?php
/*
YARPP Template: Zoyinc Thumbnails
Description: Zoyinc custom YARPP thumbnail to display 'medium' thumnails and subjects. https://www.zoyinc.com
Author: Zoyinc
The tags used in YARPP templates are the same as the template tags used in any WordPress template. In fact, 
any WordPress template tag will work in the YARPP Loop. You can use these template tags to display the excerpt, 
the post date, the comment count, or even some custom metadata. In addition, template tags from other plugins will also work.
Special template tags which only work within a YARPP Loop:
1. the_score()		// this will print the YARPP match score of that particular related post
2. get_the_score()		// or return the YARPP match score of that particular related post
Notes:
1. If you would like Pinterest not to save an image, add `data-pin-nopin="true"` to the img tag.
*/
//
// Specify the thumbnail size
//
$thumbnailWidthPx = get_option('medium_size_w');
$yarppHeading = "Related";
$headingHeight = "40";
$headingUnderline = "3";
$headingSpacer = "10";
$spacerBetweenThumbnails = "20";
$titlePadding = "5";
$titleBackground = "#f6f6f6";
$headerUnderlineColor = "black";
$headerUnderlineHeight = "3";
$spacerBelowHeader = "25";
// Header, underline and spacer
?><div style="width:<?php print($thumbnailWidthPx); ?>px;height:<?php print($headingHeight); ?>px;border-bottom-color:<?php print($headerUnderlineColor); 
?>;border-bottom-width:<?php print($headerUnderlineHeight); ?>px;padding-bottom:<?php print($titlePadding); ?>px;"><h4><?php print($yarppHeading); ?></h4></div>
<div style="width:<?php print($thumbnailWidthPx); ?>px;height:<?php print($spacerBelowHeader); ?>px;"></div>
<?php 
if ( have_posts() ) :
	$postsArray = array();
	while ( have_posts() ) :
		the_post();
        
        // Thumbnail, title and spacer for each post
        ?><div style="margin:0;"><a href="<?php the_permalink(); ?>" rel="bookmark norewrite" title="<?php the_title_attribute();  ?>"><div style="vertical-align: bottom;"  ><?php 
        the_post_thumbnail( 'medium', array('style' => 'vertical-align: bottom;') ); ?></div><div style="padding:<?php print($titlePadding); ?>px;margin:0px;width:<?php print($thumbnailWidthPx); ?>px;background-color:<?php  print($titleBackground); ?>;"><?php the_title(); ?></div></div>
        <div style="width:<?php print($thumbnailWidthPx); ?>px;height:<?php print($spacerBetweenThumbnails); ?>px;"></div></a><?php
	endwhile;
endif;
?>