Related Posts for WordPress Premium Plugin
Barry Kooij has made a quick and efficient related posts plugin I would highly recommend.
I have earlier written about the free version here: Related Posts for WordPress. Which also includes CSS customizations.
Premium features:
– Cross Post Types Related Posts.
– Adjustable Weights
– Full control over layout
– Overwritable templates
– Keep manually created links
– Multisite support
– Priority email support
– Supported Taxonomies: Categories, Tags and all custom taxonomies.
https://www.relatedpostsforwp.com/features/
After having installed and activated the Related Posts plugin it goes straight to the setup screen.
(The installer is also located under Settings -> Related Posts -> Installer.)
1. Welcome
Here one defines the custom post types one wants to use in relation to the plugin.
2. Caching Posts
3. Linking Posts
4. Finished
The General setting
WordPress Settings -> Related Posts
Tabs. Such as..
General
It shows the Post type in the top right below the tabs.
Various options.
The last option also gives you a chance to add a thumbnail Placeholder for posts that do not have any images.
Styling
Here you can configure the look of how it is displayed.
Drag the boxes inside the Configuration area to readjust each, click the components below to add another component.
Test out the presets as well.
Weights
Adjust the weights of various text such as the title, links, categories, tags and custom taxonomies.
Additional tabs
Words
License
Misc
Installer
An example of custom CSS used with related Posts plugin.
Remember to adjust the Configuration to reflect the various sections in relation to each other.
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.)
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%;
/* To add a orange background add the following */
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: #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 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.
Adjusted the configuration and the Posts per row.
/* 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;
}Experiment with the configuration, posts per row and CSS to get it looking as works for you.
To learn more about the premium plugin go to https://www.relatedpostsforwp.com/ (Check out some of the feedback the plugin has received.)
