Related Posts

Automatically display related posts at the end of your articles based on shared tags and categories. Keep visitors reading longer by suggesting relevant content they might enjoy.

Use Cases#

• Increase page views by suggesting more content after readers finish an article
• Reduce bounce rate by giving visitors a reason to stay on your site
• Surface older content that’s still relevant to current readers
• Create a “you might also like” section automatically

How It Works#

1. The module analyzes tags assigned to the current post
2. If no tags, it falls back to categories
3. Finds other posts sharing those tags or categories
4. Displays them in an attractive grid at the end of your content
5. Posts are shown randomly from the matches for variety

Where to Find It#

Location: Enable the module, configure display options, and related posts appear automatically after your content. Use [related_posts] for manual placement.

Settings#

Display Recommendations#

For the best visual layout, match your post count to your columns:

Shortcode#

For manual placement or custom layouts:

[related_posts]

Shortcode Options#

In Theme Templates#

<?php echo do_shortcode('[related_posts count="6" columns="3"]'); ?>

How Matching Works#

The module finds related posts using this logic:

1. First choice: Tags — Posts sharing the same tags are most closely related
2. Fallback: Categories — If no tags, uses category matches instead
3. Exclusion — The current post is never shown in its own related posts
4. Randomization — Results are randomized for variety on repeat visits

Best Practices for Better Matches#

To get the most relevant related posts:

• Use tags consistently — Apply specific topic tags to every post
• Be specific — Tags like “WordPress security” work better than just “WordPress”
• Use multiple tags — 3-5 tags per post gives more matching opportunities
• Categorize appropriately — Broad categories help as a fallback

Styling#

The related posts section uses the class switchboard-related-posts. Customize with CSS:

/* Container */
.switchboard-related-posts {
    margin: 48px 0;
    padding: 40px 0;
    border-top: 2px solid #e5e7eb;
}

/* Section heading */
.switchboard-related-posts h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 24px;
}

/* Grid layout */
.related-posts-grid {
    display: grid;
    gap: 24px;
}

/* Individual cards */
.related-post-card {
    background: #fff;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
}

/* Card hover effect */
.related-post-card:hover {
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

/* Thumbnails */
.related-post-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Post title */
.related-post-card h4 {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 8px 0;
}

Responsive Behavior#

The grid automatically adjusts for smaller screens:

• Desktop: Uses your configured column count
• Tablet (768px): 2 columns
• Mobile (480px): 1 column

FAQ#