Archived topic
How to adjust CSS on WP Posts (Related Posts)
9 replies · Started by Stefan on March 27, 2021
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
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!
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
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;
}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
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 :)
Hi Ying,
Yes, I figured it was PHP. I tried it but it displays as this:
https://i.imgur.com/u52qLN5.png
I would appreciate it if you can help me update the PHP.
Regards
I tested the PHP snippet myself, it works absolutely fine.
Where did you insert the PHP snippet?
Hi Ying,
Thanks for the help. My noob mistake.
Regards,
Stefan
No problem :)
Glad that it works now!
