Create wordpress template page with latest post in format image an title link

To create a WordPress page that displays the latest posts in a format that includes an image and a title (both linked to the respective post), you can achieve this by using custom page templates or shortcodes. Here’s a step-by-step guide to creating such a page:

Method 1: Use a Page Template (PHP)

If you’re comfortable working with PHP and your theme files, you can create a custom page template.

1. Create a Custom Template File
   In your theme directory, create a new file named page-latest-posts.php.
2. Add the Following Code
   Add the following code to the file:

<?php
/*
Template Name: Latest Posts
*/
get_header(); ?>

<div class="latest-posts">
    <h1><?php the_title(); ?></h1>
    <div class="posts-grid">
        <?php
        // Query for the latest posts
        $latest_posts = new WP_Query([
            'posts_per_page' => 10, // Number of posts to display
        ]);

        if ($latest_posts->have_posts()) :
            while ($latest_posts->have_posts()) : $latest_posts->the_post(); ?>
                <div class="post-item">
                    <a href="<?php the_permalink(); ?>" class="post-thumbnail">
                        <?php if (has_post_thumbnail()) : ?>
                            <?php the_post_thumbnail('medium'); ?>
                        <?php else : ?>
                            <img src="<?php echo esc_url(get_template_directory_uri()); ?>/assets/default-thumbnail.jpg" alt="<?php the_title(); ?>">
                        <?php endif; ?>
                    </a>
                    <h2 class="post-title">
                        <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                    </h2>
                </div>
            <?php endwhile;
            wp_reset_postdata();
        else : ?>
            <p>No posts found.</p>
        <?php endif; ?>
    </div>
</div>

<?php get_footer(); ?>

3. Save and Assign the Template
   • Upload the file to your theme folder.
   • In the WordPress admin panel, create a new page, and under “Page Attributes,” select “Latest Posts” as the template.
4. Style the Posts (Optional)
   Add custom CSS to your theme’s stylesheet or through the WordPress Customizer to style the layout.

Method 2: Use a Shortcode (No PHP Editing)

You can also use a shortcode if you prefer not to edit theme files.

1. Add the Shortcode to Your Theme
   Add this code to your theme’s functions.php file:

function display_latest_posts() {
    ob_start();

    $latest_posts = new WP_Query([
        'posts_per_page' => 10, // Number of posts to display
    ]);

    if ($latest_posts->have_posts()) :
        echo '<div class="latest-posts">';
        while ($latest_posts->have_posts()) : $latest_posts->the_post(); ?>
            <div class="post-item">
                <a href="<?php the_permalink(); ?>" class="post-thumbnail">
                    <?php if (has_post_thumbnail()) : ?>
                        <?php the_post_thumbnail('medium'); ?>
                    <?php else : ?>
                        <img src="<?php echo esc_url(get_template_directory_uri()); ?>/assets/default-thumbnail.jpg" alt="<?php the_title(); ?>">
                    <?php endif; ?>
                </a>
                <h2 class="post-title">
                    <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                </h2>
            </div>
        <?php endwhile;
        echo '</div>';
        wp_reset_postdata();
    else :
        echo '<p>No posts found.</p>';
    endif;

    return ob_get_clean();
}
add_shortcode('latest_posts', 'display_latest_posts');

2. Insert the Shortcode into a Page
   • Create a new page in WordPress.
   • Add the [latest_posts] shortcode where you want the posts to appear.
3. Style the Output (Optional)
   Use custom CSS to style the posts grid.

Final Touches

For both methods:

• Ensure thumbnails are enabled in your theme (add_theme_support('post-thumbnails');).
• Use responsive CSS for a polished design.