Improving the UI for Hierarchical Taxonomies in WordPress

Monday, 20th December 2010

Looks like this will be in WordPress 3.5 – hurray!

Since 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.

Would you like hierarchy taxonomy admin box to collapse if you only have a few checkboxes?

View Results

Loading ... Loading ...

16 Responses to “Improving the UI for Hierarchical Taxonomies in WordPress”

  1. Michael Fields Says:

    Yes! Yes! Yes! I think that this is a wonderful idea. Have you thought about submitting a patch to core?

  2. Ben Says:

    Yep, am going to. Will hopefully find time to write it up this evening.
    Do you think we should ignore IE6?

  3. Ben Says:

    WordPress Trac ticket here.

  4. Victor Teixeira Says:

    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.

  5. Michael Fields Says:

    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.

  6. Ash Says:

    Yes absolutely ignore IE6 it is time for that browser to fade away!

  7. t31os Says:

    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.

  8. Ben Says:

    Yep, good point, that would make sense for IE.

  9. Banago Says:

    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 :)

  10. Ben Says:

    According to the trac ticket it looks like this may make it into WordPress 3.3 :)

  11. Ben Says:

    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/

  12. james Says:

    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-

  13. Ben Says:

    @james The same fix is true in terms of changing “height: 200px;” to “max-height: 200px;” but it should be around line 3362.

  14. james Says:

    @Ben, I tried that prior to my post here. For me, it had not effect.

  15. Ben Says:

    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?

  16. Luke Says:

    Brilliant.

Leave a Reply