Tutorial: WordPress 3.0 Custom Post Types

With the recent release of WordPress 3.0, I thought it would be good to show off one on its best features, custom post types. This feature will come into its own especially when using WordPress as a CMS, it allows you to assign a post area for different bits of your site.

Tutorial: WordPress 3.0 Custom Post Types

For this tutorial, I’m modifying the default 3.0 theme, TwentyTen  and will be adding an events custom post type, substitute the name if you want to have custom post called something different.

Let’s get first things first, you must download or upgrade to WordPress 3.0, without this it is very hard to actually make this work without doing a lot of hard coding and I will not be showing you how to do that.

Firstly add the following code to the functions.php file in the root of the theme, this will then display another tab in your WordPress dashboard.

add_action(‘init’, ‘events’);

function events() {

$args = array(

‘label’ => __(‘Events’),

‘singular_label’ => __(‘Events’),

‘public’ => true,

‘show_ui’ => true,

‘capability_type’ => ‘post’,

‘hierarchical’ => false,

‘rewrite’ => true,

‘supports’ => array(‘title’, ‘editor’, ‘thumbnail’, ‘custom-fields’)

);

register_post_type( ‘events’ , $args );

}

custom post1 Tutorial: Wordpress 3.0 Custom Post Types

Now to display the posts from that area you need to set up a page template, this is very easy to do. Open up the page.php and replace all the code with:

<?php

/*Template Name: eventsPage*/

?>

<?php get_header(); ?>

<div id=”container”>

<div id=”content” role=”main”>

<div id=”post-<?php the_ID(); ?>” <?php post_class(); ?>

<?php $recent = new WP_Query(‘post_type=events&posts_per_page=10′); while($recent->have_posts()) : $recent->the_post();?>

<?php the_title( ‘<h2><a href=”‘ . get_permalink() . ‘” title=”‘ . the_title_attribute( ‘echo=0′ ) . ‘” rel=”bookmark”>’, ‘</a></h2>’ ); ?>

<div class=”entry-content”>

<?php the_content(); ?>

<?php wp_link_pages( array( ‘before’ => ‘<div>’ . __( ‘Pages:’, ‘twentyten’ ), ‘after’ => ‘</div>’ ) ); ?>

<?php edit_post_link( __( ‘Edit’, ‘twentyten’ ), ‘<span class=”edit-link”>’, ‘</span>’ ); ?>

</div><!– .entry-content –>

<?php comments_template( ”, true ); ?>

<?php endwhile; ?>

</div><!– #content –>

</div><!– #container –>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Then re-save as events-page.php. Now we need to add a new page titled ‘events’ to display these custom posts, after selecting add new page, make sure you select eventsPage from the templates, now all your events will be posted on this page (once we have entered them).

template 1 Tutorial: Wordpress 3.0 Custom Post Types

Now add a new event, call it anything you like and publish it. Go to the website and you will see that it is now visible on the events page and not the news page (news page is just a standard page I quickly made).

template 1 Tutorial: Wordpress 3.0 Custom Post Types

So that works for anything, call it custom post anything you like and it will display your posts from that section, and it won’t conflict with the standard “posts” category.

custom post2 Tutorial: Wordpress 3.0 Custom Post TypesNow that’s about it for the basic’s, however, let’s say you wanted to order the events by date, your thinking this could be hard, well to be honest it isn’t, all you need to do is change a bit of code here and there and it will work.

First of all go into the eventsPage template that you set up and remove the following code:

<?php $recent = new WP_Query(‘post_type=events&posts_per_page=10′); while($recent->have_posts()) : $recent->the_post();?>

And replace it with this:

<?php $recent = new WP_Query(‘post_type=events&posts_per_page=10&meta_key=Date’ . ‘&orderby=meta_value&order=ASC’); while($recent->have_posts()) : $recent->the_post();?>

Now by simply adding the date in m/d/Y format in the custom field area of the events posts, the events will be displayed in chronological order:

event post example Tutorial: Wordpress 3.0 Custom Post Types

event post example1 Tutorial: Wordpress 3.0 Custom Post Types

event post example2 Tutorial: Wordpress 3.0 Custom Post Types

Watch this space for some more WordPress tutorials from me, here at Design Juices.

If you want it, Here is the link to the file, you will still have to add the posts and pages but the rest is all working.

Thanks for reading our latest tutorial, Was this useful for you?

Feel free to leave your comments and questions below.

Guaranteed HP0-D07 prep materials including 642-436 practice questions and 640-816 answers prepared by our certified experts to help you prepare for exam.

postcards matte printing online full color postcards.

  • Pingback: Jared Thompson

  • Constantin Ionescu

    Good tutorial but it misses some things like:
    1. Add a calendar as a custom meta box somewhere in the sidebar
    2. Create a way to filter the results by date

  • Pingback: Slobodan Zivulovic

  • Pingback: Jared Thompson

  • Pingback: Jared Thompson

  • sheclimber

    any suggestion if adding the code to function.php did not result in a new tab being added to the dashboard? not that i know what i'm doing, i just added the code at the end of the file.

  • Constantin Ionescu

    Try adding the code before ” ?> “

  • sheclimber

    i am a complete php nube, and there are a lot of “?>”s in that file. could you be a little more specific?

  • Pingback: Artatm

  • Pingback: Luke Hodsdon

  • Pingback: Extra! Extra! Fresh WordPress 3.0 Tutorials | Template Monster Blog

  • Nick Metcalf

    Should need to put any of those in, scroll to the bottom of the functions.php page and add:

    add_action(‘init’, ‘events’);

    function events() {
    $args = array(
    ‘label’ => __(‘Events’),
    ‘singular_label’ => __(‘Events’),
    ‘public’ => true,
    ‘show_ui’ => true,
    ‘capability_type’ => ‘post’,
    ‘hierarchical’ => false,
    ‘rewrite’ => true,
    ‘supports’ => array(‘title’, ‘editor’, ‘thumbnail’, ‘custom-fields’)
    );

    register_post_type( ‘events’ , $args );
    }

    thats all that is needed, but make sure you back up the project before making changes :)

  • Nick Metcalf

    Should need to put any of those in, scroll to the bottom of the functions.php page and add:

    add_action(‘init’, ‘events’);

    function events() {
    $args = array(
    ‘label’ => __(‘Events’),
    ‘singular_label’ => __(‘Events’),
    ‘public’ => true,
    ‘show_ui’ => true,
    ‘capability_type’ => ‘post’,
    ‘hierarchical’ => false,
    ‘rewrite’ => true,
    ‘supports’ => array(‘title’, ‘editor’, ‘thumbnail’, ‘custom-fields’)
    );

    register_post_type( ‘events’ , $args );
    }

    thats all that is needed, but make sure you back up the project before making changes :)

  • Nick Metcalf

    Should need to put any of those in, scroll to the bottom of the functions.php page and add:

    add_action(‘init’, ‘events’);

    function events() {
    $args = array(
    ‘label’ => __(‘Events’),
    ‘singular_label’ => __(‘Events’),
    ‘public’ => true,
    ‘show_ui’ => true,
    ‘capability_type’ => ‘post’,
    ‘hierarchical’ => false,
    ‘rewrite’ => true,
    ‘supports’ => array(‘title’, ‘editor’, ‘thumbnail’, ‘custom-fields’)
    );

    register_post_type( ‘events’ , $args );
    }

    thats all that is needed, but make sure you back up the project before making changes :)

  • Nick Metcalf

    Should need to put any of those in, scroll to the bottom of the functions.php page and add:

    add_action(‘init’, ‘events’);

    function events() {
    $args = array(
    ‘label’ => __(‘Events’),
    ‘singular_label’ => __(‘Events’),
    ‘public’ => true,
    ‘show_ui’ => true,
    ‘capability_type’ => ‘post’,
    ‘hierarchical’ => false,
    ‘rewrite’ => true,
    ‘supports’ => array(‘title’, ‘editor’, ‘thumbnail’, ‘custom-fields’)
    );

    register_post_type( ‘events’ , $args );
    }

    thats all that is needed, but make sure you back up the project before making changes :)

  • Pingback: TemplateLand Blog » Blog Archive » Extra! Extra! Fresh WordPress 3.0 Tutorials

  • http://artatm.com Artatm

    amazing post.. really helpful :)

  • Pingback: Jared Thompson

  • Pingback: Pablo Lara H

  • Pingback: Nye WordPress 3.0 Guides | Barner.dk

  • http://www.srotherham.com Flick

    Thanks for the tutorial, :D It's helped alot

  • Nick Metcalf

    Thank you Guys & Gals…hopefully this will be one of many!

  • Wpluvr

    So, we have to custom code the PHP files to do this? Lame.

  • Jeff

    Did I miss the link to this code in action? It would be very helpful to see the end result so that when I attempt to implement this code I can reference your completed page to be sure I've done it correctly.

    Also, with 3.0 is it necessary that I upgrade the files within my customized theme? I have upgraded to 3.0, but don't know enough about wordpress to know which, if any, files within my theme also need to be upgraded. For example, the code in the Twentyten functions.php has a lot of new code, but is it all specific to Twentyten, or do I need to update my functions.php with this new code?

    Thanks.

  • http://www.weingage.com/ Jay

    Nick, great article, but this code provide here works and the above code (in the actual post) does not. Good work! Thanks!

  • Pingback: Tutorial: Word Press 3.0 Custom Post Types | Zurte

  • Pingback: The Top Five Places to Learn Wordpress (for free!) | Make Design, Not War

  • Pingback: WordCamp@Chicago Recap: WordPress for Clients :: www.fuyuko.net 2009

  • Pingback: WordCamp@Chicago Recap: WordPress for Clients | fuyuko.net

  • Pingback: WordPress 3.0 – Tutorials and Guides to get You Started | [Re]Encoded.com

  • John

    ‘supports’ => array(‘title’, ‘editor’, ‘thumbnail’, ‘custom-fields’)

    For some reason, everything but the thumbnail section is showing up for me. Is there something else that needs to be done for the thumbnails to be active? I already added theme support with the code below…

    add_theme_support( 'post-thumbnails', array( 'post' ) );

  • Pingback: Extra! Extra! Fresh WordPress 3.0 Tutorials | Joiner.ro - Indexare gratuita feed-uri RSS

  • Stryker

    Cool tips

  • Pingback: Sobre taxonomías, tipos de contenido y paneles personalizados en WordPress | La Bitácora del Tigre

  • Karl

    Thanks for that. im based in England and was wondering if it is possible to order the dates if they were in DD MM YYYY order? if so how would i go about doing this?

    Thanks

  • NickMetcalf

    Yep, just change the date round in the custom_fields and in the code! Probably best to order as YYYY-mm-dd otherwise it wont order properly

  • Chad Tomkiss

    Hi,

    Do you know how to have sub pages under events?

    My example is:

    post type: products

    page: products

    sub page: products/portfolio

    WordPress thinks that portfolio is a product post type, and not a page, therefore rendering 404!

    Any help would be much appreciated.

    Kind regards,

    Chad

  • http://www.oraclesoftruth.org shinshuri

    Can this code be used with any theme other than TwentyTen?

  • crl

    Great, really helped me get going with WP, thanks a lot…

  • crl

    Depends on the ´-character which are wrong in the tutorial, switch them to '-characters instead..

  • Green Rajesh

    Hi, I don't want show all content in one page. i want show, two or three lines in on page, if we click on that content on headings, will open onother window.

    how it is possible

  • Pingback: 5 Must Read Tutorials on WordPress Custom Post Types | themesforge.com - Premium Wordpress Themes, News, TIps and More

  • Pingback: Custom Post Types in Wordpress | ralphs mcintosh + partners

  • Pingback: Links om egne indholdstyper i WordPress 3

  • Pingback:   links for 2010-09-07 by Wayne John's Twitter Stream

  • Pingback: Guides to New Wordpress 3.x

  • Pingback: [MOD NEEDED] Registering a cutom post type with classipress | AppThemes Forum

  • Pingback: 10 Advanced Wordpress Theme Development Tutorials | Wordpress MetaBlog

  • Pingback: 10 Advanced Wordpress Theme Development Tutorials | Tessa Explains How to Do Things