Search and 404 Template

Search and 404 Template

Two essential templates remain: the search results page (search.php) and the 404 error page (404.php).

Creating search.php

<?php get_header(); ?>

<main id="main-content">
    <div class="container">
        <div class="content-wrapper">
            <div class="primary-content">
                <header class="archive-header">
                    <h1 class="archive-title">
                        Search Results for: 
                        <span>"<?php echo get_search_query(); ?>"</span>
                    </h1>
                </header>

                <?php if (have_posts()) : ?>
                    <div class="post-grid">
                        <?php while (have_posts()) : 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>
                                    </p>
                                    <?php the_excerpt(); ?>
                                    <a href="<?php the_permalink(); ?>" class="read-more">Read More →</a>
                                </div>
                            </article>
                        <?php endwhile; ?>
                    </div>

                    <div class="pagination">
                        <?php the_posts_pagination(array(
                            'mid_size'  => 2,
                            'prev_text' => '&laquo; Previous',
                            'next_text' => 'Next &raquo;',
                        )); ?>
                    </div>

                <?php else : ?>
                    <div class="no-results">
                        <h2>Nothing Found</h2>
                        <p>Sorry, no posts matched your search. Try different keywords.</p>
                        <?php get_search_form(); ?>
                    </div>
                <?php endif; ?>
            </div>
            <?php get_sidebar(); ?>
        </div>
    </div>
</main>

<?php get_footer(); ?>

Key Search Functions

Function	Purpose
get_search_query()	Returns the search term (sanitized)
get_search_form()	Outputs the WordPress search form

Creating 404.php

<?php get_header(); ?>

<main id="main-content">
    <div class="container">
        <div class="error-404">
            <div class="error-code">404</div>
            <h1>Page Not Found</h1>
            <p>Oops! The page you're looking for doesn't exist.
               It might have been moved or deleted.</p>
            
            <div class="error-actions">
                <a href="<?php echo home_url(); ?>" class="btn">
                    ← Back to Homepage
                </a>
            </div>
            
            <div class="error-search">
                <p>Or try searching:</p>
                <?php get_search_form(); ?>
            </div>
        </div>
    </div>
</main>

<?php get_footer(); ?>

Styling the 404 Page

.error-404 {
    text-align: center;
    padding: 80px 0;
}

.error-code {
    font-size: 120px;
    font-weight: 800;
    color: #3498db;
    line-height: 1;
    margin-bottom: 16px;
}

.error-404 h1 {
    font-size: 32px;
    color: #2c3e50;
    margin-bottom: 16px;
}

.error-404 p {
    font-size: 18px;
    color: #888;
    margin-bottom: 30px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.error-actions {
    margin-bottom: 40px;
}

.error-search {
    max-width: 400px;
    margin: 0 auto;
}

.error-search p {
    font-size: 14px;
    margin-bottom: 12px;
}

When These Templates Are Used

Template	When It Loads
search.php	When a user submits the search form (URL: /?s=query)
404.php	When the URL doesn't match any content

Key Takeaways

• search.php displays search results using the same post card pattern
• Always handle the "no results" case with a search form and helpful message
• 404.php should be visually engaging and provide a way back (link + search)
• get_search_form() outputs WordPress's built-in search widget
• Both templates are important for a complete, polished theme