front-page.php Template

front-page.php Template

The front-page.php file controls your homepage. This is where we'll combine the hero section with dynamic blog posts from the WordPress Loop.

Creating front-page.php

<?php get_header(); ?>

<!-- Hero Section -->
<section id="hero">
    <div class="container">
        <div class="hero-content">
            <h1><?php bloginfo('name'); ?></h1>
            <p><?php bloginfo('description'); ?></p>
            <a href="<?php echo get_permalink(get_option('page_for_posts')); ?>" 
               class="btn">Read the Blog</a>
        </div>
    </div>
</section>

<!-- Main Content -->
<main id="main-content">
    <div class="container">
        <div class="content-wrapper">
            <div class="primary-content">
                <h2 class="section-title">Latest Posts</h2>
                <div class="post-grid">
                    <?php
                    $recent = new WP_Query(array(
                        'posts_per_page' => 6,
                        'post_status'    => 'publish',
                    ));
                    ?>
                    <?php if ($recent->have_posts()) :
                        while ($recent->have_posts()) : $recent->the_post(); ?>
                            <article class="post-card">
                                <?php if (has_post_thumbnail()) : ?>
                                    <a href="<?php the_permalink(); ?>">
                                        <?php the_post_thumbnail('medium_large'); ?>
                                    </a>
                                <?php endif; ?>
                                <div class="post-card-body">
                                    <h3><a href="<?php the_permalink(); ?>">
                                        <?php the_title(); ?>
                                    </a></h3>
                                    <p class="post-meta">
                                        <span class="date"><?php echo get_the_date(); ?></span>
                                        <span class="author">by <?php the_author(); ?></span>
                                    </p>
                                    <?php the_excerpt(); ?>
                                    <a href="<?php the_permalink(); ?>" class="read-more">Read More →</a>
                                </div>
                            </article>
                    <?php endwhile; wp_reset_postdata();
                    else : ?>
                        <p>No posts yet. Start writing!</p>
                    <?php endif; ?>
                </div>
            </div>
            <?php get_sidebar(); ?>
        </div>
    </div>
</main>

<?php get_footer(); ?>

Key Functions Used

Function	Purpose
new WP_Query()	Custom query to fetch specific posts
posts_per_page	Limit how many posts are shown
wp_reset_postdata()	Reset global post data after a custom query
has_post_thumbnail()	Check if the post has a featured image
the_post_thumbnail('medium_large')	Output the featured image at a specific size
get_the_date()	Return (not echo) the post date
get_sidebar()	Include sidebar.php
get_option('page_for_posts')	Get the blog page ID from settings

WP_Query vs the Default Loop

Default Loop	WP_Query
Uses WordPress's automatic query based on the URL	Custom query you define with parameters
No setup needed — just have_posts()	Create with new WP_Query($args)
Best for standard templates (archive, single)	Best for custom sections (homepage features, related posts)
No cleanup needed	Must call wp_reset_postdata() after

Image Size Options

Size Name	Dimensions
thumbnail	150 × 150 (cropped)
medium	300 × 300 (max)
medium_large	768 × 0 (width only)
large	1024 × 1024 (max)
full	Original uploaded size

Key Takeaways

• front-page.php is always used for the homepage, regardless of Reading settings
• Use WP_Query for custom post queries on the homepage
• Always call wp_reset_postdata() after a custom WP_Query
• Use get_sidebar() to include the sidebar template
• The hero section pulls dynamic content from WordPress settings