How to Create Full Width WordPress Related Posts

How to Create Full Width WordPress Related Posts

I recently had a client ask about how to customize the WordPress related post (after each post) so that they look like the ones on Pinch of Yum.

Here’s what it looks like on the Pinch of Yum site:

You can see examples of this feature by visiting the following links:

• pinchofyum.com/no-bake-salted-caramel-cups
• sweetlifebake.com/2016/08/09/no-bake-mason-jar-pina-colada-cheesecakes
• smartlittlecookie.net/home/black-forest-protein-smoothie

Design Your Own Full Width Related Posts Images

Today, I’m going to show you exactly how you can set this feature up.

And to do it, we’re going to use the WordPress Related Post plugin (also known as Related Posts by Zemanta).

You can use either plugin. They’re both owned and maintained by Zemanta and, to my knowledge, have all the same features.

Ok, so let’s get started…

Installing the WordPress Related Posts Plugin

1. Navigate to your WP Dashboard and select the “Plugins” tab from your dashboard menu.
2. Under “Plugins,” select the link titled “Add New.”
3. Use the search box in the top right hand corner to search for “WordPress Related Posts.”
4. Make sure you’ve located the one created by Zemanta.
5. Click the “Install Now” button to being installing your plugin.
6. Once the plugin is installed, click “Activate Plugin” to turn it on.

Customizing the WordPress Related Post Settings

1. While in your WordPress dashboard, navigate to the “Settings” tab.
2. Click the link that says “WordPress Related Posts.”
3. Once in the settings panel, create a custom related posts title and choose the number of posts you would like to display.
4. Select the “Verticle (Large)” layout.
5. Under “Customize,” make sure the “Display Thumbnails for Related Posts” box is checked.

Customizing Your Widget Styles and Thumbnail Size

1. Click the “Enable custom CSS” box so that you can make edits to the look of your related posts widget.
2. Copy and past the custom CSS code that I have included below. Hover on the code box and click “View Source” to copy the plain text code.

Custom CSS For Full Width WordPress Related Posts Images

.related_post_title {
font-weight: 500 !important;
}
ul.related_post {
width: 100% !important;
}
ul.related_post li {
width: 100% !important;
border-bottom: 3px solid #f3f3f3 !important;
padding: 10px 0px !important;
}
ul.related_post li a {
font-size: 22px !important;
font-weight: 400 !important;
font-style: italic !important;
text-align: center !important;
padding-top: 10px !important;
border-bottom: none !important;
text-decoration: none !important;
}
ul.related_post li img {
width: 100% !important;
height: auto !important;
display: inline !important;
border-radius: 0px !important;
box-shadow: none !important;
}
@media only screen and (max-width: 800px) {
ul.related_post li img {
width: 100% !important;
}
}

Update the Thumbnail Size and Save Changes

1. Click the “Use Custom Size Thumbnails” box and make your thumbnail size the same width as your content area (example: 800 pixels by 500 pixels).
2. Hit the “Save” button at the bottom of the page to save your changes.
3. Now, view one of your blog posts to see the results!

If you need to tweak the look further, feel free to play with the CSS a little to find out what works and what looks best.

Any questions, you can reach out to me on Twitter @chantillypatino or click here to contact me.

***

Chantilly ❤

Want more posts like this? Click here to have new posts delivered to your inbox each week.

Facebook Comments

comments