• 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

28 May - 2017 By Paal Joachim 5 Comments
Last updated on: August 29, 2017

Contextual Related Posts plugin

By WebberZone.

Contextual Related Posts WordPress plugin banner

Contextual Related Posts WordPress plugin banner

 

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:

Default-layout-Contextual-Related-Posts-WordPress-plugin

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.

Custom-boxed-layout-Contextual-Related-Posts-WordPress-plugin

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.

Custom-vertical-layout-Contextual-Related-Posts-WordPress-plugin

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.

Custom-boxed-layout-excerpt-Contextual-Related-Posts-WordPress-plugin

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.

Custom-boxed-layout-excerpt-author-Contextual-Related-Posts-WordPress-plugin

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/.

 

 

Share this:

  • Email

Categories: Featured, 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. JSON formatter says

    30 August - 2018

    I feel it interesting, your post gave me a new perspective! I have read many other articles about the same topic, but your article convinced me! I hope you continue to have high quality articles like this to share with veryone!

    Reply
  2. betty says

    23 June - 2017

    thank you so much for those custom css.
    after paste the css the “submit a comment” move to the related posts
    is it possible to be fixed ?

    it looks like this after pasting css –> https://www.screencast.com/t/81rFFIHR1J9

    Reply
    • Paal Joachim says

      23 June - 2017

      Hi Betty

      I am thinking you can add to the CSS a clear: right tag.
      Check out this link: https://www.w3schools.com/cssref/pr_class_clear.asp

      Reply
      • betty says

        26 June - 2017

        Dear Paal,

        thanks for your reply. 🙂
        however i don’t exactly know how to complete it.
        anyway i appreciate all the information you supplied.
        thank you so much!!

        Reply
  3. toko bunga bandung says

    1 June - 2017

    the plugin and custom css is awesome you can look my awesome website too toko bunga bandung online

    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.