By:

Displaying posts on WordPress with feature image

April 23, 2024Programming

[php]
<div class="row">
                    <?php if (have_posts()) : ?>
                        <?php while (have_posts()) : the_post(); ?>
                            <div class="col-12 col-md-6 col-lg-4">
                                <div class="weekly-news">
                                    <article <?php post_class(); ?>>
                                        <div class="entry-thumbnail">
                                            <?php if (has_post_thumbnail()) : ?>
                                                <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
                                                    <?php the_post_thumbnail('thumbnail'); ?>
                                                </a>
                                            <?php else : ?>
                                                <!-- Default image -->
                                                <?php
                                                    // Get the URL to the theme directory
                                                    $theme_directory = get_template_directory_uri();
                                                    // Construct the URL to the screenshot.png
                                                    $image_url = $theme_directory . '/screenshot.png';
                                                ?>

                                                <img src="<?php echo esc_url($image_url); ?>" alt="Screenshot" class="img-fluid">
                                            <?php endif; ?>
                                        </div>
                                        <div class="entry-content">
                                            <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                                            <!-- <?php the_content(); ?> -->
                                        </div>
                                    </article>
                                </div>
                            </div>
                            <?php endwhile; ?>
                            <?php the_posts_pagination(); ?>
                        <?php else : ?>
                        <p><?php esc_html_e('No posts found.', 'rubinastheme'); ?></p>
                    <?php endif; ?>
                </div>
[/php]

Let’s break it down step by step:

  1. Opening <div class="row">: This indicates the start of a row in a grid system. It uses a CSS framework Bootstrap.
  2. <?php if (have_posts()) : ?>: This checks if there are any posts available to display.
  3. <?php while (have_posts()) : the_post(); ?>: This initiates a loop through each available post.
  4. <div class="col-12 col-md-6 col-lg-4">: Within each iteration of the loop, this div represents a column in the grid. The classes col-12, col-md-6, and col-lg-4 define the column widths for different screen sizes using Bootstrap’s grid system.
  5. <article <?php post_class(); ?>>: This creates an HTML article element with dynamic classes based on WordPress’s post type and other attributes.
  6. <?php if (has_post_thumbnail()) : ?>: This checks if the current post has a featured image.
  7. <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">: This creates a link to the post’s permalink (URL) and sets the title attribute to the post’s title.
  8. <?php the_post_thumbnail('thumbnail'); ?>: This outputs the post’s featured image with the ‘thumbnail’ size.
  9. <?php else : ?>: If the post doesn’t have a featured image, this part of the code is executed.
  10. <img src="<?php echo esc_url($image_url); ?>" alt="Screenshot" class="img-fluid">: This outputs the default image with the constructed URL.
  11. <?php endif; ?>: Ends the conditional statement for checking if the post has a featured image.
  12. <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>: This outputs the post’s title as a link to the post’s permalink.
  13. <?php the_content(); ?>: This would normally output the post’s content, but it’s currently commented out.
  14. <?php endwhile; ?>: Ends the loop through each post.
  15. <?php the_posts_pagination(); ?>: This displays pagination links for navigating between pages of posts.
  16. <?php else : ?>: If there are no posts found, this part of the code is executed.
  17. <p><?php esc_html_e('No posts found.', 'rubinastheme'); ?></p>: This outputs a message indicating that no posts were found.
  18. <?php endif; ?>: Ends the conditional statement for checking if there are any posts to display.

Overall, this code creates a responsive grid layout for displaying posts, with each post represented by a thumbnail image, title, and optionally, content. If no posts are found, it displays a message indicating so.

Related Posts