Support » Plugins » Hacks » WordPress Category Walker – How To Split Categories Into Multiple Columns?

  • James

    (@infogreenroutemediacom)


    I’m attempting to build a mega-menu for my WordPress blog. As part of the menu I’m using a custom category walker to list categories as links in a dropdown div (ParentCat>ChildCats). What I’d like to do is split the child categories into multiple columns so they fill the full width of my dropdown div. I know I can do this by just floating the list elements but I’d like the order to be vertical (1, 2 and 3 in the first column and 4, 5 and 6 in second column etc).

    So far I have the below walker that structures my dropdown div and displays the child categories in one column. Can anybody provide any input as to how or if I can split the child categories up into multiple columns? I’ve seen several articles regarding this but I can’t figure out how to apply the logic inside a walker?

    class Navigation_Catwalker extends Walker_Category {
    
    // Configure the start of each level
    function start_lvl(&$output, $depth = 0, $args = array()) {
        $output .= "";
    }
    
    // Configure the end of each level
    function end_lvl(&$output, $depth = 0, $args = array()) {
        $output .= "";
    }
    
    // Configure the start of each element
    function start_el( &$output, $category, $depth = 0, $args = array(), $id = 0) {
    
        // Set the category name and slug as a variables for later use
        $cat_name = esc_attr( $category->name );
        $cat_name = apply_filters( 'list_cats', $cat_name, $category );
        $cat_slug = esc_attr( $category->slug );
    
        // Configure the output for the top list element and its URL
        if ( $depth === 0 ) {
            $link = '<a class="parent-category-dropdown" href="' . esc_url( get_term_link($category) ) . '"' . '>' . $cat_name . '</a>';
            $indent = str_repeat("\t", $depth);
            $output .= "\t<li class='parent-category " . $cat_slug . "'>$link\n<div class='category-dropdown'>\n<span class='parent-category-title'>" . $cat_name . "</span>\n$indent<ul class='submenu'>\n";
        }
    
        // Configure the output for lower level list elements and their URL's
        if ( $depth > 0 ) {
            $link = '<a href="' . esc_url( get_term_link($category) ) . '"' . '>' . $cat_name . '</a>';
            $output .= "\t<li class='sub-category'>$link\n";
        }
    
    }
    
    // Configure the end of each element
    function end_el(&$output, $page, $depth = 0, $args = array() ) {
        if ( $depth === 0 ) {
            $indent = str_repeat("\t", $depth);
            $output .= "$indent</ul>\n</div>\n";
        }
        if ( $depth > 0 ) {
            $output .= "</li>";
        }
    
    }
    
    }

    Thanks,
    James

  • The topic ‘WordPress Category Walker – How To Split Categories Into Multiple Columns?’ is closed to new replies.