Archived topic
Related posts Featured Image
4 replies · Started by Lucas on August 17, 2018
Hello i'm building a related post section for my blog.
I needed an specific design for it. So i coded the whole thing.
Here's my code:
<div class="container mt-5 pt-5">
<style type="text/css" >
.equal {
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
}
</style>
<?php
$tags = wp_get_post_terms( get_queried_object_id(), 'post_tag', ['fields' => 'ids'] );
$args = [
'post__not_in' => array( get_queried_object_id() ),
'posts_per_page' => 3,
'ignore_sticky_posts' => 1,
'orderby' => 'rand',
'tax_query' => [
[
'taxonomy' => 'post_tag',
'terms' => $tags
]
]
];
$my_query = new wp_query( $args );
if( $my_query->have_posts() ) {
?>
<div class="container">
<div class="row">
<div class="col-sm-3 equal ">
<img src="https://dev.mastermeup.com/wp-content/uploads/2018/08/RELATED-OK.png" alt="" class="mx-auto">
</div>
<?php
while( $my_query->have_posts() ) {
$my_query->the_post(); ?>
<div class="col-sm-3 equal">
<div class="card" style="width: 20rem;">
<div class="card-block">
<h4 class="card-title"><a href="<?php the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>" rel="nofollow"><?php the_title(); ?></a></h4>
<p class="card-text"><?php echo '<p class="mb-0">' . get_excerpt() . '</p>' ;?></p>
</div>
</div>
</div>
<?php }
wp_reset_postdata(); ?>
</div>
</div>
<?php
}
?>
</div>
Everything is ok, but i cant find a way of displaying the featured image of the post.
Can you help me with this?
Thanks in advance
I think you're looking for this function: the_post_thumbnail()
You'd need to use it within the loop :)
Hello again. I've another question about this.
So i want to display this section of related posts only on my single-post. I'm using a custom field (True/false) to switch between Related posts or Ad Banner here's my code:
<?php if ( get_field( 'mostrar_related_posts' ) == 1 ) { ?> <!-- IF TRUE THEN DISPLAY THE RELATED POST LIST -->
<style type="text/css" >
.equal {
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
}
</style>
<?php
$tags = wp_get_post_terms( get_queried_object_id(), 'post_tag', ['fields' => 'ids'] );
$args = [
'post__not_in' => array( get_queried_object_id() ),
'posts_per_page' => 3,
'ignore_sticky_posts' => 1,
'orderby' => 'rand',
'tax_query' => [
[
'taxonomy' => 'post_tag',
'terms' => $tags
]
]
];
$my_query = new wp_query( $args );
if( $my_query->have_posts() ) {
?>
<div class="container">
<div class="row card-deck">
<div class="col-sm-2 equal ">
<img src="https://dev.mastermeup.com/wp-content/uploads/2018/08/RELATED-OK.png" alt="" class="mx-auto">
</div>
<?php
while( $my_query->have_posts() ) {
$my_query->the_post(); ?>
<div class="col-sm equal py-1" style="border-radius:0px!important;">
<div id="related-box" class="card " >
<a href="<?php the_permalink() ?>" class="text-center" title=""><?php the_post_thumbnail('post-thumbnail', ['class' => 'card-img-top pt-3 pl-3 pr-3 pb-0 related-img', 'title' => 'Feature image']); ?></a>
<div class="card-block">
<h4 class="card-title"><a href="<?php the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>" rel="nofollow"><?php the_title(); ?></a></h4>
<p class="card-text"><?php echo '<p class="mb-0 related-exerpt">' . get_excerpt() . '</p>' ;?></p>
</div>
</div>
</div>
<?php }
wp_reset_postdata(); ?>
</div>
</div>
<?php
}
?>
<?php } else {
// echo 'false';
} ?> <!-- END OF THE CONDITION FOR DISPLAYING RELATED POST -->
Could i put this extract of code in a hook? Before footer Hook . And show it only in the single post?
I guess maybe using a conditional tag of wordpress. Like is_single() ?
But when i use is_single for example to ad a section to my single post it doesnt work.
Should i use another conditional tag? What am i doing wrong?
Thanks in advance.
Best Regards
Nevermind i've already figured it out.
I'm using the new feature Elements. And put the section in a before footer hook.
Thanks!
Hooks Elements is definitely the way to go.
Glad you've figured out :)