☰ Categories

WordPress: Create a collapsed category menu

2 days ago
Timothy Conrad
2 minutes

The following code will create a collapsed category menu that will work on desktops and mobile

1. Add Category HTML Output to header.php

Edit your theme’s header.php and add this HTML block near the top, ideally just after the opening <body> tag or inside your main <header> area:

<div class="custom-category-toggle-container">
    <div id="category-toggle-button">☰ Categories</div>
    <ul id="custom-category-list">
        <?php
        wp_list_categories(array(
            'title_li' => '',       // No title
            'hide_empty' => false,  // Show even empty categories
        ));
        ?>
    </ul>
</div>

This block:

Renders a button called “☰ Categories”.

Lists all WordPress categories (using wp_list_categories()).

Will be styled and hidden/shown with CSS and JavaScript

2. Add Custom CSS

Paste this in Appearance > Customize > Additional CSS or in your theme’s style.css

.custom-category-toggle-container {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #ffffff;
    border: 0px solid #ccc;
    padding: 0px;
    z-index: 10000;
    font-family: sans-serif;
    max-width: 200px;
}

#category-toggle-button {
    background-color: #9999;
    color: white;
    padding: 8px 10px;
    cursor: pointer;
    border-radius: 5px;
    text-align: center;
}

#custom-category-list {
    list-style: none;
    padding-left: 0;
    margin-top: 10px;
    display: none; /* Hidden by default */
}

#custom-category-list li {
    margin-bottom: 5px;
}

3. Add JavaScript to Toggle Visibility

Add this just before the closing </body> tag in footer.php:

<script>
document.addEventListener("DOMContentLoaded", function () {
    const toggleBtn = document.getElementById("category-toggle-button");
    const catList = document.getElementById("custom-category-list");

    toggleBtn.addEventListener("click", function () {
        const isVisible = catList.style.display === "block";
        catList.style.display = isVisible ? "none" : "block";
    });
});
</script>