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!