Currently, I am diving into the world of WordPress theme development by adapting my existing Bootstrap and JavaScript website.
My requirements are as follows:
1) Implement a section on the homepage of my WordPress site to display the latest three blog articles with just their thumbnails and titles.
2) Both the thumbnail images and post titles should be clickable, linking to the respective blog posts.
I have already crafted everything, and at the moment, my section looks like this:
<section id="counter" class="parallax-section" style="background-position: 50% 0px;">
<div class="container">
<div class="row">
<div class="col-md-12 title text-center my-5">
<h2 class="bord">The History Of <span class="color"><?php bloginfo('name'); ?></span></h2>
</div>
<?php
$categories = get_the_category();
$category_id = $categories[0]->cat_ID;
$esi_query = new WP_Query( array( 'cat' => $category_id,'posts_per_page' => '3' ) ); while($esi_query->have_posts()) : $esi_query->the_post(); ?>
<div class="col-md-4 col-sm-6">
<div class="member-photo">
<?php echo the_post_thumbnail();?>
<div class="member-title">
<h5><?php the_title()?></h5>
</div>
</div>
</div>
<?php endwhile; ?>
<?php wp_reset_postdata(); // reset the query ?>
</div>
</div>
</section>
By following this structure, I have successfully created a loop showcasing the last three articles for a specific category. To ensure that each thumbnail links to its corresponding post page, I integrated the following code in my functions.php file:
function esi_post_thumbnail( $html, $post_id) {
$html = '<a href="' . get_permalink( $post_id ) . '" title="' . esc_attr( get_post_field( 'post_title', $post_id ) ) . '">' . $html . '</a>';
return $html;
}
add_filter( 'post_thumbnail_html', 'esi_post_thumbnail', 10, 3 );
This solution works perfectly for the thumbnails. However, I am facing a challenge regarding creating clickable links for the post titles as well. I am seeking guidance on how to achieve the same result efficiently, possibly utilizing the WP_Query function.
Any assistance or suggestions would be greatly appreciated. Thank you!