5

On my blog I have a large number of categories >500, so I need to have some kind of checklist which categories are already selected to continue selecting.

For example, if we have cat1, cat2, cat3...cat50, and I selected cat3, cat5, cat7 and cat44, and need to select more of them, I need to have checklist what is already selected (something similar to tags, when you select tag, he is by automation checked and written below tag box).

I hope you understand what I am talking about.

So my question is - any kind of suggestion how to develop this (only suggestion, not whole code) or maybe there is some kind of plugin that I am not aware of?

Thank you

EDIT:

I need this in WordPress admin (add new post) screen

1
  • You know why tag and category UI are in this way? Because tag mean to be more than 500 but category is to be very specific and few. Basically you should use tags if your category do not have parent child relation.
    – Sumit
    Jun 14 '16 at 15:36
7

Here's a script that you can enqueue into your admin panel. It will add a new tab to the category tabs called "Active". Whenever a checkbox is checked, it gets added to the "Active" tab list, you can also click links in the "Active" tab list to remove them ( uncheck them ).

Category Metabox with Active Tab

Add this as an external script, custom-tabs.js maybe:

jQuery( document ).ready( function( $ ) {

    /* Ensure that there are category metaboxes */
    if( $( 'ul.category-tabs' ).length ) {
        var taxonomies = [ 'category', 'tag' ]; /* Taxonomy Slugs ( category and tag are built-in ) */

        /* Loop through each category metabox and add a new tab */
        $.each( taxonomies, function( key, taxonomy ) {

            /* Add a checkbox listener */
            /* Whenever a checkbox is checked or unchecked, remove 'Active' tab list item */
            $( '#taxonomy-' + taxonomy + ' ul.categorychecklist input[type="checkbox"]' ).change( function() {
                var label   = $( this ).parent().text().trim();     /* Grab checkbox label */
                var value   = $( this ).val();                      /* Grab checkbox value */

                /* IF it is checked, add it to the 'Active' tab */
                if( $( this ).is( ':checked' ) ) {
                    $( '#' + taxonomy + '-active ul' ).append( '<li data-val="' + value + '"><a href="javascript:void(0);"><span class="dashicons dashicons-no-alt" style="font-size:18px;text-decoration:none;margin-right:4px;"></span>' + label + '</a></li>' );

                /* IF it is unchecked, remove it from the 'Active' tab */
                } else {
                    $( '#' + taxonomy + '-active li[data-val="' + value +'"]' ).remove();
                }
            } );

            /* Add click listener to the newly added 'Active' tab links */
            $( 'div.inside' ).on( 'click', '#' + taxonomy + '-active a', function() {
                var value = $( this ).parent().attr( 'data-val' );

                /* Uncheck any values that have the clicked value */
                $( this ).parents( 'div.inside' ).find( 'input[value="' + value +'"]' ).prop( 'checked', false );

                /* Remove 'Active' tab link */
                $( this ).parent().remove();
            } );

            /* Append an 'Active' tab */
            $( '#' + taxonomy + '-tabs' ).append( '<li><a href="#' + taxonomy + '-active">Active</a></li>' );
            $parent = $( '#' + taxonomy + '-tabs' ).parents( 'div.inside' );

            /* Add the 'Active' tab panel and content - display none */
            $parent.find( 'div.tabs-panel:last' ).before( '<div id="' + taxonomy + '-active" class="tabs-panel" style="display: none;"><ul></ul></div>' );

            /* IF there are any checked values on load, trigger change. */
            $parent.find( '#' + taxonomy + '-all input:checked' ).each( function() {
                $( this ).trigger( 'change' );
            } );

        } );

    }

} );

Next we can enqueue it into our admin panel:

function load_custom_tabs_scripts() {
    wp_enqueue_script( 'custom_tabs', get_template_directory_uri() . '/scripts/custom-tabs.js' );
}
add_action( 'admin_enqueue_scripts', 'load_custom_tabs_scripts' );

Let me know if you run into issues with it.

8
  • This works like a charm, really. But now I have a problem :( I have couple of custom taxonomies created, this box shows on all meta-boxes, not only on categories meta-box. Jun 14 '16 at 20:36
  • Can we have this for every taxonomy but independent on other? I hope you know what I mean. Besides that - man this is a really peace of code. Great! Jun 14 '16 at 20:37
  • @Eager2Learn I've added an array at the top of the script, just add your taxonomies in there ['taxonomy-slug-1', 'taxonomy-slug-2'] and that should work.
    – Howdy_McGee
    Jun 14 '16 at 20:55
  • Just quick Q, sorry for my ignorance, I did not meet this till now - if( $( 'ul.category-tabs' ).length ) { var taxonomies = [ 'tax_listings', 'tax_listings_type' ]; This: tax_listings and tax_listings_type, I know slugs for my custom taxonomies, but what is a slug of category taxonomy? I mean normal built-in category in WP? Jun 14 '16 at 22:30
  • 1
    Thank you very much, I marked this answer as correct. This was flawless, mate. Thanx again! Jun 15 '16 at 2:15
0

The easiest way would be to add a meta box and use get_the_category_list to show the categories that already have been selected. This only works if you save your post, just like the tags are only shown in their own box after you confirmed them.

If you want to do this on the fly, you will need javascript to fill your metabox. Put a selector on all checkboxes inside the ul that holds the list of categories and display the label in your metabox once the label in the category box is checked.

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.