Title for related posts box

Resolved Sankalan
(@sankalan)

5 years, 2 months ago

Hi Team,

I know that GeneratePress doesn’t offer Related Posts feature out-of-the-box. So, I used WP Show Posts to create Related Posts and used Elements to display it above the comments container.

Heck! I even styled that thing to match my site’s simple design, and guess what, I don’t know coding! I feel like a superhero.

But there are two issues that I want to be addressed. I can’t figure that out. Can you help?

Look at this image: https://prnt.sc/zmywq8

I have marked two areas as 1 & 2 and highlighted them with arrows.

I want the text “You May Also Like:” in the area marked as 1.

I also want to show some icon (preferably Chevron Right) before each post title in the related post box. Something like this:

> 60 Fascinating Water Facts You Must Learn Today!
> 55 Earthquake Facts to Shake Your Brain

And so on…

I hope I made myself clear.

Is that possible?

Best Regards,
Sankalan

Viewing 9 replies - 1 through 9 (of 9 total)

Plugin Support Elvin
(@ejcabquina)

5 years, 2 months ago
Hi there,

As for #1, you can simply insert a <h3 class="related-post-label">You May Also Like:</h3></br> code as label header the same way you’ve added the WPSP list.

As for #2, There are multiple ways of doing this.

You can either install font awesome to your site to be able to use its font icon set so you can do something like this with CSS:
```
h2.wp-show-posts-entry-title:before{
content: "/f054";
}
```
Or upload a chevron right SVG icon and do something like this with CSS:
https://stackoverflow.com/a/25410621
```
h2.wp-show-posts-entry-title:before {
  display: block;
  content: ' ';
  background-image: url('../images/chevron-right-icon.svg');
  background-size: 28px 28px;
  height: 28px;
  width: 28px;
}
```
Thread Starter Sankalan
(@sankalan)

5 years, 2 months ago

I didn’t get it. Where am I supposed to put this:

<h3 class=”related-post-label”>You May Also Like:</h3></br>

Thread Starter Sankalan
(@sankalan)

5 years, 2 months ago

I added a post list in WP Show Posts plugins and then configured it to my liking.

Following that, I added this code using elements as hook (in GeneratePress):

<?php if ( function_exists( ‘wpsp_display’ ) ) wpsp_display( 28342 ); ?></p>

Executed the code as PHP and added display rules.

Where am I supposed to add this?

Thread Starter Sankalan
(@sankalan)

5 years, 2 months ago

Now, if I go ahead and edit the hook and add this:

<p class=”related-post-label”>You May Also Like:
<?php if ( function_exists( ‘wpsp_display’ ) ) wpsp_display( 28342 ); ?></p>

“You May Also Like:” outputs in a separate container. I want it to be inside the container that shows the related posts.

Thread Starter Sankalan
(@sankalan)

5 years, 2 months ago

Also, adding svg icon and then using the code

h2.wp-show-posts-entry-title:before {
display: block;
content: ‘ ‘;
background-image: url(‘../images/chevron-right-icon.svg’);
background-size: 28px 28px;
height: 28px;
width: 28px;
}

gives this: https://prnt.sc/zq47l2

How do I align them?
Plugin Support Elvin
(@ejcabquina)

5 years, 2 months ago
Now, if I go ahead and edit the hook and add this:

<p class=”related-post-label”>You May Also Like:
<?php if ( function_exists( ‘wpsp_display’ ) ) wpsp_display( 28342 ); ?></p>

“You May Also Like:” outputs in a separate container. I want it to be inside the container that shows the related posts.

You can structure it like this within your Hook element.
```
<div class="related-posts-wrapper">
<p class="related-post-label">You May Also Like:</p>
<?php if ( function_exists( 'wpsp_display' ) ) wpsp_display( 28342 ); ?>
</div>
```
You can also try changing h2.wp-show-posts-entry-title:before‘s display property from block to display: inline;

If this doesn’t align it properly, can you link us to the site in question? You can send the site details on our contact form found here: https://wpshowposts.com/contact/
Thread Starter Sankalan
(@sankalan)

5 years, 2 months ago

Awesome! You rock! Thanks. Fixed it! Love you guys.

Thread Starter Sankalan
(@sankalan)

5 years, 2 months ago

Thanks! I will mark this thread as resolved.

Plugin Support Elvin
(@ejcabquina)

5 years, 2 months ago

Nice one. Glad you got it sorted. No problem. 🙂

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Title for related posts box’ is closed to new replies.

Tags