Styling Contextual Related Posts

This guide explains how Contextual Related Posts loads its CSS and how to override it safely without modifying plugin files.

It applies to both the free and Pro versions. See Contextual Related Posts for the free plugin and Contextual Related Posts Pro for additional features.

What this covers

• How preset styles are enqueued
• How Custom CSS is injected
• Runtime CSS variables
• Stable selectors for overrides
• Troubleshooting missing styles

Prerequisites

• Contextual Related Posts is active
• Access to Related Posts → Settings → Styles
• Ability to clear all caches, including page and CDN cache

How CRP loads CSS

CRP uses two styling layers:

1. A preset style CSS file
2. The Custom CSS field (optional)

When you select a preset style, CRP loads a minified file from /css/ and enqueues it with the handle: crp-style-{style}.

CRP also injects CSS custom properties inline. These values are derived from plugin settings such as thumbnail width and height.

Built-in styles and CSS files

Each style ID maps to a wrapper class and a corresponding CSS file:

• no_style → No CSS file enqueued
• text_only → .crp_related.crp-text-only → css/text-only.min.css
• rounded_thumbs → .crp_related.crp-rounded-thumbs → css/rounded-thumbs.min.css
• masonry → .crp_related.crp-masonry → css/masonry.min.css
• grid → .crp_related.crp-grid → css/grid.min.css
• thumbs_grid → .crp_related.crp-thumbs-grid → css/thumbs-grid.min.css

Dynamic CSS variables generated by PHP

Certain styles receive runtime CSS variables derived from settings such as thumb_width and thumb_height.

Rounded thumbnails

Injected on:

.crp_related.crp-rounded-thumbs

Variables:

• --crp-thumb-width
• --crp-thumb-height

These control fixed tile dimensions and image aspect handling.

Grid

Injected on:

.crp_related.crp-grid

Variables:

• --crp-grid-column-min
• --crp-grid-card-min-height
• --crp-grid-thumb-aspect-ratio
• --crp-grid-title-line-clamp
• --crp-grid-title-line-height

These control column width, card height, thumbnail ratio, and title truncation.

Thumbs grid

Injected on:

.crp_related.crp-thumbs-grid

Variables:

• --crp-thumb-width
• --crp-thumb-height
• --crp-thumb-min-width
• --crp-aspect-ratio

These control responsive card sizing and aspect ratio.

Output classes for targeted overrides

CRP outputs stable, predictable classes:

• Wrapper: .crp_related
• Context wrappers: .crp_related_widget, .crp_related_shortcode, .crp_related_block
• Style wrapper: .crp-{style-name} such as .crp-grid
• Link: .crp_link
• Thumbnail container: .crp_thumb
• Text elements: .crp_title, .crp_author, .crp_date, .crp_excerpt

For reliable overrides, scope rules to both the base wrapper and the active style wrapper:

.crp_related.crp-grid .crp_title {
    line-height: 1.35;
}

How custom CSS is enqueued

CRP prints Custom CSS only when output is expected in configured contexts:

• single
• page
• home
• category_archives
• tag_archives
• other_archives
• widget_crp

If your rules do not load, confirm that the Add to locations match the current request type.

Style-specific notes

Text only

Applies minimal layout rules. It does not provide card styling or typography.

Rounded thumbnails

Uses fixed li dimensions derived from CSS variables. The title is positioned absolutely as an overlay.

Masonry

Uses CSS columns with two, three, and four column breakpoints. It does not use CSS Grid. Reflow follows column layout behaviour.

Grid

Uses CSS Grid with:

repeat(auto-fill, minmax(var(--crp-grid-column-min), 1fr))

Titles are truncated using line-clamp rules.

Thumbs grid

Uses CSS Grid. Card width is constrained by --crp-thumb-min-width. Aspect ratio is controlled by --crp-aspect-ratio.

Practical override examples

.crp_related {
    margin-top: 1.5rem;
}

.crp_related.crp-grid {
    --crp-grid-column-min: 220px;
}

.crp_related.crp-rounded-thumbs {
    --crp-thumb-width: 180px;
    --crp-thumb-height: 120px;
}

.crp_related.crp-thumbs-grid {
    --crp-gap: 16px;
    --crp-border-radius: 10px;
}

Troubleshooting

Custom CSS does not appear

1. Confirm the selected style is saved
2. Confirm CRP renders on the current request
3. Confirm Add to includes this context
4. Clear all caching layers
5. Inspect the markup and verify the active style wrapper
6. Check CSS specificity before using !important

Recommendation for maintainable styling

Start with a built-in style. Override CSS variables first. Use selector-level overrides only when variables are insufficient.

This approach keeps changes small and resilient across plugin updates.