• Home
  • WordPress
    • How To
    • Plugins
    • Themes
      • Genesis
      • Themify
      • Mysite myway
    • Security
    • Developer
    • Teaching
    • Conference
    • Chat
  • Blog
  • About
  • Freelance
    • Plugins
    • Teaching
    • Need help?
    • CV og ref.
  • Contact

Easy Web Design Tutorials

WordPress Tutorials and more

  • Home
  • WordPress
    • How To
    • Plugins
    • Themes
      • Genesis
      • Themify
      • Mysite myway
    • Security
    • Developer
    • Teaching
    • Conference
    • Chat
  • Blog
  • About
  • Freelance
    • Plugins
    • Teaching
    • Need help?
    • CV og ref.
  • Contact

6 April - 2015 By Paal Joachim 2 Comments
Last updated on: April 9, 2017

Related Posts plugin for WordPress

By Barry Kooji and Never5.

Related Posts For WordPress top banner

Related Posts For WordPress top banner

 

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.

Related Posts default Frontend View

Related Posts default Frontend View

 

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

Related Posts Custom CSS layout 1

Related Posts Custom CSS layout 1

Related Posts Custom CSS layout 2

Related Posts Custom CSS layout 2

Related Posts Custom CSS 3

Related Posts Custom CSS 3

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.

Related Posts Caching Posts

Related Posts Caching Posts

 

2. Linking Posts

Related Posts Linking Posts

Related Posts Linking Posts

 

3. Finished

Related Posts Finished

Related Posts 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.

Related Posts Settings

Related Posts Settings

 

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.

Related Posts below content creation posts screen

Related Posts

 

Adding additional posts.

Related Posts Add Related Posts

Related Posts Add Related 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.

Related Posts Frontend View

Related Posts Frontend View

 

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.

Related Posts Custom CSS layout 1

Related Posts Custom CSS layout 1

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.

Related Posts Custom CSS layout 2

Related Posts Custom CSS layout 2

 

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.

Related Posts Custom CSS layout 3

Related Posts Custom CSS layout 3

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.

Share this:

  • Email

Categories: Plugins, WordPress

Paal Joachim Romdahl

I enjoy teaching and creating tutorials. As well creating web sites.
I help people gain WordPress knowledge through my easy to follow tutorials and specialized training. Contact me for more information on how I can improve your WordPress skills and to help get your web site quickly up and running.

Comments

  1. Shin says

    14 February - 2018

    Thank you. I customised this plug-in.

    Reply
  2. kim says

    26 January - 2017

    omgosh, you are awesome!

    Reply

Leave a Comment Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

© 2021 · By Easy Web Design Tutorials · Built on the Genesis Framework · WordPress · Log in · ⇪

loading Cancel
Post was not sent - check your email addresses!
Email check failed, please try again
Sorry, your blog cannot share posts by email.