Improving the UI for Hierarchical Taxonomies in WordPress
Monday, 20th December 2010Since being able to easy add new taxonomies to any post type in WordPress, I have had a little gripe about the UI…
Creating taxonomies can be a really useful way of categorising and navigating your content but what happens if I want to add many taxonomies to my post type?
You have the choice of specifying when a taxonomy is ‘hierarchical’ or not. If set to false then the UI is the admin will display in the same way as it does for tags; a text field which you can use to add terms. If set to true then the UI displays in the same way as categories; a box with a list of checkboxes for each term.
So what’s my issue?
My issue is all that space if you only have a couple of categories.
It’s not so much of an issue if you only have categories but if you add multiple hierarchical taxonomies it can make your edit screen really long for no reason.
…and the solution?
To solve this issue I would suggest using the css property max-height to limit the height of the hierarchical taxonomy box. This way if you only have several terms the box will collapse to fit them. If you have many terms the box will become scrollable at a certain maximum height.
Look at all that space you can save…
One problem though is that Internet Explorer 6 does not support the max-height property and will display the box long enough to fit the content – it won’t restrain the height to 200 pixels and make it scrollable.
If this is an issue for you you could use a css hack to get IE6 to support max-height.
How do I fix this?
You’ll need to update the WordPress admin stylesheet:
/wp-admin/css/wp-admin.dev.css
(You’ll also need to patch the minified version /wp-admin/css/wp-admin.css)
In the following two instance I have changed “height: 200px;” to “max-height: 200px;”.
2025 2026 2027 2028 2029 2030 2031 2032 2033 2034 2035 2036 | .wp-tab-panel, .categorydiv div.tabs-panel, .customlinkdiv div.tabs-panel, .posttypediv div.tabs-panel, .taxonomydiv div.tabs-panel, #linkcategorydiv div.tabs-panel { max-height: 200px; overflow: auto; padding: 0.5em 0.9em; border-style: solid; border-width: 1px; } |
2470 2471 2472 2473 2474 2475 2476 2477 2478 2479 2480 | .categorydiv div.tabs-panel, .customlinkdiv div.tabs-panel, .posttypediv div.tabs-panel, .taxonomydiv div.tabs-panel, #linkcategorydiv div.tabs-panel { max-height: 200px; overflow: auto; padding: 0.5em 0.9em; border-style: solid; border-width: 1px; } |
So what do you think?
Would you like to see this change make it’s way into WordPress core? Let me know what you think by voting below or leaving a comment.
I have also added a trac ticket so if you want this to be included in WordPress core please support it there too.
Loading ...
December 20th, 2010 at 10:37 am
Yes! Yes! Yes! I think that this is a wonderful idea. Have you thought about submitting a patch to core?
December 20th, 2010 at 2:04 pm
Yep, am going to. Will hopefully find time to write it up this evening.
Do you think we should ignore IE6?
December 20th, 2010 at 9:32 pm
WordPress Trac ticket here.
December 21st, 2010 at 12:01 am
Amazing! Those small things are the ones that contributes for a great UI.
I think it could be available on 3.1 as it’s just 2 lines to change.
December 21st, 2010 at 11:37 am
Awesome! Don’t know what to say about IE6 though. Everyone has a different opinion when it comes to this topic… it does make for poor UI in this browser IMO.
December 21st, 2010 at 1:03 pm
Yes absolutely ignore IE6 it is time for that browser to fade away!
December 23rd, 2010 at 10:57 am
Why need let IE use height and use max-height for browsers that support it. WP loads a seperate stylesheet for IE doesn’t it? .. why not simply let IE keep the height definition.
December 23rd, 2010 at 12:45 pm
Yep, good point, that would make sense for IE.
January 24th, 2011 at 12:26 pm
Little things like this make a great product. Never though of it before.
I suggest IE56 is ignored too – I don’t think any WP user uses it anyways :)
August 21st, 2011 at 8:39 pm
According to the trac ticket it looks like this may make it into WordPress 3.3 :)
February 20th, 2012 at 9:27 am
In the meantime, I’ve packaged this up as a plugin so you can benefit from this functionality:
http://wordpress.org/extend/plugins/compact-taxonomy-checkboxes/
June 17th, 2012 at 11:30 am
Hi Ben, this is an awesome fix. It helps a great deal. Sadly, the upgrade to 3.4 broke the fix. I cannot seem to figure it out, but it would seem they move things around. ugh.
james-
June 17th, 2012 at 8:48 pm
@james The same fix is true in terms of changing “height: 200px;” to “max-height: 200px;” but it should be around line 3362.
June 17th, 2012 at 10:47 pm
@Ben, I tried that prior to my post here. For me, it had not effect.
June 17th, 2012 at 11:50 pm
Hmm, it works for me.
Did you definitely also apply it to the “/wp-admin/css/wp-admin.css” file and clear your browser cache?
September 21st, 2012 at 1:49 pm
Brilliant.