WordPress Custom Post Types: Doing it the right way!

I’m sure you’ve heard of custom post types before, it’s on every WordPress developers mind. Today I want to show you how to create custom post types the right way and make it as easy as possible for you to understand.

First off we are going to start by creating 2 custom post types and then I’m going to show you how to call each custom post type on their own page template.

Why use custom post types if you can just use the standard blog posts in the admin?

See custom post types as a way of of putting each post in their own category and directory with some SEO benefits. If you’ve setup your permalinks correctly you will see your custom post types look like this: yoururl.com/wordpress/wordpress-custom-post-type/

Not only does your url look neat and categorized but Google also seems to love them.

Your first custom post type code

The best thing to do before you start is to have an idea of what you are going to write about. This is helpful in knowing what names you will be giving you’re post types.

Let’s start with two simple names, wordpress and javascript. This will give you a great sense of what we are writing about.

Now all we need to do is first off to create a php function in the functions.php file.


function create_my_custom_post_types(){

}

No that was easy right? Lets add our first custom post type code in to this function

<pre>register_post_type( 'wordpress’,

                        array(

                                    'labels' => array(

                                                'name' => __( 'Wordpress Articles' ),

                                                'singular_name' => __( WordPress Article' )

                                    ),

                                    'public' => true,

                                    'supports' => array('title','editor','thumbnail', 'custom-fields', 'comments'),

                                    'query_var' => true,

                        )

            );</pre>

Let me break it down for you a bit.

The first important part is to give your post type a name this happens in the register_post_type part.

register_post_type( 'wordpress’,

Next you want to give your menu a label title, this is used to display in the menu part of your admin section of wordpress.

'labels' => array(

'name' => __( 'Wordpress Articles' ),

'singular_name' => __( 'WordPress Article' )

Next you want to make your post type be visible to the public.

'public' => true,

Next you need to make your custom post type support a few things like a featured image, custom fields, titles, comments and the editor. You can read more about it here http://codex.wordpress.org/Function_Reference/register_post_type

'supports' => array('title','editor','thumbnail', 'custom-fields', 'comments'),

Next we want to make it so that we can query the post types in our code or template files.

'query_var' => true

All that’s left for us to do is to add an action init method to enable our function with custom post types.

add_action( 'init', ' create_my_custom_post_types' );

The final code looks like this.

 <?php  add_action( 'init', ' create_my_custom_post_types' );
function create_my_custom_post_types(){

            //the wordpress post type

            register_post_type( 'wordpress’,

                        array(

                                    'labels' => array(

                                                'name' => __( 'Wordpress Articles' ),

                                                'singular_name' => __( WordPress Article' )

                                    ),

                                    'public' => true,

                                    'supports' => array('title','editor','thumbnail', 'custom-fields', 'comments'),

                                    'query_var' => true,

                        )

            );

//the javascript post type

register_post_type( 'javascript’,

                        array(

                                    'labels' => array(

                                                'name' => __( 'Javascript Articles' ),

                                                'singular_name' => __( 'Javascript Article' )

                                    ),

                                    'public' => true,

                                    'supports' => array('title','editor','thumbnail', 'custom-fields', 'comments'),

                                    'query_var' => true,

                        )

            );

}?>

Create a template file to call your custom post type articles.

To get more information on how to create a theme template file for wordpress you can go here http://codex.wordpress.org/Pages

The code below shows you how to call your custom post type for that specific template file.

<?php //get the promotions

                                                $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;

                                                $loop = new WP_Query( array(

                                                'post_type' => array(

                                                            'wordpress',

                                                            'javascript'

                                                ),

                                                'posts_per_page' => 10,

                                                'paged' => $paged

                                                ) ); ?>

                                    <?php while ( $loop->have_posts() ) : $loop->the_post(); ?>

                                                <?php the_title( '<h2><a href="' . get_permalink() . '" title="' . the_title_attribute( 'echo=0' ) . '" rel="bookmark">', '</a></h2>' ); ?><div id="date"><?php  echo get_the_date(); ?></div>

                                                <div class="entry-content">

                                                <p><?php the_post_thumbnail(); ?> </p>

                                                            <?php

                                                            echo get_the_excerpt();

                                                            ?>

                                                </div>

                                    <?php endwhile; ?>

The most important part of the code above is the following. It calls the post types you’ve named when you created your code for the post types above. You could call one post type at a time or call all of them like below.

$loop = new WP_Query( array(

'post_type' => array(

'wordpress',

'javascript'

),

'posts_per_page' => 10,

'paged' => $paged

) );

You can set the amount of posts to display here 'posts_per_page' => 10,

That’s it were done

If you have any questions or don’t understand something then please feel free to comment below and ask. I will try to answer everyone to the best of my ability.

Some other great articles on the topic

http://justintadlock.com/archives/2010/04/29/custom-post-types-in-wordpress

http://sixrevisions.com/wordpress/wordpress-custom-post-types-guide/

Related Posts:

  • rss
  • email
  • rss
  • email
I'm a full time PHP developer and I just love all things web related. If you need help I'm your guy.

4 Responses to WordPress Custom Post Types: Doing it the right way!

  1. Leandra says:

    What a GREAT article… Worth bookmarking… Looking forward to reading some more soon Morne!!! Keep up the good work!!

  2. Morné says:

    Hi Lenadra,

    Thanks for commenting, I’m happy that you liked my article! Keep in touch and look out for some more great articles coming soon.

  3. HoverH8ter says:

    Great article although your “share” hover is quite annoying when trying to read through an article.

  4. Morné says:

    Hi, thanks for letting me know. On what device did you browse? I’ll make it disappear or position better on smaller screens.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>