17

How To Show/Hide WordPress Meta Boxes By Selecting Categories

This quick how to will show you how to show and/or hide a WordPress meta box by selecting a specific taxonomy/category. This solution uses a little CSS and Javascript to accomplish the goal, and it also works when editing a post or creating a new one.

The Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<script type="text/javascript">
//<![CDATA[
 
    jQuery(function($)
    {
        function my_check_categories()
        {
            $('#_custom_meta_metabox').hide();
 
            $('#categorychecklist input[type="checkbox"]').each(function(i,e)
            {
                var id = $(this).attr('id').match(/-([0-9]*)$/i);
 
                id = (id && id[1]) ? parseInt(id[1]) : null ;
 
                if ($.inArray(id, [4,3]) > -1 && $(this).is(':checked'))
                {
                    $('#_custom_meta_metabox').show();
                }
            });
        }
 
        $('#categorychecklist input[type="checkbox"]').live('click', my_check_categories);
 
        my_check_categories();
    });
 
//]]>
</script>

Posted in | Tagged , , , , | 17 Responses

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

  1. Dan
    Dan April 19, 2011 at 3:12 pm |

    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
    Jonathan June 6, 2011 at 2:53 pm |

    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. Dimas
    Dimas June 6, 2011 at 3:05 pm |

    Hi Jonathan, I did not go into much detail but the example above is specific to a meta box with an id of “_custom_meta” and category ids of [4,3] (see line #16 above)

  4. frances
    frances June 20, 2011 at 7:21 am |

    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.

  5. Dimas
    Dimas June 20, 2011 at 7:36 am |

    @frances, thanks for the tip!

  6. Travis Smith
    Travis Smith July 23, 2011 at 3:47 pm |

    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();
    });

  7. Travis Smith
    Travis Smith July 23, 2011 at 10:25 pm |

    Got it working: http://jsfiddle.net/SAbxU/14/

  8. Markus
    Markus September 26, 2011 at 2:44 am |

    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

  9. Andrew
    Andrew January 20, 2012 at 6:55 am |

    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.

  10. Kostas
    Kostas April 24, 2012 at 7:34 am |

    I get the following error when adding the above code:

    uncaught referenceError: jquery is not defined

    Any idea??

  11. James
    James December 27, 2012 at 9:16 am |

    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?

  12. James
    James December 27, 2012 at 11:30 am |

    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?

  13. James
    James December 27, 2012 at 5:15 pm |

    update: i finally realized i needed to remove

    //

    from the js file, silly me 🙂

    All works now.

  14. Russell
    Russell June 12, 2014 at 4:49 am |

    Quick Q

    How do I do this if my text editor won’t create an id starting with an ‘_’

    #_custom_meta_metabox is not being compiled in the css as an ID

    Cheers

  15. lara
    lara September 25, 2014 at 7:28 am |

    Excuse me, where do I put the javascript? in which file? Sorry but I’m not a developer and I’m willing to learn. Thanks!

  16. lara
    lara September 25, 2014 at 7:42 am |

    Never mind, I’ve found the solution. Thanks!!!

  17. Matthew Pollard
    Matthew Pollard December 23, 2014 at 4:13 pm |

    Does anyone know of a tutorial that uses a more step to step method? I have followed this tutorial but it doesn’t seem to work. I must have missed something out. Any help would be greatly appreciated!