How to restrict on selecting child taxonomy

Really, you could probably refine this more and come up with better names, I just wanted to make it functional ^_^ !

First thing’s first -> Let’s include JQuery because I don’t want to do this in vanilla JS.

function lets_include_jquery() {
    wp_enqueue_script( 'jquery' );
}
add_action( 'admin_enqueue_scripts', 'lets_include_jquery' );

Now let’s throw a script into the footer of our admin panel to take care of the fun stuff.

function lets_add_our_js() {
    if(get_current_post_type() == 'POST_TYPE_HERE') : ?>
        <script type="text/javascript">
            jQuery(document).ready(function($){
                $('#TAXONOMY_NAME_HEREchecklist li label > input:checkbox:not(:checked)')
                    .parent('label')
                    .next('ul.children')
                    .css('display', 'none');

                // The following is 100% optional since our children are hidden, I like it though.
                $('#TAXONOMY_NAME_HEREchecklist li label > input:checkbox:not(:checked)')
                    .parent('label')
                    .next('ul.children')
                    .find('input:checkbox')
                    .attr('disabled', 'disabled');

                // This is required
                $('#TAXONOMY_NAME_HEREchecklist li label > input:checkbox').click(function(){
                    if($(this).is(':checked')){
                        $(this).parent('label').next('.children').css('display', 'block');
                        $(this).parent('label').next('.children').find('input:checkbox').removeAttr('disabled'); // This line is really optional, I like it though.
                    }
                    else{
                        $(this).parent('label').next('.children').css('display', 'none');
                        $(this).parent('label').next('.children').find('input:checkbox').attr('disabled', 'disabled'); // This line is really optional, I like it though.
                    }
                });
            });
        </script>
  <?php endif; 
}
add_action('admin_footer', 'lets_add_our_js');

It’s a pretty generic script, nothing fancy going on. Next we add a neat little function I found online!

function get_current_post_type() {
    global $post, $typenow, $current_screen;

    //we have a post so we can just get the post type from that
    if ( $post && $post->post_type )
    return $post->post_type;

    //check the global $typenow - set in admin.php
    elseif( $typenow )
    return $typenow;

    //check the global $current_screen object - set in sceen.php
    elseif( $current_screen && $current_screen->post_type )
    return $current_screen->post_type;

    //lastly check the post_type querystring
    elseif( isset( $_REQUEST['post_type'] ) )
    return sanitize_key( $_REQUEST['post_type'] );

    //we do not know the post type!
    return null;
}

Whew! Now there are a few things you need to change… Wherever you find POST_TYPE_HERE you’ll need to replace that with whatever your post type is so the script will only appear on those admin pages. If you have multiple, is in_array(). Wherever you see TAXONOMY_NAME_HERE you’ll want to replace that with the taxonomy name that the metabox holds. So if I create a taxonomy / category called “tax_news” my Jquery would read: '#tax_newschecklist' etc.

It’s Up To You To rename and comment this code so that it makes sense to you and your scenario for future purposes! I highly suggest you do so!

Leave a Comment