Related Posts plugin for WordPress

By Barry Kooji and Never5.

 

A related posts plugin will show similar posts from the same site usually at the bottom of an article.
There are a few plugins out there but feel that they are too bloated so decided to test out the Related Posts plugin from Barry Kooij.

Here is the default related posts CSS design as seen under a post.

 

My custom CSS made designs. The code is included further down.

As I am creating more and more tutorials and adding them to easywebdesigntutorials.com I am noticing that posts are becoming more difficult to find without searching. I need to find a good way to show related posts. The following is one method.

 

Barrys plugin seems lightweight and does not add any extra bloat to the site.

I downloaded and installed the Related Posts plugin. After activating the plugin it goes to a specific screen.

1. Caching Posts.

 

2. Linking Posts

 

3. Finished

 

I went to Settings -> Related Posts.
There is the settings screen for the plugin.
Adjustments that I made were change the amount of posts, excerpt length and display image.
Remember to click Save Changes.

 

Below each post is a new section named Related Posts. Here one can manually go in and adjust which post to have in the Related Posts list. Hovering over a title shows the quick edit bar with the option to Edit the Post or Unlink Related Post. One can also add other posts.

 

Adding additional posts.

 

Default view below a post showing a title on the top, image to the left and post title to the right and an excerpt. This can be changed through CSS.

 

Plugin Settings screen

The following is the default CSS layout code that is inside the CSS box in the plugin settings area.

.rp4wp-related-posts ul {width:100%;padding:0;margin:0;float:left;}
.rp4wp-related-posts ul>li {list-style:none;padding:0;margin:0;padding-bottom:20px;clear:both;}
.rp4wp-related-posts ul>li>p {margin:0;padding:0;}
.rp4wp-related-post-image {width:35%;padding-right:25px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;float:left;}

I deleted the default CSS code so it would not disrupt the custom code I am creating below. (I am though using some of the default code in the custom CSS.)

 

An example of custom CSS used with related Posts plugin.

Through the plugin settings I changed amount of posts to 4. (The setting can be overwritten by removing or adding related content below a post.)
Set excerpt length to 0.

The new custom CSS I used (The code can be added to your stylesheet or the CSS box inside the plugin settings replacing what is already in it):

/* Related Posts plugin custom CSS */
/* Area surrounding the related posts */
.rp4wp-related-posts {
    width:100%; 
}

/* Related Posts title */
.rp4wp-related-posts h3{
    font-size: 34px;
    color: #474545;
    font-family: times;
    text-align: center;
    text-shadow: 1px 1px 1px #ccc;
}

/* each related post group - image and text */
.rp4wp-related-posts ul>li {
    padding: 15px; 
    margin: 0 0 20px 0; 
    float: left;
    width: 25%;
}

 

 

Another custom CSS example used with the Related Posts plugin.

 

CSS used (add the CSS to your stylesheet or the CSS box inside the plugin settings screen)

/* Related Posts plugin custom CSS */
/* Area surrounding the related posts */
.rp4wp-related-posts {
    width:85%; 
    padding:10px; 
    margin:0; 
    float:left; 
    background: #f89a16;
    border: 1px solid #ccc;
    border-radius: 7px;
}

/* Related Posts title */
.rp4wp-related-posts h3{
    font-size: 34px;
    color: #fff;
    font-family: times;
    text-align: center;
    text-shadow: 2px 1px 1px #000;
}

/* Post content -text */
.rp4wp-related-post-content {
    padding:3px;
}

/* image */
.rp4wp-related-post-image {
    width: 28%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
}

/* each related post group - image and text */
.rp4wp-related-posts ul>li {
    list-style: none;
    padding: 15px; 
    margin: 0 0 15px 0; 
    clear: both;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 7px;
    min-height: 180px;
    box-shadow: 0px 3px 5px #444;
}

 

A custom design where I moved the title above the images.

Custom CSS (Add to your stylesheet or the CSS box inside the plugin settings.)

/* Related Posts plugin custom CSS */
/* Area surrounding the related posts */
.rp4wp-related-posts {
    width:100%; 
    padding:10px; 
    margin:0; 
    float:left; 
    background: #f89a16;
    border: 1px solid #ccc;
    border-radius: 7px;
}

/* Related Posts title */
.rp4wp-related-posts h3{
    font-size: 34px;
    color: #fff;
    font-family: times;
    text-align: center;
    text-shadow: 2px 1px 1px #000;
}

/* Post content -text */
.rp4wp-related-post-content {
    padding:3px;
    margin-top: -250px; /* Moving text/title above the image */
}

/* image */
.rp4wp-related-post-image {
    /* width: 28%; */
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-top: 80px; /* Giving space for the text/title above the image */
}

/* each related post group - image and text */
.rp4wp-related-posts ul>li {
    list-style: none;
    padding: 15px; 
    margin: 0 0 15px 0; 
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 7px;
    min-height: 280px;
    box-shadow: 0px 3px 5px #444;
    width: 25%;
    float: left;
}

 

I might add additional custom CSS layouts later on.

Check out the article on the pro version of the same plugin.