Similar entries in the WordPress article. Plugins for displaying similar posts in WordPress

Greetings, dear ones! Few people know that, among other things, I also study web programming. This article opens a new section on our website dedicated to code. No, these are not lessons on any programming language, but simply useful code snippets that may be useful to you if you have your own website. For example, today we will talk about display similar posts to WordPress engine . Why this topic? Because I myself recently encountered this “problem” and want to help others.

Sometimes it happens that in the design theme WordPress opportunity display of similar posts is already present by default and everything is beautifully designed. However, most often this opportunity is not provided.

And we all know very well that “ similar posts"at the end of the article or on the sidebar has a very positive effect on behavioral factors(internal SEO optimization). And the first thing that comes to mind is to install a plugin that would display these very similar posts.

But there is always some kind of “BUT...”!

Firstly, any plugin is an additional load on the site and, as a result, slows it down a little. Therefore, experienced webmasters try to replace some plugins with clean code whenever possible.

Secondly, you can spend a day searching for a suitable plugin and setting it up, but in the end you won’t get the desired result. Yes, I also tried several of these plugins, and one of them even hung on my site for almost six months. But he didn’t look very good, to put it mildly (we won’t name names).

If you have even the slightest knowledge of the WordPress engine and styling (CSS), then the best solution will embed the code directly into your website template. Let's get started!

After a short search, I found such a ready-made code on the Internet, I was delighted, but my joy did not last long and now you will understand why.

Here is the code itself (click):

ID);

"; while ($my_query->have_posts()) ( $my_query->the_post(); ?>!}">

For those who understand the code at least a little, it is clear what is used here php language, some standard WordPress features and it's all elegantly wrapped up in HTML markings We paste it in the right place (for many it is the single.php file in the theme root). And what do we get as a result? Here's what:

How "Related Posts" looks without thumbnails

Yes, this code showed us similar posts, but it showed them in a regular list and without thumbnails. Maybe this option will suit someone, but not me. We urgently need to do something about this.

First you need to get rid of the list. To do this, replace the tags “ ul" (unnumbered list) to tags " div" (simple block element) in two places ( ! ) and add a meaningful identifier to it (so that it can be conveniently styled later). Then we simply remove the tags of the list elements " li"(just leave their contents).

Inside the "div" you are now left with a bare link with the post title as the text. For convenience, I wrapped the title in another tag. And now the most important thing is to add a thumbnail to the posts. For this there is standard WordPress feature— the_post_thumbnail() , which returns us a thumbnail of the post in the “ tag img».

Now our code looks a little different. Our related posts are already displayed with thumbnails, and as you can see, we were able to achieve this without the help of third-party plugins. But I don’t recommend leaving everything like this. It still looks ugly. Huge pictures that span the entire page. Also in terrible quality. And under them are signatures in blue (regular links). You can paste this code and see everything with your own eyes. Although, insert it in any case, because we won’t get into this code anymore.

A little altered, compare (click):

ID);
if ($tags) (
$tag_ids = array();
foreach($tags as $individual_tag) $tag_ids = $individual_tag->term_id;
$args=array(
'tag__in' => $tag_ids,
‘orderby’=>rand,
'caller_get_posts'=>1,
‘post__not_in’ => array($post->ID),
‘showposts’=>5
);
$my_query = new wp_query($args);
if($my_query->have_posts()) (
echo '

’;
while ($my_query->have_posts()) (
$my_query->the_post();
?>
» rel=»bookmark» title=»»>

}
echo '

’;
}
wp_reset_query();
}
?>

Let's move on to point three or which one do we already have? Here I'll show you how I formatted my similar posts, but you might want to do it differently. The style code that I will provide below needs to be inserted into the styles file of your site (preferably at the end for convenience). It is located at the root of your site's theme and is called style.css (but it can also be in a different folder, for example, “css” or “styles”). Here's the code itself:

Style code (CSS):

#similar_posts(
margin: 30px 0;
}

#similar_posts h4(
margin-bottom: 15px;
}

#similar_posts_wrapper(
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
}

#similar_posts_wrapper a(
flex-basis: 19%;
text-align: center;
text-decoration: none;
color: inherit;
border-radius: 5px;
transition: background-color 0.3s;
}

#similar_posts_wrapper a img(
padding: 3px;
border-radius: 5px;
}

#similar_posts_wrapper a:hover(
background-color: lightblue;
}

@media screen and (max-width: 767px)(
#similar_posts_wrapper(
flex-wrap: wrap;
justify-content: space-around;
}

#similar_posts_wrapper a(
flex-basis: 160px;
margin: 25px;
}
}

Stylized “Related Posts.” Do you feel the difference?

As a result, we got beautiful “similar posts” with thumbnails, which are also adaptive and with a barely noticeable smooth transition to the hover state (on mouse over). I hope everything worked out for you too.

Instead of the result:

Don't forget that the first code must be inserted into files with the .php extension. If you want to insert similar entries into the sidebar, then look for the file “ sidebar.php" But you won’t be able to simply insert this code into a sidebar widget.

Congratulations, you are now on your website similar posts with thumbnails, which you installed yourself without using plugins. And they most likely look exactly as you planned. And if not, then write in the comments what you can’t do, I’ll help in any way I can.

PS: At first, this article may not have similar entries, because we have just opened this section and, in fact, there are no other articles on the site with the same tags. And the code is guided by the tags that you write for your articles, so don’t forget to fill them out, this is important!

Did you read to the very end?

Was this article helpful?

Not really

What exactly did you not like? Was the article incomplete or false?
Write in comments and we promise to improve!

Good afternoon, dear readers!

Today we will make similar posts for a WordPress site without a plugin. This will be a continuation of the previous article.

In the last post I showed how to make similar posts using . It implements this functionality quite well and I recommend using it. But it can be replaced with very simple code that can also do the job quite well.

I am just writing this article when I checked this code on my blog. Everything works great. The block looks exactly the same.

As you can see, everything is similar to the plugin. And everything is done quite simply. You just need to place one part of the code in the place where the block of similar entries will be displayed.

However, I don’t know for sure whether pictures will be displayed if thumbnails for posts are not specified. I have all the thumbnails set, so I couldn’t test it on any article. Therefore, most likely, it will be necessary to assign thumbnails to each article. And, if there are a lot of them, then you will need to suffer a little. You also need your template to support thumbnails, because if this functionality is not present, then you will not be able to assign them to posts.

First, I give a video tutorial where I showed how to do everything, and then there is a text article with all the codes and explanations.

W is actually part of the code itself.

ID); if ($categories) ( $category_ids = array(); foreach($categories as $individual_category) $category_ids = $individual_category->term_id; $args=array("category__in" => $category_ids, "post__not_in" => array( $post->ID), "showposts"=>4, "orderby"=>rand, "caller_get_posts"=>1); $my_query = new wp_query($args); if($my_query->have_posts()) ( echo "

"; while ($my_query->have_posts()) ( $my_query->the_post(); ?>

" title="!}">

"; ) wp_reset_query(); ) ?>

< div class = "related_posts" >

< div class = "related-zagolovok" >Be sure to check out similar posts< / div >

$categories = get_the_category ($post -> ID ) ;

if ($categories) (

$category_ids = array () ;

foreach ($categories as $individual_category ) $category_ids = $individual_category -> term_id ;

$args = array (

"category__in" => $category_ids ,

"post__not_in" => array ($post -> ID ) ,

"showposts" => 4 ,

"orderby" => rand,

"caller_get_posts" => 1 ) ;

$my_query = new wp_query ($args) ;

if ($my_query -> have_posts()) (

echo "

" ;

while ($my_query -> have_posts () ) (

$my_query -> the_post () ;

< div class = "obz" > < a href = " " title = " !}" >

< div id = "related_posts_box" > < / div > < / a > < / div >

echo "

" ;

wp_reset_query();

< / div >

To set up similar entries, we are interested in 3 lines in this code:

Line 9 - is responsible for the post display mode. Now it should display similar posts from the same category. That is, if a post is in a certain category, then only posts from that same category will be shown in the block. This creates interlinking within each category;

If we want to change this parameter, we can display posts by tags. If you set them for articles, the code will display posts with similar tags. To do this, you need to replace the entire 9th line with ‘tag__in’ => $tag_ids,.

Line 11 - the number of displayed posts in the block. As I already said in the previous article about the similar posts plugin, the optimal number of posts in terms of usefulness for linking is up to 5 posts. I still left 4 posts for output;
Line 12 - random output of records, that is, every time the page is refreshed in a certain article, a new list of similar records will be generated. In this code, I preferred to leave this parameter and if you now try to refresh the page, you will see that a completely different list of posts will appear. and this will happen with every update. This kind of random (random linking) helps a lot.

If you want the list to be fixed all the time, you need to remove the 12th line completely. But I didn’t like this option, since a list of the last 4 posts in the category will be displayed all the time and it will not change, no matter what post they are in. I wasn't very happy with this. Maybe yours will be different. You try it.

To display similar posts without a plugin, you need to paste this code into your theme's single.php file where the content output ends. I have an article on how to determine this place. There he described everything in detail and gave a video lesson. It will help you find out the place where you need to place such codes.

The final version in my file looks like this.

After this, similar posts should already be displayed. But to complete the procedure, they need to be properly prepared. I did not outline each post in this block with some kind of frame. We strive for simplicity. I give you my styles, which need to be placed in the style file of your template style.css.

Related_posts ( float: left; margin: 15px 0; width: 100%; ) #related_posts_box ( min-height: 205px; float: left; margin: 2px; padding: 6px 3px 0px 0px; width: 166px; color: #004A95; ) #related_posts_box:hover ( text-decoration: underline !important) .related-zagolovok ( margin-top: 5px; margin-bottom: 9px; padding: 15px 0 0 0; color: #34495e; font-family: arial; font -size: 24px; line-height: 130%; font-style: italic; border-top: 1px solid #ddd;) .obz (padding: 0 12px 0 6px; width: 152px; float: left)

related_posts(

float: left;

margin: 15px 0;

width: 100%; )

#related_posts_box (

min-height: 205px;

float: left;

margin: 2px;

padding: 6px 3px 0px 0px;

width: 166px;

color : #004A95 ; )

#related_posts_box:hover (

text-decoration : underline !important )

Related-title (

margin-top: 5px;

margin-bottom: 9px;

padding: 15px 0 0 0;

color : #34495e ;

font-family: arial;

font-size: 24px;

line-height: 130%;

font-weight: bold;

font-style: italic;

text-align: center;

border-top : 1px solid #ddd ; )

Hello, friends! Today I will show you how to withdraw similar posts with images on WordPress after articles and in the sidebar using Related Posts Thumbnails plugin. Of course, there are many ways to solve such a problem. For example, outputting a block without a plugin using code or using the 2leep service. But I will tell you about what I used myself. And we’ll also talk about whether it’s worth using the display of similar posts with thumbnails at all. And in particular, using the above plugin.

First, it’s worth understanding why we need the “Related posts” block at all, no matter with or without pictures:

Firstly, it creates internal linking on the site, which is good for SEO.
Secondly, it attracts readers' attention and increases page views, which improves behavioral factors.

If you already have a plugin installed to display related posts in text form, is it still worth installing Related Posts Thumbnails? Here, of course, it is difficult to answer unequivocally.

The advantage of a block with thumbnails is that beautiful pictures attract more attention. This means that there is a possibility that their click-through rate will be higher than that of their text counterpart. However, everything needs to be tested. For example, Alexander Bobrin (asbseo.ru) believes that even a text block in this form is not needed.

There is common sense in this. The fact is that links with anchors are usually generated there from the titles of articles, and not from the Title. And, as you know, we write article titles for visitors and they are not always relevant to the key query. So it turns out that such links are not thematic, which is not good.

Therefore, it is up to you to decide whether to install such a block or not. But it's definitely worth a try.

Now I will share my experience. For a long time I displayed similar posts with pictures on this blog, but then I left only text output. For this I use Yet Another Related Posts Plugin. I think it still does some good. Moreover, I always have keywords in my titles.

Why did I give up miniatures? After analyzing the statistics, I did not notice any significant changes or increase in page views. But I must say that I did not conduct a detailed analysis. For example, you can look through Webvisor in Yandex.Metrica to find out exactly where the most clicks are made. Obviously, the theme of the blog and the quality of the thumbnails themselves also play a big role. For example, on websites about cars this would be more than appropriate. By the way, on my other WordPress blogs I still use similar links with thumbnail images. It looks like this:

There are two more reasons for my refusal of the Related Posts Thumbnails plugin:

If you open the same page several times, the links to similar articles will change. It is not known how search engines will be able to index them properly and whether such random (dynamic) links are needed on the blog.
If thumbnails are displayed simultaneously after articles and in the sidebar, they may be duplicated on the same page.

It is worth noting that a significant improvement in behavioral factors on the site can outweigh these disadvantages. Therefore, I repeat once again: we need to test. Let's move from theory to practice.

This plugin adds related thumbnails to posts after posts and in the sidebar. By default, the thumbnail of the first image in the article is used.

Go to the blog admin panel “Settings” – “Related Posts Thumbnails”. The settings page will open. In principle, everything is clear here, but I’ll explain something.

General display properties. Here we choose whether we will display images automatically or using code. In the second case, a block with thumbnails can be inserted where it is most appropriate. The remaining settings can be left as in the figure below. Just change the “Top Text” at your discretion.

Source of thumbnails. If you do not use image thumbnails in all posts, check the box.

Style options. We choose how to display records, as a block or a list. You can customize the appearance of the block without resorting to CSS. Play around with “ Text block height

“so that long post titles are displayed normally. Connection settings.

This point is important for SEO. I believe that it is better to use one of the first three options so that the text of the links is as relevant as possible to the article in which they are located. After all changes, click the ““.

Save changes

1 2 3

By default, thumbnails are left aligned, which doesn't always look nice. This can be fixed by indenting the related-posts-thumbnails.php file in the plugin editor. It’s better to enclose the output code in a div block, as the plugin author advises: To display images with similar posts in the sidebar

, you need to go to the admin panel at the address “Appearance” - “Widgets”. Find the widget on the left with the name of the plugin and drag it to the sidebar.

A detailed description and all settings of the plugin can be found on the blog of the developer, Russian girl Maria Shaldybina, at this link. Even though the blog is in English, I hope you can understand it.

As I already mentioned at the beginning of the article, similar WordPress posts with images can be displayed using the 2leep service. By the way, this service can still be used to receive free traffic to the site. In this case, widgets with thumbnails installed on other sites will contain links to your blog. That is, visitors to other blogs, by clicking on the picture under the article, will go to your page. You can read more about this on the blog jonyit.ru. It describes the installation and configuration of such widgets.

In general, choose those options that can increase the number of page views and the time visitors spend on the site. Thus, improve behavioral factors on your blogs. You can speak about the results in the comments. That's all, see you there!

Friends, hello everyone. Today we’ll talk about how to create a list of related articles in WordPress without a plugin. Similar materials improve behavioral factors. They are usually placed at the end of the article so that the visitor can read other articles on the topic.

Thus, if you interest a visitor, he will stay on your site longer, and similar articles will help him better understand the solution to his problem.

Until recently, I used the WordPress Related Posts plugin for this on my blog. A good plugin, it can be beautifully designed to suit any design, displaying similar articles.

Only in the struggle for site loading speed, I decided to replace this plugin with simple code. Because this plugin slowed down the loading of my blog from 0.5 to 0.9 seconds depending on the time and load.

And so I decided to use php code to display similar articles, which allows you to display articles by sorting them by tags or categories (headings).

As a rule, a list of similar articles is displayed at the end of the article. In most WordPress themes, the single.php file is responsible for articles (posts). It is in this file that you need to insert the code responsible for displaying similar articles.

Warning: Make a backup copy of the single.php file before starting work.

Step 1: Find a place to paste the code.

We all have different patterns and their structure is slightly different from each other. For example, in my theme there is no single.php file at all. I created , and do all the modifications through the theme function file. And this is an order of magnitude more difficult than editing regular files.

To determine the correct place to insert the code, you first need to look at the page, find the main elements on it, and then in the source code it will be easier for you to find the required place for the code.

As you can see in the screenshot, the right place to insert the code is after the end of the article, before the navigation.

So, open the WordPress admin panel - "Appearance" — "Editor" — "One entry (single.php)". And in the file, look for the code responsible for displaying the article. It will look something like this:

...

After this fragment you can insert the code of similar articles. In my example, the navigation code will go further.

Step 2: Insert code for similar articles.

Once you have decided on the location, paste this code:

ID); if ($tags) ( $tag_ids = array(); foreach($tags as $individual_tag) $tag_ids = $individual_tag->term_id; $args=array("tag__in" => $tag_ids, "post__not_in" => array( $post->ID), "posts_per_page"=>5 ,// Number of similar articles displayed.

"; while ($my_query->have_posts()) ( $my_query->the_post(); ?> $my_query = new wp_query($args); !}">

"; while ($my_query->have_posts()) ( $my_query->the_post(); ?>

The appearance of the list will match the design of your site, since the styles defined in the template apply to this list.

But, if you want to make changes to the styles, you can always use the relatedPosts class and set your own styles. I have already added this class to the base of the list.

You can also change the elements marked in orange in the code.

For example, you might want to display similar articles not by tags, but by category. Inviting the visitor to familiarize himself with similar materials from this category.

Then, following the algorithm described above, you insert this code:

Similar entries in the WordPress article. Plugins for displaying similar posts in WordPress

Instead of the result:

Similar articles from the category: