13 responses to “How To Show/Hide WordPress Meta Boxes By Selecting Categories”

  1. Dan

    This looks awesome! I must come back to this. Do you think a little JQuery could make those boxes slide open too? ; )

    Dan

  2. Jonathan

    Dimas, I’m running into a bit of trouble. I’ve added the JS and CSS. I think there is some trouble with the JS, though, or there is an update that I need to make to it. I updated the reference in the JS to match my metabox – do I need to update the ID references? If so, what changes need to be made?

  3. frances

    I’ve just been adding this to a custom post type and noticed that #categorychecklist is modified to #[custom-post-type]categorychecklist, e.g. #mycustompostcategorychecklist.

    You can also use the js to hide/show other objects on the page when a category is selected, e.g. the visual editor.

  4. Travis Smith

    This is great! However, I would love to be able to do it on pages via template selection under page attribute. I am not a JS person and only have played with it a couple times.

    Here’s my JS so far:


    jQuery(function($)
    {
    function my_check_categories()
    {
    $('#_my_metabox').hide();

    $('#page_template"]').each(function(i,e)
    {
    var id = $(this).attr('value');

    if (id == 'page-template.php' && $(this).is(':selected'))
    {
    $('#_my_metabox').show();
    }
    });
    }

    $('#page_template').live('click', my_check_categories);

    my_check_categories();
    });

  5. Travis Smith
  6. Markus

    Hi,

    try it but it didnĀ“t work for me…

    i create a .js File, Paste the above Code in it, change the id to my metabox id.

    i run the script with

    wp_register_script('check_js', (get_bloginfo('template_url').'/js/check.js'), false);
    wp_enqueue_script('check_js');

    but when i click on the category nothing happens. the metabox will not display…

    any ideas?

    best regards,
    Markus

  7. Andrew

    A nice little addition to this for theme developers (and I’m sure you can add more) is to add a “get Cat by Name” function, and echo the results into line 16.

    This way, your theme doesn’t rely on you to know the category #’s just to specify a NAME for the category.

    Add this to functions . php

    function get_category_id($cat_name){
    	$term = get_term_by('name', $cat_name, 'category');
    	return $term->term_id;
    }
    

    And finally, change line 16 of the JS to this:

    if ($.inArray(id, []) > -1 && $(this).is(':checked'))
    

    I am also sure that you could use this cat id function in a foreach loop to list a bunch of categories.

  8. Kostas

    I get the following error when adding the above code:

    uncaught referenceError: jquery is not defined

    Any idea??

  9. James

    Hi there. I’d like to get this working but this post demands a certain knoweldge i don’t have on where to put these things mentions in your video. Could you provide a bit more of a step by step guide?

  10. James

    well, have the css in place, and calling the js file, changed the id, changed the js meta box, but it won’t work.

    Not sure what i am missing, any tips?

  11. James

    update: i finally realized i needed to remove

    //

    from the js file, silly me :)

    All works now.

Leave a Reply