How to List Categories in Two Columns in WordPress

Created with:

Visibility:

public

October 7, 2023

Whether you’re managing a blog that holds numerous categories or developing an online store with a multitude of product sections, organizing your site’s categories into two columns can make it more user-friendly for your site visitors. This list style provides a neatly arranged format and increases overall readability of your site. In this article, we will guide you through the simple steps to list your categories in two columns on your WordPress website.

					function wpturbo_list_cats_two_columns() {
    $args = array(
        'orderby' => 'name',
        'order' => 'ASC'
    );
    $categories = get_categories($args);
    $column = array_chunk($categories, ceil(count($categories) / 2));
    $html = '<div class="wpturbo-category-columns">';
    foreach ($column as $categories) {
        $html .= '<ul class="wpturbo-category-column">';
        foreach ($categories as $category) {
            $html .= '<li class="wpturbo-category-item">';
            $html .= '<a href="' . get_category_link( $category->term_id ) . '">' . $category->name . '</a>';
            $html .= '</li>';
        }
        $html .= '</ul>';
    }
    $html .= '</div>';

    return $html;
}
add_shortcode('wpturbo_categories', 'wpturbo_list_cats_two_columns');

The function wpturbo_list_cats_two_columns() is defined to list all categories into two equal columns. The function operates as follows:

    $args = array(
        'orderby' => 'name',
        'order' => 'ASC'
    );
    $categories = get_categories($args);

This first part inside the function is setting up arguments to list the categories in ascending order by name. get_categories($args) is a native WordPress function that returns an array of all categories based on the given $args.

    $column = array_chunk($categories, ceil(count($categories) / 2));

array_chunk() function is used to split the categories into two columns. ceil(count($categories) / 2) determines the size of each chunk. The ceil() function is used to round up the division of count of categories by 2, it ensures that the array is evenly split between the two columns even if there is an odd number of categories.

Next, the column formation begins with <div class="wpturbo-category-columns">. It creates a div to contain the two columns of categories.

    foreach ($column as $categories) {
        $html .= '<ul class="wpturbo-category-column">';
        foreach ($categories as $category) {
            $html .= '<li class="wpturbo-category-item">';
            $html .= '<a href="' . get_category_link( $category->term_id ) . '">' . $category->name . '</a>';
            $html .= '</li>';
        }
        $html .= '</ul>';
    }
    $html .= '</div>';

    return $html;

This part of the script runs a foreach loop on $column variable, creating an unordered list <ul> for each column then in nested foreach loop it creates a list item <li> for each category. Inside the list item, the category name is wrapped in an anchor tag <a>, using the get_category_link() function to retrieve the URL of the category, and $category->name to get the category’s name. After listing out all the categories, it closes the div.

The function returns the generated HTML code to display the categories in two columns.

Lastly,

add_shortcode('wpturbo_categories', 'wpturbo_list_cats_two_columns');

This line of code creates a new WordPress shortcode wpturbo_categories that calls the wpturbo_list_cats_two_columns() function. This way, you can insert this shortcode into your posts or pages to display the list of categories in two columns.

How to List Categories in Two Columns in WordPress

Add Snippet To Project