The Essential Guide to WordPress 3.0 Custom Taxonomies

In general, taxonomies are used to arrange, classify and group things. By default, Taxonomies in WordPress are tags and categories that WordPress is using for the posts.  Apart from these two, WordPress makes it possible for theme developers to create their own taxonomies which are created within the functions.php theme file. This is what we are going to cover today. We will learn how to work with Custom WordPress taxonomies.

Recently, I’ve started working on my portfolio WordPress theme, and I needed to define different information for each project/template, like price, colors, style, etc. For this thing, I needed to create three more taxonomies which are looking like this:

WordPress Custom Taxonomies Example

Creating a new taxonomy

This is as simple as it is to look at the picture above. All you have to do is to copy the code below, in your functions.php. If your theme doesn’t have one, which I don’t think it hasn’t already one, just create the file yourself. Now, this is the code you have to write for each taxonomy you are creating:


<?php

register_taxonomy('test', 'post', array(
'hierarchical' => false,  'label' => 'test',
'query_var' => true, 'rewrite' => true));

?>

Just replace “test” with the name of the taxonomy you wish to create. That’s how you create custom taxonomies. The’ll just appear in the Dashboard below the Post Tags.

Using the new taxonomies

We have created them, but as well as tags and categories, you need some code if you want to output them in your article. That’s a little code snippet that goes into your WordPress loop, just like the post tags and categories:


<?php echo get_the_term_list($post->ID, 'people', 'People: ', ', ', ''); ?>

See it yourself

Below are some examples of what we were talking about in this tutorial:

  • PopCritics.com is using custom taxonomies to output different details about the movies. See the Genre(s), Actor(s), etc…
  • TypeChart.com is another great example of WordPress site that is making good use of taxonomies for finding font styling. You can see that in the sidebar.
  • Soh Tanaka‘s portfolio is also using taxonomies to output details on projects. Observe the Client, Date, URL, Tasks, etc…

I hope you have understood what taxonomies are. I’m sure you have heard about them before, but never wondered what they are, but what about using them for creating a nice t-shirt store?

Using Custom Taxonomies to create a T-shirt store

tshirt store photo

Now that you have learned how to use custom taxonomies, we will use them for creating a T-shirt store. This won’t be a fully functional one, we will just build up the part that is using custom taxonomies.

1. Preparations

First of all we need a theme. We will use the new WordPress 3.0 default theme, called Twenty Ten. In order to get this theme and have it properly working, you need to download WordPredd 3.0 RC2. To get this version, scroll down to the bottom of the page, and the last one should be WP 3.0 RC2. Do not be worried working with WP 3.0, it has the same template tags.

Next, you will need a local server, so the best way to create it, is using WAMP, or just build up your own environment following this previous tutorial on 1stWebDesigner.

Now that you have your local server up and running, just install WordPress.

2. Editing the Twenty Ten theme

Now we need to create our custom taxonomies. First of all, think about what custom taxonomies you will need. For a T-shirt store we need to provide:

  • size details
  • price
  • brand

So, just open up the Twenty Ten functions.php file and create those custom taxonomies. I suggest to write the code at the end of the file for avoiding to break the default functions that the theme has. You can see the code that you will need and as It is, without any PHP tags:


// Custom taxonomy for Size
register_taxonomy('Size', 'post',  array(
'hierarchical' => false, 'label' => 'Size',
'query_var' =>  true, 'rewrite' => true));

// Custom taxonomy for Price
register_taxonomy('Price', 'post',  array(
'hierarchical' => false, 'label' => 'Price',
'query_var'  => true, 'rewrite' => true));

// Custom taxonomy for Brand
register_taxonomy('Brand', 'post',  array(
'hierarchical' => false, 'label' => 'Brand',
'query_var'  => true, 'rewrite' => true));

After creating the custom taxonomies, we need to modify the loop too. So this will be a little difficult, because you need to take care to not break any of the theme’s code. Don’t worry, I’ll guide you through this.

Modifying the loop. Open up the index.php file from the 2010 theme. After you have opened it, you will see a tag that is calling the loop.php file:


<?php
 /* Run the loop to output the posts.
 * If you want to  overload this in a child theme then include a file
 * called  loop-index.php and that will be used instead.
 */
 get_template_part( 'loop', 'index' );
 ?>

We will need to completely delete this, and create a  our own loop. So, instead loop tag, copy and paste this following code:


<?php if (have_posts()) : while (have_posts()) : the_post();  ?>
<div id="post-<?<span class=">
<pre><?php the_ID(); ?>" ></pre>
</div>
 <h1><a href="<?php the_permalink(); ?>"></a>
<div>
 <!--Insert custom field and custom taxonomies code here-->
<pre><?php wp_link_pages( array( 'before' =>  '</pre>
<div>' . __( 'Pages:', 'twentyten' ), 'after' =>  '</div>
' ) ); ?>
 </div><!-- .entry-content  -->
</div>
<pre><?php endwhile; else: ?></pre>
<div id="post-<?<span class=">
<pre><?php the_ID(); ?>" ></pre>
</div>
 <h1  class="entry-title">Nothing here...</h1>
<div  class="entry-content">
Sorry, no T-shirts avaiable for  sale. Try coming back later.
 </div><!--  .entry-content -->
</div>
<?php endif; ?>

This is the loop that we will use. The ID and class are some theme specific styles. You have to notice that I have removed the meta data. Now, we will need to add the codes that will retrieve our custom taxonomies and we will need to make use of custom fields too, to retrieve t-shirt thumbnail. Add them exactly where you see the HTML comment in the above code. Now, here’s the code that we need:


<img src="ID, 'post-icon', true);  ?>" alt="Icon for Post #"  />
<ul>
<li><?php echo get_the_term_list($post->ID,  'Size', 'Size: ', ', ', ''); ?></li>
<li><?php echo  get_the_term_list($post->ID, 'Price', 'Price: ', ', ', '');  ?></li>
<li><?php echo get_the_term_list($post->ID,  'Brand', 'Brand: ', ', ', ''); ?></li>
</ul>

<?php the_content(); ?>

Notice that the custom field name is “thumb”. For using this custom field you need to create a new one with the name thumb, and the value of it is the link to your thumb. Now that we have everything set, what about trying to publish a sample post. Take a look at mine:

Conclusion

So, you have learned how to use custom taxonomies, and you have created a little T-shirt store. Well, not a fully functional one, but it’s a good start :)

If you have any questions regarding this tutorial please do not hesitate to ask via comments. I’ll try to solve all your problems. Thank you!

Cosmin Negoita

I'm a young web designer & developer from Romania who fell in love with creativity and Adobe. Follow me at @cssfactory

15 Smart Tools To Help You Build Your Freelance Business

Discover the awesome tools we use in making our clients comfortable and happy in learning new things every day.

Download Now

Comments

  1. paul says

    I want to set up a structure like this:

    Zip Code —–> Supplier ——-> date/comment
    ——–> date/comment
    ——–> date comment
    Supplier ——-> date/comment
    ——–> date/comment
    ——–> date comment
    zip code ——> supplier —–> date/comment
    —–> date coment

    so it is many zip codes – many suppliers within zip code – many comments within suppliers by date

    Searchable by zip code

    I have been told I can use a custom taxonomy for zip code
    can I group suppliers within zip code, than comments with supplier using this method (I’m a bit confused/daunted but I don’t want to start PHPing/SQLing as I’m on a deadline)
    Thanks

  2. Tamas says

    Thank you so much. Beautifully explained, this is exactly what solved my issue. I wish you all the best:)

  3. mark shirley says

    Great article is there a tutorial similar that would explain how to do this with twenty eleven, as the way the loop is set up is completely different. Thanks Mark

  4. Ryan says

    Thanks for this. I was about to hack my way through this and would have wound up with something really ugly, and much harder.

  5. says

    It’s great post and I useful from some new info about custom taxonomies But I search about how can I display the post by taxonomy term as like display post by category .. have anyone info or tutorial about this ?

    thank you

  6. Fred says

    Hey Cosmin Negoita it is great to see your post on wordpress, i was just planning to create a T-shirt store now i can use this script well..

  7. Stefan says

    hej. nice tutorial, but i dont understand the last step.
    where is the exact position and in wich file i have to place the last code snippet?

    thanks in advance

  8. Ma'moun Diraneyya says

    Hi,

    Thanks for the tutorial. It is helpful.

    Now I need additional two things for my special case. Using a hierarchal custom taxonomy associated with a custom post type, I need:

    (1) To change the admin meta-box to a drop-down menu to make sure the post has only one term associated. The drop-down menu should show just the latest children terms, so let us say, for example, I have those terms:
    Zone X
    –> Package X (Zone X’s child)
    —-> District X (District X’s child)
    Zone Y
    –> Package Y (Zone Y’s child)
    —-> District Y (District Y’s child)
    I want the drop-down to show only the latest children: District X and District Y.

    (2) To automatically select all parents of a selected child term when saving the post. So, let us say the user chose District Y in my previous example, then both Package Y and Zone Y should be selected as well, behind the scenes.

    Could you help me with that please, or point me out to any helpful reference?
    Thanks in advanced,

  9. Bjorn johansen says

    I am using Twenty ten as a base for mye theme. Is there any way to change the taxonemy already included. I am thinking like instead of showing the word
    post in all places in the blog, could you replace post with blogarticle instead.
    So the theme would show blogarticle by xxxx instead of post by xxx

  10. Tom says

    Not really sure that custom taxonomies is what you want to be using for things like Price etc. You’re better off creating a custom post type for Product and then setting up meta for that. Unless you have a very fixed list of prices (eg: every item is either $10, $35 or $100).

    Take a look at the WordPress Codex entry, that covers this topic exactly: http://codex.wordpress.org/Post_Types#Custom_Types

    Or this awesome tutorial that actually does exactly what you’re talking about:
    http://net.tutsplus.com/tutorials/wordpress/rock-solid-wordpress-3-0-themes-using-custom-post-types/

  11. ezhil says

    hello
    iam using custom taxonomies in my site,so i did have seperate templates for displaying them.

    i want the original template structure assigned for star(taxonomy-people-star.php) to work.

  12. says

    Hi, nice tutorial but I am having a problem. When i use permalinks the custom taxonomies links aren’t working. I refreshed the permalinks but is not working, please help me :(

  13. Toure says

    How could I use custom taxonomy (for a term Adresse) within the google map api address area to automatically out put a map based on an even address?

  14. Pam says

    Is there anyway to get the custom taxonomy information (that shows in posts) to display in feeds as well?

  15. Roy says

    fifth piece of code…
    lines 2-5 and 14-16:

    02 <div id="post-<?<span class=">
    03 <pre><?php the_ID(); ?>" ></pre>
    04 </div>

    there is a syntax error between line 1 and 2;
    from line 1: “post-<?
    to line 2: ;?>”>

    what are you trying to do here????

  16. says

    Thanks for stepping out the procedure so neatly, will bookmark for when I have done the upgrade to WP3. Very informative!

  17. John says

    I’m trying to create a discography which will have the albums with a short description on the main page. Then when the user clicks on the album cover, it leads them to that album’s page with all the info in a table with “song title”, “lyrics”, “play icon” which will be a link to iTunes, “price”, and a “buy” button which will also take them to iTunes. I want the lyrics links to maybe pop up in a small window. Would using the taxonomy method be good for this purpose?

  18. TomL says

    Nice tutorial.

    However, if I was to click on “Reebok” (in your example) – how do I create a page that lists all the “Reebok” tagged custom posts?

    I’ve tried various custom taxonomy tutorials, but none go this extra step to show the taxonomy archive page.

    Thanks again for your tutorial, it is very helpful.

  19. Arash says

    Thank you for sharing this tutorial. I just don’t fully get your example.

    What if I want to select a size, brand and a price range?

  20. Mary says

    Chris Coyer covered this in his “Digging into WordPress” e-book. Very nice to see it in WP 3.0. Will be very helpful for many people. A very good tutorial, congrats!

  21. Dan says

    I prefer for custom fields rather than sighted in this tut. Well its a nice tut which will clearly helps you out in adding taxomies.
    Wordpress 3.0 has lots features and will be working on to check out as many features as i can

  22. Nabeel Ahmed says

    Its nice tutorial. Is there anyway we can ask for uploading of thumbnail via browse button.

    • Jerop says

      I think there’s an issue with the whole line.
      ” alt=”Icon for Post #” />

      Its meant to be like this:

      <img src="ID,’post-icon’,true); ?>” alt=”Icon for Post ” />

      he didn’t insert the opening php tags and the get_post_meta function fully for the ‘src’ attribute of the image as that was meant to be grabbed that from the ‘post-icon’ custom field.

    • Jerop says

      I think there’s an issue with the whole line.
      <img src="ID,’post-icon’,true); ?>” alt=”Icon for Post #” />

      Its meant to be like this:

      <img src="<?php get_post_meta($post->ID,’post-icon’,true); ?>” alt=”Icon for Post <?php the_title(); ?>” />

      I think its a bug that appears when the html is not encoded. it makes it seem as if he didn’t insert the opening php tags and the get_post_meta function fully for the ’src’ attribute of the image as that was meant to be grabbed that from the ‘post-icon’ custom field. I replaced the hash(#) with the_title(); function within php tags, which I think is more informative than the hash

      PS- Anyone reading this make sure you encode all html code at http://bit.ly/9wVgEb before pasting into some comment forms or else you will get problems.

      • Jerop says

        I think the code to register the taxonomies can be easily displayed as this:

        $custom_taxonomies = array('Size','Price','Brand');

        foreach($custom_taxonomies as $taxonomy) {

        register_taxonomy($taxonomy, 'post', array(
        'hierarchical' => false, 'label' => 'Size',
        'query_var' => true, 'rewrite' => true));

        }

        I think its much more easier and flexible as it saves time repeating the register_taxonomy function over again for the $custom_taxonomy array can easily hold multiple taxonomies. Obviously this has to be within php tags in the functions.php file. Peace.

      • Cosmin Negoita says

        Sorry but everything was closed, no tags are missing. It’s the Syntax Highlighter that breaks the highlighted code…

  23. Jami Gibbs says

    What’s the difference between using a custom taxonomy and custom fields? Aren’t they both considered meta data?

    • Saad Bassi says

      Jami, custom taxonomies are a lot easier to manage than custom fields.

    • Cosmin Negoita says

      Saad is right. I find custom fields more interesting because you can do a lot of things using them, but custom taxonomies are more useful for categorizing posts.

      • Randy Dokuchie says

        Hi Cosmin

        I am a internet startup guy and sometimes I need people to help me with some coding and stuff, I am the thinker with no coding experience , I buy the templates and modify them, I need to modify a job theme I have can you take a look at it and see if you can help me…..

  24. says

    Hey, thanks for the post. Could you use the real WordPress logo? Versions are available here. We’re trying to stop the spread of the ugly fake version. :-)

    • Saad Bassi says

      Hey Mark, sorry for the wrong logo. I know about that. Will try to keep a strict eye on it from now on.:) Thanks for stopping by.:)