How to Add Related Posts to Your Blog in WordPress

The Related Posts feature is one of the most important tools that help increase reader engagement and improve the visitor’s time spent on your site. When a reader finishes reading a specific article, they can be automatically directed to other articles related to the same topic, category, or tags, which increases the chances of discovering additional content on your blog. In this guide, we will explore two main ways to add related posts to WordPress articles: using ready-made plugins or adding custom code manually.

Step 1: Why Do We Need the Related Posts Feature?

• Increase Engagement and Views: It encourages readers to browse other articles, thus increasing the page views per session.
• Reduce Bounce Rate: When the reader finds additional useful content, they are likely to stay longer on your site.
• Improve SEO: Well-thought-out internal links help guide search engine bots and discover more content.

Method 1: Using Plugins

There are many free and paid plugins that allow you to easily add a “Related Posts” section without any code. Some of the most notable ones include:

• Yet Another Related Posts Plugin (YARPP)
• Contextual Related Posts
• Jetpack (The Related Posts feature)

Installation Steps Using YARPP as an Example:

1. From the WordPress dashboard, go to Plugins > Add New.
2. In the search field, type: YARPP.
3. Install and activate the plugin.
4. Go to Settings > YARPP in the dashboard.
5. Choose how you want to display the related posts (based on category, tags, or titles).
6. Adjust appearance options such as the number of posts and the layout of the thumbnail links, then save changes.

Related posts will automatically appear below the articles based on the settings you selected.

Method 2: Adding Custom Code (Without Plugins)

If you prefer to manually rely on code for more flexibility or to avoid too many plugins, you can use the WP_Query query to fetch related posts. Below is an example of a simple code that you can add in the functions.php file of your child theme or in an appropriate place in your theme:

function mytheme_related_posts_by_category() {
    // Fetch related categories for the current post
    $categories = get_the_category( get_the_ID() );
    if ( empty( $categories ) ) {
        return; // If no categories exist, exit
    }

    // Use the first category to link posts
    $category_ids = array( $categories[0]->term_id );

    // Query settings to fetch related posts
    $args = array(
        'post_type'      => 'post',
        'posts_per_page' => 3, // Number of posts to show
        'post__not_in'   => array( get_the_ID() ), // Exclude current post
        'category__in'   => $category_ids, // Filter by category
        'orderby'        => 'date',        // Order by date
        'order'          => 'DESC',
    );

    // Run the query
    $related_query = new WP_Query( $args );
    
    // If related posts are found
    if ( $related_query->have_posts() ) {
        echo '

‘; } // Reset the query wp_reset_postdata(); }

How to Call This Function Inside the Post: Open the single.php file or the custom file for displaying individual posts in your theme, find a suitable place below the post, and add the following line:

After saving the changes, a “Related Posts” section will appear based on the first category of the current post.

CSS Styles for the Related Posts Appearance

To make the related posts section more attractive, you can add styles to the style.css file of your child theme or in the Additional CSS section of the dashboard:

.related-posts {
    margin: 20px 0;
    padding: 15px;
    background-color: #f9f9f9;
    border-radius: 5px;
}

.related-posts h3 {
    margin-bottom: 10px;
    color: #333;
}

.related-posts ul {
    list-style: disc inside;
    margin: 0;
    padding: 0;
}

.related-posts li {
    margin: 5px 0;
}

.related-posts li a {
    text-decoration: none;
    color: #0073aa;
}

.related-posts li a:hover {
    color: #005177;
}

These styles make the section stand out and blend with your blog design, and you can adjust the colors and sizes to match your site’s identity.

Additional Ideas for Displaying Related Posts

• Using Tags: Instead of categories, you can use the tag__in field in the query to link posts by similar tags.
• Displaying Featured Images: If you want a visually appealing design, you can add the function the_post_thumbnail() to display the featured image for each post.
• Preventing Duplicates: If you want to exclude posts that have already been displayed, you can reduce posts_per_page or modify the query to include only displayed posts.

Why Do You Need a Professional Site with Itqan?

Adding related posts is just one part of creating an excellent user experience for your site. There are many other factors that could determine the success of your blog, such as loading speed, mobile compatibility, and content marketing strategy. The Itqan team specializes in providing Arabic website development solutions using the latest technologies, ensuring high standards of quality and performance.

By choosing Itqan, you will get:

• Expert Design That Reflects Your Identity: We pay special attention to both visual and functional details to ensure your site is attractive and user-friendly.
• Improved User Experience: From related post segmentation to a clear site structure and easy-to-use interface.
• Long-term Support and Consultation: Our services don’t stop at creation. We continue to help you update and improve your site.

Contact Us Now!

Do you want to enhance your blog and increase reader engagement by adding related posts or developing deeper functionality? Itqan is here to assist you. Start your digital journey with us through the link below:

Contact ITQAN

Make your content more engaging and professional, and think about the next step toward a successful Arabic blog!