The Essential Guide to WordPress 3.0 Custom Taxonomies
Cosmin Negoita
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:
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
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!
For Further Reading:
Did you enjoy this article and found it useful?
Get even more from us:
ezhil
Posted 454 days ago 37hello
iam using custom taxonomies in my site,so i did have seperate templates for displaying them.
i have created a taxonomy called people and a term called star and also respective template to star (taxonomy-people-star.php) every thing works fine http://sportsstatus.in/dev/people/star/ .
but when i query some other taxonomy like http://sportsstatus.in/dev/people/star/?sports=tennis to it the template structure changes to the archive format. how to over this.
i want the original template structure assigned for star(taxonomy-people-star.php) to work.
Cristian
Posted 491 days ago 36Hi, 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 :(
seeker
Posted 493 days ago 35This is the thing what I wanna to know.Thanks for sharing!
Toure
Posted 502 days ago 34How 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?
Fu
Posted 505 days ago 32thank you so much, you saved me lots of time :)
keep up the good work
Pam
Posted 505 days ago 31Is there anyway to get the custom taxonomy information (that shows in posts) to display in feeds as well?
Roy
Posted 507 days ago 30fifth 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????
Igor
Posted 511 days ago 29Do you know how to set up special order for the terms of custom taxonomy? Thank you!
Joan
Posted 511 days ago 28Thanks for stepping out the procedure so neatly, will bookmark for when I have done the upgrade to WP3. Very informative!
John
Posted 595 days ago 24I’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?
Saad Bassi
Posted 595 days ago 25Yeah. You can check out http://popcritics.com to get an idea
TomL
Posted 599 days ago 23Nice 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.
Wade
Posted 529 days ago 27I have the exact same questions. Anyone? Bueler?
(Nice tut, by the way.)
Dan
Posted 502 days ago 33Try refreshing your permalink settings
Arash
Posted 600 days ago 22Thank 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?
SEOP Inc.
Posted 601 days ago 21Really great tips. Thanks for sharing. These will help me improve my blogging.
Chris
Posted 602 days ago 20Great tutorial. Still a little beyond where I am in wordpress, but it was very informative.
Jordan Walker
Posted 602 days ago 19Informative article, thanks!
Gadget Guy
Posted 604 days ago 18Chris 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!
WebGuide4U
Posted 605 days ago 13I 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
Cairns Logo
Posted 605 days ago 12I guess you could use this instead of using the custom fields.
Evan Shajed
Posted 605 days ago 11Thanks for this acknowledgement. Just upgarded to wordpress 3.0. Will help me a lot to test these new features.
Nabeel Ahmed
Posted 605 days ago 10Its nice tutorial. Is there anyway we can ask for uploading of thumbnail via browse button.
Joe
Posted 605 days ago 9This line doesn’t seem right:
” alt=”Icon for Post #” />
What should it be?
graphicbeacon
Posted 604 days ago 14I 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.
graphicbeacon
Posted 604 days ago 15I 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.
graphicbeacon
Posted 604 days ago 16I 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
Posted 604 days ago 17Sorry but everything was closed, no tags are missing. It’s the Syntax Highlighter that breaks the highlighted code…
Milos Milikic
Posted 605 days ago 6WP 3.0 finally out :)
Nice tutorial. Thanks!
FL
Posted 605 days ago 8Hey you’re right! WP3.0 is out! yesssss!
Jami Gibbs
Posted 605 days ago 3What’s the difference between using a custom taxonomy and custom fields? Aren’t they both considered meta data?
Saad Bassi
Posted 605 days ago 4Jami, custom taxonomies are a lot easier to manage than custom fields.
Cosmin Negoita
Posted 605 days ago 7Saad 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
Posted 590 days ago 26Hi 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…..
mrvancouver@hotmail.com
Eko Setiawan
Posted 605 days ago 2Thanks for share, this very useful for me..thanks
.-= Eko Setiawan´s last blog ..A Simple Magazine Theme on 1stwebdesigner.com =-.
Mark Jaquith
Posted 605 days ago 1Hey, 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
Posted 605 days ago 5Hey 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.:)