Part 7: Creating category.php File for WordPress Theme

Welcome back to our WordPress theme development series. In this part, we’re diving into the creation of the category.php File for WordPress. This crucial template file allows us to display posts from specific categories with a tailored design. Let’s explore the code that powers your category pages.

<?php get_header(); ?>

<div class="container mt-2 mt-md-5">
    <div class="row">
        <div>
            <div class="category-heading">
                <h2 for="text-input">
                    Category: <?php echo single_cat_title(); ?>
                </h2>
            </div>
            <div class="row mt-3 mt-md-3"></div>
            <?php
                $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
                $args = array(
                    'category_name' => single_cat_title('', false), // Fetch posts from the current category
                    'posts_per_page' => 10,
                    'paged' => $paged
                );
                $query = new WP_Query($args);
            ?>
            <?php if ($query->have_posts()) : ?>
                <?php while ($query->have_posts()) : $query->the_post(); ?>
                    <article <?php post_class(''); ?>>
                        <div class="row">
                            <h2><a class="no-underline" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                            <div class="post-author-date">
                                <i class="fas fa-user"></i>
                                <span class="post-by">By <?php the_author(); ?></span>,
                                <i class="far fa-calendar"></i>
                                <span class="post-date"><?php the_date(); ?></span>
                            </div>
                            <div class="featured-image-home  d-flex align-items-center justify-content-center">
                                <?php if (has_post_thumbnail()) : ?>
                                    <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
                                <?php endif; ?>
                            </div>
                        </div>
                        <div class="row">
                            <div class="home-post-excerpt pt-3">
                                <?php the_excerpt(); ?>
                            </div>
                            <div class="mt-2 d-flex justify-content-end">
                                <a href="<?php the_permalink(); ?>" class="btn btn-primary">Read More</a>
                            </div>
                        </div>
                        <div class="row mt-5"></div>
                    </article>
                <?php endwhile; ?>
                <div class="pagination mt-2 mt-md-5">
                    <?php echo paginate_links(array('total' => $query->max_num_pages)); ?>
                </div>
            <?php else : ?>
                <p class="no-posts-message"><?php _e('No posts found.', 'your-theme-text-domain'); ?></p>
            <?php endif; ?>

            <?php wp_reset_postdata(); // Reset the query data to prevent conflicts ?> 
        </div>
    </div>
</div>

<?php get_footer(); ?>

Understanding the category.php Template:

1. get_header(); and get_footer();: As always, we start by including the header and footer templates to ensure a consistent design and layout throughout your theme.
2. Category Title: Within the category.php template, we dynamically fetch and display the name of the current category. This creates a personalized heading for each category page.
3. Custom Query: We initiate a custom query using WP_Query to retrieve posts from the current category. This allows us to control the number of posts displayed and other parameters.
4. Post Loop: With a custom query in place, we use a loop to iterate through the posts in the selected category. The loop structure is quite similar to what we’ve seen in the index.php and single.php templates.
5. Pagination: To ensure a user-friendly experience, we add pagination links when there are multiple pages of posts within the category.
6. No Posts Message: If there are no posts in the category, we display a user-friendly message.
7. wp_reset_postdata();: To prevent any potential conflicts with the main query, we reset the query data.

With your category.php file in action, you have the power to create unique layouts for different categories, enhancing the user experience and engagement. Stay tuned for more insights and knowledge-sharing as we continue our journey through WordPress theme development.