Create an Alphabetical Filter Page in WordPress

Table of Contents

Estimated reading time: 4 minutes

If you want to add a custom page to your WordPress site that allows users to filter posts by the first letter of their titles, you’re in the right place. This guide will walk you through creating an alphabetical filter page, including the necessary PHP and CSS code to make it look great.

Step 1: Create the Custom Page Template

First, you need to create a custom page template for WordPress. This template will handle the logic for filtering posts by their starting letter.

Create a New File

In your theme’s directory (usually located in wp-content/themes/your-theme/), create a new file named page-alphabetical-filter.php.

Add the PHP Code

Paste the following PHP code into page-alphabetical-filter.php:

<?php
/*
Template Name: Alphabetical Filter
*/
get_header();
?>

<div class="alphabetical-filter">
    <!-- Alphabetical list -->
    <ul class="alphabet-list">
        <?php
        // Define alphabet array
        $alphabet = range('A', 'Z');

        foreach ($alphabet as $letter) {
            echo '<li><a href="' . esc_url(add_query_arg('letter', $letter)) . '">' . esc_html($letter) . '</a></li>';
        }
        ?>
    </ul>

    <?php
    // Get selected letter from query parameter
    $selected_letter = isset($_GET['letter']) ? strtoupper($_GET['letter']) : '';

    if ($selected_letter) {
        // Query all posts
        $args = array(
            'post_type' => 'post',
            'posts_per_page' => -1,
            'orderby' => 'title',
            'order' => 'ASC'
        );

        // Custom query
        $query = new WP_Query($args);

        $has_posts = false;
        if ($query->have_posts()) :
            echo '<ul class="post-list">';
            while ($query->have_posts()) : $query->the_post();
                $title = get_the_title();
                // Check if title starts with the selected letter (case-insensitive)
                if (stripos($title, $selected_letter) === 0) {
                    ?>
                    <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
                    <?php
                    $has_posts = true;
                }
            endwhile;
            echo '</ul>';

            if (!$has_posts) {
                echo '<p>No posts found for the selected letter.</p>';
            }
        else :
            echo '<p>No posts found.</p>';
        endif;

        // Reset post data
        wp_reset_postdata();
    } else {
        echo '<p>Please select a letter to filter posts.</p>';
    }
    ?>

</div>

<?php
get_footer();
?>

Step 2: Style the Page with CSS

Next, you’ll want to add some CSS to make your page look better. This CSS will style the alphabetical list and the post list.

Add CSS to Your Theme

You can add the following CSS code to your theme’s style.css file or in the “Additional CSS” section in the WordPress Customizer.

/* Ensure the container is centered and styled */
.alphabetical-filter {
    max-width: 800px;
    margin: 20px auto; /* Center container */
    padding: 20px;
    background-color: #f9f9f9; /* Light background */
    border: 1px solid #ddd; /* Border for definition */
    border-radius: 8px; /* Rounded corners */
}

/* Style the alphabetical list */
.alphabet-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    border-bottom: 2px solid #0073aa; /* Separator line */
    margin-bottom: 20px; /* Space between list and posts */
}

.alphabet-list li {
    display: inline;
    margin-right: 10px;
}

.alphabet-list a {
    text-decoration: none;
    font-weight: bold;
    color: #0073aa; /* Link color */
}

.alphabet-list a:hover {
    text-decoration: underline;
}

/* Style the posts list */
.post-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.post-list li {
    margin-bottom: 10px;
    border-bottom: 1px solid #ddd; /* Separator line */
    padding-bottom: 10px; /* Space between items */
}

.post-list a {
    text-decoration: none;
    color: #333; /* Post title color */
}

.post-list a:hover {
    text-decoration: underline;
}

/* Remove last separator line */
.post-list li:last-child {
    border-bottom: none;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .alphabet-list li {
        display: block;
        margin-bottom: 5px;
    }
}

Step 3: Create a New Page and Assign the Template

Go to Pages > Add New in the WordPress admin panel.
Create a new page and set the page title, e.g., “Alphabetical Filter”.

On the right side, under the “Page Attributes” section, select “Alphabetical Filter” from the “Template” dropdown.
Publish or Update the page.

Troubleshooting

If you are having any issue with it displaying the correct posts or any information at all, make sure you clear your cache and try refreshing your web browser.

Conclusion

You’ve now set up a page on your WordPress site that allows users to filter posts by the first letter of their titles. Feel free to customize the CSS further to match your site’s theme or add additional features as needed.