I wanted my urls for my products to display in the following way:
/products/product-category/child-product-category/product-name.

Or to be more specific:
- View my “Products” page set with the custom template at the url /products
- View each “Product Category” on a url of /products/product-category
- View my custom post type “Products” on a url of /products/product-category/product-name

But nothings ever easy. The trouble I was having was that both my product page and product post type wanted to use the same slug (/products) and therefore conflicted causing 404′s. Not only that but custom taxonomies by default do not show the category in the url, and finally although in my head it made sense as a user to see the url /products/product-category/product-name they were not in any kind of heirarchical structure within wordpress to order them in a url this way.

So after a lot of googling and after finding this really helpful article I finally managed to put together some code that fixed the problem.

add_action( 'init', 'register_custom_post_types' );
 
//Set up Product Post Type
function register_custom_post_types() {
	register_post_type('products', array(
		'label' => __('Products'),
		'singular_label' => __('Product'),
		'public' => true,
		'show_ui' => true,
		'capability_type' => 'post',
		'hierarchical' => true,
		'rewrite' => array( 'slug' => 'products/%productcats%' ),
		'publicly_queryable' => true,
		'query_var' => true,
		'has_archive' => true,
		'supports' => array('title','editor','thumbnail','excerpt'),
	));
 
        //Set up Product Categories
	register_taxonomy('productcats', 'products', array(
		'hierarchical' => true,
		'label' => 'Categories',
		'singular_label' => 'Category',
		'rewrite' => array( 'slug' => 'products' ),
	));
 
}
 
//Fix Permalinks
add_filter('post_link', 'product_permalink', 10, 3);
add_filter('post_type_link', 'product_permalink', 10, 3);
 
function product_permalink($permalink, $post_id, $leavename) {
	if (strpos($permalink, '%productcats%') === FALSE) return $permalink;
 
		// Posts
		$post = get_post($post_id);
		if (!$post) return $permalink;
 
		// Custom Taxonomy
		$terms = wp_get_object_terms($post->ID, 'productcats');
		if (!is_wp_error($terms) && !empty($terms) && is_object($terms[0])) $taxonomy_slug = $terms[0]->slug;
		else $taxonomy_slug = 'uncategorized';
 
	return str_replace('%productcats%', $taxonomy_slug, $permalink);
}
 
//Flush permalinks
flush_rewrite_rules( false );

For a step by step explanation of the permalink function please refer to the original article I found on google. You may find you need to go to settings/permalinks in your admin and save again for the changes to take effect. You will already need to have the custom permalink structure set to /%postname%. More information on setting up custom page templates, custom post types and custom taxonomies can be found on the wordpress codex.

I put the below code in functions.php and comment_form(); in my comments.php

The code below is my modified version. For defaults simply add or replace my code with http://codex.wordpress.org/Function_Reference/comment_form

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

add_filter( 'comment_form_defaults', 'my_comment_defaults');
 
function my_comment_defaults($defaults) {
	$req = get_option( 'require_name_email' );
	$aria_req = ( $req ? " aria-required='true'" : '' );
 
	$defaults = array(
		'fields'        	   => array(
		'author' => '<div><label for="author">' . __( 'Name' ) . ( $req ? '<span class="required">*</span>' : '' ) . '</label> ' . '<input id="author" name="author" placeholder="your name" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></div>',
		'email' => '<div><label for="email">' . __( 'Email' )  . ( $req ? '<span class="required">*</span>' : '' ) . '</label> ' . '<input id="email" name="email" placeholder="email@address.co.uk" type="email" value="' . esc_attr(  $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' /></div>'
                ),
		'comment_field' => '<div><label for="comment">' . _x( 'Comment', 'noun' ) . '</label><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"  placeholder="your comment"></textarea></div>',
 
		'must_log_in'          => '<p class="must-log-in">' .  sprintf( __( 'You must be <a href="%s">logged in</a> to post a comment.' ), wp_login_url( apply_filters( 'the_permalink', get_permalink( $post_id ) ) ) ) . '</p>',
 
		'logged_in_as'         => '<p class="logged-in-as">' . sprintf( __( 'Logged in as <a href="%1$s">%2$s</a>. <a href="%3$s" title="Log out of this account">Log out?</a>' ), admin_url( 'profile.php' ), $user_identity, wp_logout_url( apply_filters( 'the_permalink', get_permalink( $post_id ) ) ) ) . '</p>',
 
		'comment_notes_before' => '<fieldset>',
 
		'comment_notes_after'  => '</fieldset>',
 
		'id_form'              => 'commentform',
 
		'id_submit'            => 'submit',
 
		'title_reply'          => __( 'Leave a Comment' ),
 
		'title_reply_to'       => __( 'Leave a Reply %s' ),
 
		'cancel_reply_link'    => __( 'Cancel reply' ),
 
		'label_submit'         => __( 'Comment' ),
 
                );
 
    return $defaults;
}

You will notice I have made the following modifications

• Removed the website field
• Added type=”email” to the Email field (HTML5)
• Added placeholder text (HTML5)
• Removed the default text from the top and bottom of the form and replaced with <fieldset></fieldset>
• Moved the required * inside the label
• Changed the “Leave a Reply” title to “Leave a Comment”
• Changed the text of the submit button

When setting up custom post types and a custom permalink structure add the below code to the function used to create custom posts.

1

flush_rewrite_rules( false );

I just wanted to write a quick post to highlight the problem but an explanation of why this is needed can be found on the wordpress codex.

So how does it work…

Functions.php
Add this to the functions.php file in your theme. You only need to list the formats you wish to use.

1
2

// This theme uses post formats<br/>
add_theme_support( 'post-formats', array( 'aside', 'gallery', 'link','image', 'quote', 'status', 'video', 'audio', 'chat' ));

You will then see a list of radio buttons in your edit post right hand column.

Styling
Once a type is selected you can style using the following class added to your post on listing pages

and using the following class added to your tag on single pages.

Templates
Within your templates you can target posts by format using the following code

1
2
3

 if ( has_post_format( 'image' )) {
  echo 'this is an image format';
}

New Admin Bar
An admin bar has been added when logged in. Its a nice little touch for the not so experienced wordpress user. It makes the admin section and the front end appear more seamless by allowing you to click through to create a new post, manage your personal details, appearance, comments and updates whilst browsing the front end of your site. For multisite users it makes switching between sites quick and easy.

Internal Linking
Another new feature aimed at the less experienced wordpress user is the new internal linking feature. When a user clicks on the link icon in the WYSISYG editor a lightbox opens with additional functionality to select from a pre populated list of the most recently created posts or search for one. The user can then simply select the post to link to and add it to their content. Simple.

Post Formats
The ability to categorize posts in a new way has been added to this release. Post formats allow wordpress developers to group posts into the following formats:
aside, gallery, link, image, quote, status, video, audio and chat. Once categorized classes are added to the listing and single pages to allow unique styling. See my post on “How to use Post Formats in WordPress 3.1“  for more info.

Enhanced pagination in Admin Panel
Paging through lots of posts and categories has just become easier with the ability to type in the page you want within the pagination.

Custom Post Type Archives
Custom post types now have their own archive pages. They will now use archive-{posttype}.php rather than a page that is manually set up to list postypes on.

Advanced Queries
More ways to target posts using taxonomies and custom fields. See query_posts for more information.

The most notable of which was a talk by Chris Shiflett titled “Security-Centered Design – exploring the impact of human behaviour. Some of the key points from his talk are described below but his blog at http://shiftlett.org is well worth reading or adding to your rss feeds.

Changing User Blindness and Ambient Signifiers

Through a serious of flashing images and a short video clip of a card game, Chris demonstrated how easy it is to be unaware of changes going on in the background when your concentration is focused elsewhere. In the context of a website this can mean the difference between noticing a site redirecting somewhere else or a site changing from a non secure area to a secure area.

Chris suggested the use of “ambient signifiers” to help our users fight the blindness and to notice whats happening on a website in a subtle and reassuring way. Existing examples include…

• Firefox turns the favicon section of the browser blue on an ssl protected site.
• Yahoo allows users to select a recognisable image to display in their log in box.

Changing User Behaviour

Chris also discussed how important it is to encourage users to behave sensibly online and to be more cautious in giving away personal information.

An example of this is searching for friends on Facebook or Twitter. Both social networking sites allow users to input their email address and password in order to search for friends in their address books. Although this may be OK on reputable sites it encourages bad habits and possibly removes the worry from doing so on other sites.

We can help users by thinking of alternative solutions to the above, therefore removing the familiarity of providing personal data. After all our email accounts are often the gateway to a big chunk of our online accounts and personal data.

Another talk that stuck in my mind was a talk on Flex and Air by Mihai Corlan.

The first time I heard about Flex and Air was last year at FOWD. It interested me then but still seemed quite early days to really begin learning to much about. Mihai refreshed my interest and excitement in the clever things these technologies can do.

Flex is an open source framework for building flash applications

AIR allows developers to create rich internet applications that run on your desktop or outside the browser.

Although the connecting with PHP part went straight over my head the possibilities of this technology were really apparent. It also appeared reasonably easy for a developer to create an application in a short amount of time and within a familiar development environment (eg.Eclipse).

Its surprising how often these technologies are used and mistaken as a flash built site/application. You can see some cool examples of what Flex and Air can do at http://flex.org/showcase/

Conclusion

So as you can see although it was a PHP conference I still managed to get some really useful and interesting information from it. Would I go again next year? Well I certainly wouldn’t dismiss it straight away its surprising how much you can understand and learn from things not immediately related to your skill set.