How to display related articles with featured images


In this post, we will discuss the way related articles are presented, which depends either on similarity in titles or decorations, meaning that whenever there are articles with the same some words in the title, the more they are related and also for the medals the same thing. Now we get to the heart of the topic I will explain two methods, the first with the addition of Yet Another Related Posts, the second method using a simple hack

Featured Image Display Requirements

You must make sure that the template you are using supports prominent images. There are two ways to use it:

  1. Using the Featured Images Feature in WordPress 2.9
  2. How to display featured image by TimThumb

So in this case, there will be a difference in the way the featured images are used and also in the use of the add-on or hack for related articles

Related Articles by Add

The plugin is downloaded from its WordPress page: Yet Another Related Posts

When you have finished installing the plugin, you will need a special form to display related articles. The plugin contains some templates for related articles. The format we are interested in is “yarpp-template-thumbnail.php.” You will find it inside the yarpp-templates folder, this last one is inside the extension folder on the following path:

/yet-another-related-posts-plugin/yarpp-templates/yarpp-template-thumbnail.php

This file supports the feature of prominent images as shown in the code below, I modified the foreign texts into Arabic that you can use when placing it in your template folder:

1<?php
2/*
3YARPP Template: Thumbnails
4Description: Requires a theme which supports post thumbnails
5Author: mitcho (Michael Yoshitaka Erlewine)
6*/
7?>
8<h2>مقالات ذات صلة</h2>
9<?php if (have_posts()):?>
10<ol>
11<?php while (have_posts()) : the_post(); ?>
12<?php if (has_post_thumbnail()):?>
13<li>
14<a href=”<?php the_permalink() ?>” rel=”bookmark” title=”<?php the_title_attribute(); ?>”>
15<div class=”thumbnail”>
16<?php
17if ( function_exists(‘show_thumb’) ) {
18show_thumb(300, 150, ‘img-responsive’, $post->ID, 100);
19} else {
20the_post_thumbnail(‘thumbnail’);
21}
22?>
23</div>
24<h3><?php the_title(); ?></h3>
25</a>
26</li>
27<?php endif; ?>
28<?php endwhile; ?>
29</ol>
30
31<?php else: ?>
32<p>لا توجد مقالات ذات صلة</p>
33<?php endif; ?>

view rawyarpp-template-thumbnail.php hosted with ❤ by GitHub

In the event that you are using the “ highlighted image by TimThumb ” that we talked about before, there is no need to change anything. The code contains a function. Check for the function that displays images by timthumb. All you have to do is change the width and height of the image to match your site.

After completing the preparation of the file responsible for the format of the relevant articles, we do the following:

  1. Create an empty template folder that you use on your site with the name “yarpp-template-thumbnail.php”
  2. Add a code from the codes that we showed above to this file and then save the changes
  3. Go to the add-on settings. Yet Another Related Posts
  4. From the settings, choose Display using a custom template

Note the following picture:

Add related articles

If you do not see the following settings, then you did not copy the file “yarpp-template-thumbnail.php” to the template folder that you are using on your site

You must add a special format for these articles because the extension does not contain these formats due to the different templates in terms of shape. You can rely on the format below to start changing its shape. The format is added to the style.css file of your site template

1/*
2تنسيقات الاضافة : Yet Another Related Posts
3يحب عليك تعديلها على حسب الشكل الذي تريد عرض المقالات به
4*/
5.yarpp-related {
6margin:0;
7padding:2%;
8width:96%;
9}
10.yarpp-related h2{
11
12}
13.yarpp-related ol {
14margin:0;
15padding:0;
16list-style:none;
17width:100%;
18}
19.yarpp-related ol li{
20margin:0;
21padding:0 0 0 1%;
22width:24%;
23}
24.yarpp-related .thumbnail{
25
26}
27.yarpp-related h3{
28
29}

view rawyarpp.css hosted with ❤ by GitHub

Here we have finished explaining the part about using a template to add Yet Another Related Posts Plugin

Hack view related articles

As for the use of the hack, it will not be like the addition in its features because it only depends on the decorations, unlike the addition. Yet Another Related Posts Plugin As for the hack, I modified it to work with the two methods of displaying images automatically

The code is the same as you used for the YARPP plugin template, it means the same thing for the featured images and this is the last result of the hack

1<?php
2/*
3* Security : blocking direct access
4* Source: http://codex.wordpress.org/Theme_Development#Template_Files
5*/
6defined(‘ABSPATH’) or die(“No script kiddies please!”);
7
8global $post;
9$posts_number = ‘4’;
10$queried_object = get_queried_object();
11
12$posts_array = wp_get_post_tags($post->ID);
13
14echo ‘<h2>مقالات ذات صلة</h2>’;
15echo ‘<div class=”custom-related”>’;
16if ($posts_array) {
17
18$posts_ids = array();
19foreach($posts_array as $individual_posts)
20$posts_ids[] = $individual_posts->term_id;
21$param = array(
22‘post_status’ => ‘publish’,
23‘tag__in’ => $posts_ids,
24‘post__not_in’ => array($post->ID),
25‘posts_per_page’ => $posts_number,
26‘ignore_sticky_posts’ => 1
27);
28$related_query = new wp_query($param);
29
30echo ‘<ol>’;
31
32if( $related_query->have_posts() ) {
33?>
34<li>
35<a href=”<?php the_permalink() ?>” rel=”bookmark” title=”<?php the_title_attribute(); ?>”>
36<div class=”thumbnail”>
37<?php
38if ( function_exists(‘show_thumb’) ) {
39show_thumb(300, 150, ‘img-responsive’, $post->ID, 100);
40} else {
41the_post_thumbnail(‘thumbnail’);
42}
43?>
44</div>
45<h3><?php the_title(); ?></h3>
46</a>
47</li>
48<?php
49}
50echo ‘</ol>’;
51
52} else {
53echo ‘<p>لا توجد مقالات ذات صلة</p>’;
54}
55echo ‘</div>’;
56$backup = 0;
57$post = $backup;
58wp_reset_query();
?>

view rawrelated-post.php hosted with ❤ by GitHubA simple note: I made a slight modification to the hack for those who encountered a problem using it and changed the method of insertion in order to understand the method clearly for those who are not good at dealing with WordPress

The file we will be working on is located in the following path:

/wp-content/themes/template-name/single.php

How the hack works is as follows:

  1. Download the hack “ custom-related-posts.php ” and decompress the file, you will find a php file named custom-related-posts.php
  2. Upload the file to the template folder you are using
  3. Now you have to modify the single post display file in the template you are using, which is single.php
  4. Search for the_content function to display the content of the post. After finding it, copy the code directly below it in the single.php file as you can see in the following code
1<?php the_content(”); ?>
2<?php include (TEMPLATEPATH . ‘/custom-related-posts.php’); ?>

view rawsingle.php hosted with ❤ by GitHub

Do not forget to have the name of the hack as the name of the file we called under the_content

Now you must add a special format for these articles. You can rely on the format below to start changing the look of articles related to the format being added to the style.css file of your site template

1/*
2تنسيقات الهاك
3يحب عليك تعديلها على حسب الشكل الذي تريد عررض المواضيع بها
4*/
5.custom-related {
6margin:0;
7padding:2%;
8width:96%;
9}
10.custom-related h2{
11
12}
13.custom-related ol {
14margin:0;
15padding:0;
16list-style:none;
17width:100%;
18}
19.custom-related ol li{
20margin:0;
21padding:0 0 0 1%;
22width:24%;
23}
24.custom-related .thumbnail{
25
26}
27.custom-related h3{
28
29}

view rawrelated-post.css hosted with ❤ by GitHub

So here we have finished this section dedicated to the hack

Related Articles – Suggested Additions

There are some add-ons that have the same role as the add-on or hack that we talked about in this article, namely:

  1. Related Posts Slider
  2. Related Posts Thumbnails
  3. Inline Related Posts
  4. Related Posts

Here we have reached the end of displaying related articles with featured images that’s all there is to it

If there is any query please put a comment? And don’t forget to subscribe to our mailing list, thank you very much

Peace, mercy and blessings of God

Leave a Comment