Please take a look at these brilliant graphic art prints by Susie Huson.

View more at www.susiehuson.co.uk

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.

WP e-Commerce 3.7.6 now includes better support for paging on category pages.

The latest release contains a suite of functions (my little contribution) to help you customise how pagination is displayed in your WPSC templates.

You can find an in-depth look at these functions and how to use them in the WP e-Commerce Documentation.

Below are some quick examples of what you can do…

Basic paging

Some fairly standard paging with linked page numbers, previous and next links, and arrow links to take to to the first and last pages. You can customise the text that is used for previous, next, first and last links.

<?php echo wpsc_first_products_link( '&laquo;', true ); ?>
<?php echo wpsc_previous_products_link( 'previous', true ); ?>
<?php echo wpsc_pagination(); ?>
<?php echo wpsc_next_products_link( 'next', true ); ?>
<?php echo wpsc_last_products_link( '&raquo;', true ); ?>

Limit the amount of pages

You can limit the amount of page links to show at one time. The above example shows what happens if there are 10 pages of products, but only showing 7 page links at a time. Notice also the text describing which page you’re on and that the previous and first links are greyed out when not applicable – you can also choose to hide them instead of showing inactive links.

Page <?php wpsc_showing_products_page(); ?>:
<?php echo wpsc_first_products_link( '&laquo;', true ); ?>
<?php echo wpsc_previous_products_link( 'previous', true ); ?>
<?php echo wpsc_pagination( 7 ); ?>
<?php echo wpsc_next_products_link( 'next', true ); ?>
<?php echo wpsc_last_products_link( '&raquo;', true ); ?>

Total number of products

There is a function to easily display the total number of products. You can detect if the category has multiple pages and if it doesn’t display something like this instead.

<?php if ( wpsc_has_pages() ) : ?>
   <!-- Insert pagination for multiple pages -->
<?php else : ?>
   Showing <?php echo wpsc_total_product_count(); ?> products
<?php endif; ?>

Number of products showing

You can display an indication as to which products are showing depending on which page you’re viewing.

Showing <?php echo wpsc_showing_products(); ?> of <?php echo wpsc_total_product_count(); ?> products:

What next?

The new WP e-Commerce default themes contain examples of pagination so hop into your templates and create some nice pagination…

The latest version of Instinct’s WordPress e-commerce plugin uses the WordPress body_class filter to add classes to the HTML body tag.

WP e-Commerce 3.7.5 adds the following styles to the body tag:

• wpsc
• wpsc-home
• wpsc-single-product
• wpsc-single-product-id
• wpsc-category
• wpsc-category-id
• wpsc-group-id
• wpsc-shopping-cart
• wpsc-transaction-details
• wpsc-user-account

These extra classes will give you more flexibility when designing themes for WP e-Commerce.

Where are these classes included?

wpsc
Included in every WP e-Commerce page.

wpsc-home
Included on the main WP e-Commerce shop page.

wpsc-single-product & wpsc-single-product-id
Included on single product pages. The wpsc-single-product-id class allows you to set css rules for a single product based on the product id.

wpsc-category & wpsc-category-id
Included on category and individual product pages. The wpsc-category-id class allows you to set css rules for different categories. As these classes are also applied to single product pages, if a product appears in more than one category you could style a product page differently depending on which category you click through from.

wpsc-group-id
Included on category and single product pages. The group id is set based on the group in which the current category resides.

wpsc-shopping-cart
Including on the shop cart checkout page.

wpsc-transaction-details
Including on the transaction details page displayed after a successful purchase.

wpsc-user-account
Including on the WP e-Commerce user account pages.

Ideas how to use these classes in your WP e-Commerce theme…

1. Style a special product differently using wpsc-single-product-id.
2. Style products in a sale category to display differently using wpsc-category-id.
3. Create a group for brands with brands as sub-categories and differentiate this view from your standard product categories using wpsc-group-id.