[Resolved] How to adjust CSS on WP Posts (Related Posts)

[Stefan]

Hi Generate Press,

I used the WP Posts Plugin to generate related posts below each written post.

I used the following guide (https://www.wplogout.com/display-related-posts-in-generatepress-theme/), but failed to implement it exactly as prescribed. I implemented the Hook Element, but failed to properly implement the snipped code. I currently use the following one:

<?php if ( function_exists( 'wpsp_display' ) ) wpsp_display( 82355 ); ?>

Rather than the one in the guide:

<div class="wpsp-related-posts1  grid-container">
	<h2>Related Posts</h2>
<?php
if ( is_single() ) {
    $cats =  get_the_category();
    $cat = $cats[0];
} else {
    $cat = get_category( get_query_var( 'cat' ) );
}

$cat_slug = $cat->slug;
$list = get_page_by_title( 'related', 'OBJECT', 'wp_show_posts' );
wpsp_display( $list->ID, 'tax_term="' . $cat_slug . '"' );
?>
</div>

What I would like to do to my current setup is (if the CSS code or whatever needed can be applied to just this particular hook/element).The desire is to get a similar look to this (link to the screenshot is the same as above): https://i.imgur.com/yUjh10G.png

1) Include title in the box “Additional reading…”
2) Reduce the spacing to 13.5px (just for this box).

I appreciate your help.

Regards,
Stefan

[Leo]

Hi Stefan,

I had a chat with Tom awhile ago and the conclusion is that WP Show Posts isn’t really meant for creating related posts.

Have you considered using a related posts specific plugin like this?
https://en-ca.wordpress.org/plugins/contextual-related-posts/

If you want to use the custom solution then I’d recommend posting a comment to the author of the post and see if he’s able to help – looks like he’s quite active on the comment section.

If you need additional help with WPSP, please open a support topic in its own support forums:

Free: https://wordpress.org/support/plugin/wp-show-posts/
Pro: https://wpshowposts.com/support/area/pro-support/

Thanks!

[Stefan]

Hi Leo,

It’s a good suggestion, I would rather keep my setup lean, by reducing the number of plugins.

I am happy with the current setup with WP posts and it displays related posts. Go GeneratePress!

What I would like to do to my current setup is (if the CSS code or whatever needed can be applied to just this particular hook/element). The desire is to get a similar look to this (link to the screenshot is the same as above): https://i.imgur.com/yUjh10G.png

1) Include title in the box “Additional reading…”
2) Reduce the spacing to 13.5px (just for this box).

Regards,
Stefan

[Elvin]

Hi there,

For #1:

Add this CSS:

add_action('wpsp_inside_wrapper',function($settings){
	if(2449 === (int) $settings['list_id']){echo '<h1>Additional reading…</h1>';}
},1,1);

Replace 2449 in the snippet with the WPSP list ID you want this to apply on.

And then you add this CSS:

.wpsp-list-label{
width:100%;
}

p.wp-show-posts-entry-title {
    padding-top: 0;
}

.wp-show-posts:not(.wp-show-posts-columns) .wp-show-posts-single {
    margin-bottom: 0 !important;
}

section#wpsp-82355 {
    padding: 20px;
}

[Stefan]

Hi Elvin,

Thank you for the prompt response.

Part 2 works well.

Can you please guide me where to put the Part 1 code? Is it in the elements section? I tried inserting it there and there was some extraneous text. Please see screenshot: https://i.imgur.com/u52qLN5.png

I tried to put it in the “Additional CSS” section, but that also didn’t work.

This is not yet my cup of tea. I appreciate your help.

Regards,
Stefan

[Ying]

Hi Stefan,

I think that was a typo, what Elvin means is PHP, not CSS 🙂

This is how you add PHP snippet:
Adding PHP: https://docs.generatepress.com/article/adding-php/

Let me know 🙂

[Stefan]

Hi Ying,

Yes, I figured it was PHP. I tried it but it displays as this:

View post on imgur.com

I would appreciate it if you can help me update the PHP.

Regards

[Ying]

I tested the PHP snippet myself, it works absolutely fine.

Where did you insert the PHP snippet?

https://docs.generatepress.com/article/adding-php/

[Stefan]

Hi Ying,

Thanks for the help. My noob mistake.

Regards,
Stefan

[Ying]

No problem 🙂

Glad that it works now!

[Author]

Posts