Add a new tab to the category tabs under edit post area

Here’s the script that we can enqueue into our 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 ).

Add this as an external script, active-tab.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( '
  • ' + label + '
  • ' ); /* 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( '
  • Active
  • ' ); $parent = $( '#' + taxonomy + '-tabs' ).parents( 'div.inside' ); /* Add the 'Active' tab panel and content - display none */ $parent.find( 'div.tabs-panel:last' ).before( '' ); /* 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_active_tabs_scripts() {
        wp_enqueue_script( 'active_tabs', get_template_directory_uri() . '/js/active-tabs.js' );
    }
    add_action( 'admin_enqueue_scripts', 'load_active_tabs_scripts' );
    

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    You may use these HTML tags and attributes:

    <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>