Contextual Related Posts plugin

By WebberZone.

 

A related posts plugin will show related posts from the same site usually at the bottom of an article.

Why I decided to use Contextual Related Posts plugin:
1. There are a lot of good options. For instance if there is no featured image it will use the first image in the post. If there is no image in the post it will use a default thumbnail you decide on.
2. One decides if one wants to include an excerpt. The size of the image to be seen and more.
3. It is fairly easy to use CSS to style the layout.

After having installed the plugin the settings will show up inside WordPress Settings -> Related Posts.
Here are some of the options offered in the settings page.

General options
Cache output? (I turned this on)
Automatically add related posts to: (I added to posts, pages and category archives)

List tuning options
Number of related posts to display:
Related posts should be newer than:
Find related posts based on contents as well as title:

Output options
Title of related posts:
Show post excerpt in list?
Length of excerpt (in words):
Show post author in list?
Show post date in list?
Limit post title length (in characters)

Thumbnail options
Location of post thumbnail:
Thumbnail size:
Width of the thumbnail:
Height of the thumbnail:
Extract the first image from the post?
Use default thumbnail?

Styles
Style of the related posts:
Custom CSS to add to header:

Feed options

 

 

Default layout looks like this:

Styling the output of the related posts.

Custom layout 1

Related Posts settings:
I changed the width and height of the thumbnail to both become 15opx.
Changed from Rounded Thumbnails -> No styles.
I also adjusted the character length: Limit post title length (in characters) to 40. Just in case the titles were too long for the box.

The layout result.

Related Post settings: The CSS I added to the bottom Custom CSS section:

/* Related Posts */

/* the full list */
.crp_related ul li {
 list-style-type: none;
 float: left;
 margin: 0 40px 4px 0;
 width: 185px;
 height: 245px;
}

/* each related post box */
.crp_related ul li a {
 display: block;
 word-wrap: break-word;
 padding: 20px 20px 10px 10px;
 float: left;
 background: #f7f4f4;
 border: #ccc 2px solid;
 border-radius: 9px;
 width: 220px;
 margin: 5px 0 10px 0;
 text-decoration: none;
 height: 245px;
}

/* moving the mouse over a related posts area. */
.crp_related ul li a:hover {
 border: #8e8888 2px solid;
background: #ece9e9;
}

/* The related posts image */
.crp_related ul li img {
 margin: 0 5px 7px 5px;
}

 

Custom layout 2

I adjusted the width to become 300px and the height to 150px. No styles. Limit post title length (in characters) to 40.

The layout result.

Related Post settings: The CSS I added to the bottom Custom CSS section:

/* Related Posts */
 
/* The full list */
.crp_related ul li {
 list-style-type:none;
 /* float:left; */
 margin:0 40px 0 0;
 width: 230px;
}

/* Each related posts area */
.crp_related ul li a {
 display: block;
 /* font-weight: bold; */
 word-wrap: break-word;
 padding: 20px 20px 10px 10px;
 float: left;
 background: #f7f4f4;
 border: #ccc 2px solid;
 border-radius: 9px;
 width: 240px;
 margin: 5px 0 10px 0;
 text-decoration: none;
}

/* moving the mouse over a related posts area. */
.crp_related ul li a:hover {
 border: #8e8888 2px solid;
background: #ece9e9;
}

/* The related posts image */
.crp_related ul li img {
 margin:0 5px;
}

 

Custom layout 3

I adjusted the width to become 300px and the height to 150px. No styles. Limit post title length (in characters) to 27.
Added: Length in excerpt (in words): 23.  Show post date in list.

The layout result.

Related Post settings: The CSS I added to the bottom Custom CSS section:

/* Related Posts */

/* Related Posts title */
.crp_related {
}

/* The full list */
.crp_related ul li {
 list-style-type: none;
 float: left;
 margin: 10px 10px 0 0;
 width: 250px;
 background: #f7f4f4;
 border: 1px #ccc solid;
 padding: 10px;
 height: 420px;
 overflow: hidden;
}

/* The full list - hover */
.crp_related ul li:hover {
 background: #ece9e9;
}

/* Each related posts area */
.crp_related ul li a {
 display: block;
 word-wrap: break-word;
 text-decoration: none;
}

 /* Title of each related posts area */
.crp_title {
 font-size: 18px;
}

/* Related post image */
.crp_related ul li img {
 margin: 5px 7px;
 width: 200px;
}

/* Related post date */
.crp_date {
 display: inline-block;
}

/* Related post excerpt */
.crp_excerpt {
 display: inline-block;
 width: 230px;
}

 

Custom layout 4

Thumbnail width 300px and the height to 150px. No styles. Limit post title length (in characters) to 25.
Length in excerpt (in words): 18.  Show post date in list.
Added: Show post author in list.

The layout result.

Related Post settings: The CSS I added to the bottom Custom CSS section:

/* Related Posts */

/* Related Posts title */
.crp_related {
}

/* The full list */
.crp_related ul li {
 list-style-type: none;
 float: left;
 margin: 10px 10px 0 0;
 width: 250px;
 background: #f7f4f4;
 border: 1px #ccc solid;
 padding: 10px;
 height: 425px;
 overflow: hidden;
}

/* The full list - hover */
.crp_related ul li:hover {
 background: #ece9e9;
}

/* Each related posts area */
.crp_related ul li a {
 /* display: block; */
 word-wrap: break-word;
 text-decoration: none;
}

 /* Title of each related posts area */
.crp_title {
 font-size: 18px;
}

/* Related post image */
.crp_related ul li img {
 margin: 5px 7px;
 width: 200px;
}

/* Related post date */
.crp_date {
 display: block;
 padding-bottom: 5px;
}

/* Related post excerpt */
.crp_excerpt {
 display: inline-block;
 width: 225px;
}

/* Author CSS tag */
.crp_author {
}

 

Additional features

1. Add a Related posts widget.
2. Adjust related posts per post/page/etc. Go to a post and scroll below the content area and adjust if you want to use related posts on the specific post and other options.

 

The bottom line is that this is a great related posts plugin to use. Take a closer look at: https://wordpress.org/plugins/contextual-related-posts/ as well as at https://webberzone.com/.