Collapsable Categories in Post Editor

So you have a ton of categories and there are a lot of child categories and the list in the post editor has become unruly? In order to change a posts' category or to add it to a new one the list is unmanageable. Here is a jQuery code snippet that you can use to make the categories collapsable. It removes the label functionality. You cannot click on the name to select the item's checkbox, but it now allows you to click on the name to expand the categories. You could definitely put this script into a js file and then enqueue it, but for the purposes of this demo, this works ok too. Here is a demo video:  [embed width="425" height="349"]http://www.youtube.com/watch?v=TKMoOrQ-rQI[/embed]
function make_categories_selector_collapsable() {
?>
<script>
jQuery(document).ready(function() {
        // first we need to hide the children to only see the top level categories
        jQuery('#categorychecklist ul.children').css('display','none');

        // This removes the label functionality as when we click the category name we do not necessarily want to select the item's checkbox, just want to expand the list
        jQuery('#categorychecklist label').each(function() {
                var labelHtml = jQuery(this).html();
                jQuery(this).replaceWith(labelHtml);
        });

        // we now want to grab each of the >li<'s so that we can use a click function
        jQuery('#categorychecklist li').each(function() {
                jQuery(this).click(function() {
                // so when the item is clicked it shows the sub categories
                jQuery(this).children().show();
        });
});

});
</script>
<?
}

add_action( 'admin_head' , 'make_categories_selector_collapsable' );
Post a comment
  1. Kelly

    Oh, I figured out what file to put it in. But it only expands and doesn't collapse back when you click the category again (which would make it easier to continue selecting the subcats.)

    • Matthew Price

      Hi Kelly Yeah it does not re-collapse. i had a site where there were 1400 categories and this just made it easy to get at that one category the site admins needed too. I can see what i can do to make it re-collapse Matt

  2. Kelly

    This is exactly what I want to do but what file do I put the code into?

    • Matthew Price

      Hi Kelly So you can put this into your theme's functions.php file. If you need anything else don't hesitate to ask Matt






Real Time Web Analytics ^