Page Template to Show Custom Post Type Loops

Custom Post Types

If you’re using Custom Post Types you’re obviously amazed by the amount of options such a feature can provide you in WordPress. I recently updated my Craft WordPress theme which implements Custom Post Types for “Portfolios”. The format allows the user to set up easy project posts and show them in a different styling from their regular posts.

Here’s a walk-through of how I developed my Page Template to show posts from a Custom Post Type.

1. First we set up the header to query the Custom Post Type. This tells the Page Template to query the relevant type, in this case the “Portfolio” post type.

Here’s the code for that:

<?php get_header(); query_posts('post_type=portfolio&showposts=-1') ?>

2. Then we set up the HTML to show the posts from the Portfolio post type. Here’s what my HTML looks like:

<div class="portfolio-container">

<h1>Page Template Title</h1>
<div id="portfolio-container">
<ul id="portfolio-filter">
<li><a href="#">All</a></li>
<li><a href="#"><!-- Portfolio Taxonomy/Category Loop Comes Here --></a></li>
</ul>

<ul id="portfolio">
<!-- Start Post Loop -->
<li><!-- Post Thumbnail Comes Here -->
<h3><a href="Post Link Comes Here">Post Title Comes Here</a></h3>
</li>
<!-- Finish Post Loop -->
</ul>

</div><!-- Portfolio Container -->

</div><!-- Post Class -->

Now let’s add in all the fun stuff!

3. First we set up the main container with the default WordPress generated post class tag and add in the Title tag as well:

<div <?php post_class('portfolio-page taxonomy-portfolio') ?>>
<h1><?php the_title(); ?> <?php edit_post_link('Edit', ' | ', ''); ?></h1>

4. Next, since we’re using a sortable technique here to filter the Portfolio projects themselves (that’s another tutorial for another day) I’m going to leave the “All” as a placeholder for showing all the taxonomies and the rest will display by using the foreach command. Explanation for each line is commented in the code:

<ul id="portfolio-filter">

<li><a href="#">All</a></li>

<?php
// Create an array and assign the projects taxonomy to it
$args = array( 'taxonomy' => 'projects' );
// Call the categories from this array
$categories=get_categories($args);
// Now, loop through them and...
foreach ($categories as $category) {
//...display each categories name
echo '<li><a href="#">'.$category->name;
echo '</a></li>';
// Fin.
} ?>

</ul>

5. Now, that our taxonomies are displaying up above, let’s display the actual content from this Custom Post Type. Since it’s a Page Template, I want to just show the “featured image” and the title of the Post. The code for that looks like this:

<ul id="portfolio">

<!-- Start the loop -->
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>

<li>
<!-- Since I want to show the featured image, check if it's available -->
<?php if (has_post_thumbnail() ) { ?>
<a href="<?php the_permalink() ?>" rel="nofollow" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_post_thumbnail('portfolio-image', array( 'title' => ''.get_the_title().'' ) ); ?></a>
<?php } ?>
<!-- Next we show the title of the Post -->
<h3><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php echo ShortenText(get_the_title()); ?></a></h3>
</li>
<!-- End the Loop -->
<?php endwhile; endif; // End Portfolio ?>
</ul>

<!-- Adding the closing div and get_footer to close out the template -->
</div><!-- Portfolio Container -->
</div>

<?php get_footer(); ?>

Almost done…

6. You might want to add this to your functions.php if you want to use the above code in your Page Template:

add_action( 'init', 'create_post_type' );
function create_post_type() {
register_post_type( 'portfolio',
array(
'labels' => array(
'name' => __( 'Portfolio' ),
'singular_name' => __( 'Portfolio' ),
'add_new' => _x('Add New Project', 'portfolio item'),
'add_new_item' => __('New Portfolio Project'),
'edit_item' => __('Edit Portfolio Project'),
'new_item' => __('New Portfolio Project'),
'view_item' => __('View Portfolio Project'),
'search_items' => __('Search Your Portfolio'),
'not_found' =>  __('Nothing found'),
'not_found_in_trash' => __('Nothing found in Trash'),
),
'public' => true,
'has_archive' => true,
'publicly_queryable' => true,
'show_ui' => true,
'query_var' => true,
'rewrite' => array('slug' => 'portfolio'),
'capability_type' => 'post',
'supports' => array('title','editor','thumbnail','comments','excerpt'),
'taxonomies' => array( 'category ')
)
);
}

register_taxonomy("projects", array("portfolio"), array("hierarchical" => true, "label" => "Project Category", "singular_label" => "Category: ", "rewrite" => true));

Could you just give me the final code already?! (the filterable action needs some additional jQuery and magic, which will probably be shown in another tutorial)

Here’s the final Page Template code:

<?php
/**
* @package WordPress
* @subpackage Your Theme Name
*/
/*
Template Name: Portfolio
*/
?>

<?php get_header(); query_posts('post_type=portfolio&showposts=-1') ?>

<div <?php post_class('portfolio-page taxonomy-portfolio') ?>>

<h1><?php the_title(); ?> <?php edit_post_link('Edit', ' | ', ''); ?></h1>
<div id="portfolio-container">

<ul id="portfolio-filter">
<li><a href="#">All</a></li>
<?php
$args = array( 'taxonomy' => 'projects' );
$categories=get_categories($args);
foreach ($categories as $category) {
echo '<li><a href="#">'.$category->name;
echo '</a></li>';
} ?>
</ul>

<ul id="portfolio">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<li><?php if (has_post_thumbnail() ) { ?><a href="<?php the_permalink() ?>" rel="nofollow" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_post_thumbnail('portfolio-image', array( 'title' => ''.get_the_title().'' ) ); ?></a><?php } ?><h3><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php echo ShortenText(get_the_title()); ?></a></h3>
</li>
<?php endwhile; endif; // End Portfolio ?>
</ul>

</div><!-- Portfolio Container -->

</div>

<?php get_footer(); ?>

Here’s a working example of the template in my Craft WordPress theme.

If you found this tutorial helpful please leave a comment and let me know how you’ve used it. A tweet or like would be just as awesome, thanks!

5 thoughts on “Page Template to Show Custom Post Type Loops

  1. Weborithm, the tutorial looks great! Good work. The only suggestion I have is that I would explain some of the WP functions that you use in a bit more detail. I have found that if you don’t explain what the functions do then people just end up copying and pasting the code because they don’t actually learn what is going on.

    Besides it looks good!

  2. Hi weborithm, the tutorial have a problem.
    i have used all code, and show me all.
    But if i would apply the code at one page template and start with page, not show more.
    Example:
    1 i create one page template with your code example page_portfolio.php
    and put in function.php all next code.
    2 i create one new page with name portfolio, and i have now this url “www.mysite.com/portfolio”
    3 i apply the template page_portfolio.php at the portfolio page

    Conclusion:
    the adresse http://www.mysite.com/portfolio not working now!
    but the adresse page http://www.mysite.com/portfolio/post-title, working now.
    if i change the portfolio page name, in example http://www.mysite.com/portfolio working all.
    how i can resolve this problem?
    i want the page http://www.mysite.com/portfolio with index of all subpages as your site: http://test.weborithm.com/craft/my-portfolio/

    any ideas? i mistake now?

    Very thanks
    Alberto from Italy

  3. Thanks a lot ! this was so much help 😉 please do share more of these great tutorials ! wordpress is so powerful and even more powerful with more and more tutorials !

Leave a Reply