Styling the output

Hi couchman

Are you wrapping the shortcode in <pre> and <code> tags or are they added automatically?

Can you post the shortcode as you inserted it in the editor?`

All I’ve added to the post is:

[related_posts_by_tax posts_per_page=”10″]

It seems some plugin or your theme is wrapping the shortcode output in pre and code tags.

Do you use a syntax highlighter plugin?

Nope. The only other plugin at the moment is Akismet.

If you switch to the text editor instead of the visual editor do you see the pre and code tags

<pre><code>[related_posts_by_tax posts_per_page="10"]</code></pre>

Yes, that’s exactly how it looks in the post in text editor mode.

Can you change it to just the shortcode.

[related_posts_by_tax posts_per_page="10"]

Much better!!! My idea was to style it into a small box that I could have half way through my post, on one side or the other.

I’m not sure how the pre and code got in there. You’ll have to test if the same happens when you add the shortcode in the visual editor (and publish/update the post).

As for the styling, it can be done with adding your own template and adding some filters. I just realize it’s not as easy as it should be. If you don’t mind waiting I will create a beta version tomorrow that adds one filter (or add a div container to the template) to make it easier to style it. The difficulty is it being back compatible.

I’m glad to wait. I really appreciate your level of support. Looking forward to seeing more tomorrow. Cheers!

I am kinda hoping to get it styled something similar to:
https://tipofthetower.com/2015/02/07/toronto-maple-leafs-game-preview-looking-strike-oil-edmonton-oilers/?utm_source=FanSided&utm_medium=Network&utm_campaign=Around%20the%20Network

They call related posts More Tip of the Tower… It stands out nicely, yet doesn’t get in the way of the article. If that makes sense…

Makes sense.

It’s possible with a float: right; in your stylesheet if there was a css selector you could use.
https://css-tricks.com/all-about-floats/

As it is now there is no (container) selector for shortcodes. I will add it in the beta tomorrow ??

Excellent. That floating looks like it’s what is needed for the plugin to be fully styled.

Looking forward to the end product. Thank you so much!

Hi couchman

Download the Development Version (version 0.4.2-beta2) here
https://www.ads-software.com/plugins/related-posts-by-taxonomy/developers/

With this beta version and this in your (child) theme’s functions.php file:

add_filter( 'related_posts_by_taxonomy_shortcode_defaults', 'related_shortcode_defaults' );
function related_shortcode_defaults( $defaults ) {

	// (Optional) html for the title
	$defaults['before_title'] = '<h3 class="rpbt_title">';
	$defaults['after_title'] = '</h3>';

	// html for the container
	$defaults['before_shortcode'] = '<div class="rpbt_container">';
	$defaults['after_shortcode'] = '</div>';

	return $defaults;
}

You can style the rpbt_container like this in your (child) theme’s stylesheet style.css:

.rpbt_container{
	float: right;
	padding: 1em 1em;
	background-color: #E3E3E3;
}

Css tutorial

btw:
consider creating a child theme instead of editing your theme directly – if you upgrade the theme all your modifications will be lost.

Howdy.

I can’t find the version 0.4.2-beta2 anywhere?

Cheers, Rick