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
<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>
This looks awesome! I must come back to this. Do you think a little JQuery could make those boxes slide open too? ; )
Dan
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?
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)
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.
@frances, thanks for the tip!
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();
});
Got it working: http://jsfiddle.net/SAbxU/14/
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
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.
I get the following error when adding the above code:
uncaught referenceError: jquery is not defined
Any idea??
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?
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?
update: i finally realized i needed to remove
//
from the js file, silly me 🙂
All works now.
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
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!
Never mind, I’ve found the solution. Thanks!!!
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!