0

It's possible there's a better way to handle this content, but here's what I'm trying to do:

I have a listings site with a huge amount of terms for a custom taxonomy--around 450. It will be incredibly difficult to wade through all those terms when adding new posts. I need a way to list the taxonomy terms in a way that is easier to scroll through.

I'd like to make the categories into accordion-style dropdowns, where every parent term is turned into an accordion/link, so that at first, only the parent terms are listed.

Then, when you click a parent term, all the child terms open.

I am not sure if this is possible (without a ton of work) or if there are better alternatives. So far, I haven't found much for altering the taxonomy meta box beyond changing the select type to radio/dropdown, etc.

Thank you!

0

You need to dive in the wp_dropdown_categories( $args ); and wp_list_categories functions to list your terms, even if I don't think it's the better way. For accordion you will need to compose your own select and option entries and use your own css/js like Smooth accordion dropdown menu.

It's possible to list term hierarchically with wp_dropdown_categories( $args );.

the list of args to change as you want :

$args = array(
    'show_option_all'    => '',
    'show_option_none'   => '',
    'option_none_value'  => '-1',
    'orderby'            => 'ID',
    'order'              => 'ASC',
    'show_count'         => 0,
    'hide_empty'         => 1,
    'child_of'           => 0,
    'exclude'            => '',
    'include'            => '',
    'echo'               => 1,
    'selected'           => 0,
    'hierarchical'       => 1,
    'name'               => 'cat',
    'id'                 => '',
    'class'              => 'postform scrollable-menu',
    'depth'              => 0,
    'tab_index'          => 0,
    'taxonomy'           => 'category',
    'hide_if_empty'      => false,
    'value_field'        => 'term_id',
);
wp_dropdown_categories($args);

To make the select dropdown scrollable,

.scrollable-menu {
    height: auto;
    max-height: 200px;
    overflow-x: hidden;
}

Hope it helps you !

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.