Styling Related Posts

This page is part of the plugin documentation for the Related Posts by Taxonomy plugin.

The styling for the related posts is done by your theme’s stylesheet and not by this plugin. If you need different styles you can add them in your (child) theme’s stylesheet.

Note: When adding styles it’s recommended you create a child theme and put the new styles in the child theme’s stylesheet. Or use the Additional CSS module in the Customizer and make the changes there.

Styling the Shortcode

The shortcode title is a '<h3>' heading and the shortcode itself is wrapped in a div with a class “rpbt_shortcode”. You can change the '<h3>' heading tags with the before_title and after_title attributes. Or set a default for it.

Style the shortcode like this in your (child) theme’s stylesheet:

/* shortcode container */
.rpbt_shortcode {
	/* your styles here */
}

/* shortcode title */
.rpbt_shortcode h3 {
	/* your styles here */
}

Styling the Widget

The related posts widget can be styled with the .widget.related_posts_by_taxonomy CSS selector.

/* widget container */
.widget.related_posts_by_taxonomy {
	/* your styles here */
}

For information about styling the related posts gallery see this section of the documentation

Adding Classes

Classes can be added to the related post items so you can style them differently. With the shortcode you can use the post_class attribute.

[related_posts_by_tax post_class="my-class"]

This will add the ‘my-class’ class to all related post items in the shortcode. To have more control with adding classes, or adding classes with the widget, use the Related Post Class Filter filter below.

Related Post Class Filter

With the related_posts_by_taxonomy_post_class filter you can add classes to related post items on a post per post basis.

Example
In this example we add the post type of the related post as a class so you can style every related post type post differently. Put this code in your (child) theme’s functions.php file.

add_filter( 'related_posts_by_taxonomy_post_class', 'rpbt_add_class_current_post_type', 10, 4 );

function rpbt_add_class_current_post_type( $classes, $post, $args, $index ) {

	/**
	 * $classes is an array with post classes.
	 * $post    is the current related post object
	 * $args    is an array with the widget or shortcode arguments
	 * $index   is the positition of the current related post
	 */

	if ( isset( $post->post_type ) && $post->post_type ) {

		// Add post type class prefixed with 'rpbt-'
		$classes[] = 'rpbt-' . sanitize_html_class( $post->post_type );
	}

	return $classes;
}

Now you can style related posts from the post type ‘movie’ with this selector:

.rpbt-movie {
    /* your styles here */
}
Advertisements