Customising the output of Contextual Related Posts

Contextual Related Posts has several customization options are available via the Settings page in WordPress Admin. You can access this via Settings » Related Posts

A typical HTML output for the plugin is below. The plugin also provides you with a set of CSS classes that allow you to style your posts.

<div class="crp_related  ">
    <h3>Related Posts:</h3>
    <ul>
        <li>
            <a href="https://webberzone.com/techtites/2006/12/17/tectites-daily-summary-sunday-2/" rel="nofollow" target="_blank" class="post-184"><img src="https://webberzone.com/techtites/wp-content/uploads/sites/3/2014/02/sunday11-150x100.png" class="crp_thumb crp_featured" alt="Tectites Daily: Summary Sunday" title="Tectites Daily: Summary Sunday" width="150" height="150"><span class="crp_title">Tectites Daily: Summary Sunday</span></a>
        </li>
    </ul>
    <div class="crp_clear"></div>
    <p class="crp_class_credit"><small>Powered by <a href="https://webberzone.com/plugins/contextual-related-posts/" rel="nofollow" style="float:none">Contextual Related Posts</a></small></p>
</div>

The main CSS classes are:

• crp_related: Class of the main wrapper div
• crp_title: Class of the span tag for title of the post
• crp_thumb: Class of the post thumbnail img tag
• crp_excerpt: Class of the span tag for excerpt (if enabled)
• crp_author: Class of the span tag for author (if enabled)
• crp_date: Class of the span tag for date (if enabled)
• crp_related_shortcode: Additional class of the main wrapper div when the related posts are displayed via a shortcode
• crp_related_block: Additional class of the main wrapper div when the related posts are displayed via the Gutenberg block
• crp_related_widget: Alternative class of the main wrapper div instead of crp_related when the related posts are displayed via the widget

You can add CSS styles for these classes either in the Styles tab or in your theme’s style.css.