As a content creator, it’s essential to have a solid content strategy that not only attracts readers but also keeps them engaged with your website. One effective way to do this is by incorporating related posts with thumbnails in WordPress. This feature allows you to showcase similar content to your readers, encouraging them to explore your site further.

While there are many third-party tools available to add related posts with thumbnails to your WordPress site, you don’t necessarily need to rely on them. In this article, I’ll walk you through how to enable related posts with thumbnails in WordPress without third-party tools.

How to Enable Related Posts with Thumbnails in WordPress Without Third-Party Tools

To enable related posts with thumbnails in WordPress without plugins, you’ll need to add custom fields to your posts, edit the functions.php file, and add code to the single.php file. Here’s a step-by-step guide:

Adding Custom Fields in WordPress

Firstly, you need to add custom fields to your posts. Custom fields allow you to add extra metadata to your posts, which you can then use to display related posts. Here’s how to add custom fields to your posts:

1. Go to your WordPress dashboard and navigate to “Posts.”
2. Select the post you want to add custom fields to.
3. Click on “Screen Options” in the top right corner of the screen.
4. Check the box next to “Custom Fields.”
5. Scroll down to the “Custom Fields” section below the post editor.
6. In the “Name” field, enter “related_posts” without quotes.
7. In the “Value” field, enter the post ID numbers of the related posts you want to display, separated by commas.
8. Click “Add Custom Field.”

Editing the Functions.php File

Next, you need to edit the functions.php file in your WordPress theme. This file contains the code that runs your WordPress site. Here’s how to edit the functions.php file:

1. Go to your WordPress dashboard and navigate to “Appearance” > “Theme Editor.”
2. Select the “functions.php” file from the list of files on the right-hand side of the screen.
3. Scroll down to the bottom of the file and add the following code:

function related_posts_shortcode() {
    $related_posts = get_post_meta(get_the_ID(), 'related_posts', true);
    $args = array(
        'post__in' => explode(',', $related_posts),
        'posts_per_page' => 3,
        'orderby' => 'rand'
    );
    $related_posts_query = new WP_Query($args);

    if ($related_posts_query->have_posts()) :
        echo '<div class="related-posts">';
        while ($related_posts_query->have_posts()) :
            $related_posts_query->the_post();
            echo '<div class="related-post">';
            echo '<a href="' . get_permalink() . '">' . get_the_post_thumbnail(null, 'thumbnail') . '</a>';
            echo '<a href="' . get_permalink() . '">' . get_the_title() . '</a>';
            echo '</div>';
        endwhile;
        echo '</div>';
    endif;

    wp_reset_postdata();
}
add_shortcode('related-posts', 'related_posts_shortcode');

Adding Code to the Single.php File

Finally, you need to add code to the single.php file in your WordPress theme. This file controls the layout of your individual posts. Here’s how to add code to the single.php file:

1. Go to your WordPress dashboard and navigate to “Appearance” > “Theme Editor.”
2. Select the “single.php” file from the list of files on the right-hand side of the screen.
3. Find the location in the file where you want to display the related posts section.
4. Add the following shortcode to display the related posts section:

[related-posts]

Styling the Related Posts with Thumbnails Section

Now that you’ve enabled related posts with thumbnails in WordPress, you may want to style the section to match your site’s design. You can do this by adding CSS to your theme’s stylesheet. Here’s an example of how to style the related posts section:

.related-posts {
    display: flex;
    justify-content: space-between;
    margin: 30px 0;
}

.related-post {
    width: 30%;
}

.related-post a {
    display: block;
    margin-bottom: 10px;
}

.related-post img {
    width: 100%;
    height: auto;
}

Testing and Optimizing Related Posts with Thumbnails

Once you’ve enabled and styled your related posts with thumbnails section, it’s essential to test and optimize it. Here are some tips:

• Test your related posts section on different devices and browsers to ensure it looks and functions correctly.
• Monitor your site’s analytics to see if the related posts section is encouraging readers to explore more of your site.
• Experiment with different post IDs and orderings to see which related posts generate the most engagement.

Conclusion

In conclusion, adding related posts with thumbnails to your WordPress site can be a powerful way to keep your readers engaged and encourage them to explore more of your content. While there are many third-party tools available to add this feature, you can also enable it in WordPress without plugins by adding custom fields, editing the functions.php file, and adding code to the single.php file. By following the steps outlined in this article, you’ll be able to maximize your content strategy and keep your readers coming back for more.