Improving the UI for Hierarchical Taxonomies in WordPress

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 ...
music downloads for free without registration
 

Ben Huson

 

16 thoughts on “Improving the UI for Hierarchical Taxonomies in WordPress

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

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

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

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>