Site icon WP Smith

Displaying Custom Post Types

Understanding WordPress Custom Post Types

There are several ways to display your custom post types:

  1. Display Custom Post Types with Blog Posts
  2. Display Custom Post Types with Custom Loop
  3. Display Custom Post Types via Shortcode

Display Custom Post Types with Posts

To display them with posts on the blog page, you can add this bit of code to your functions.php file:

[php]
add_filter( 'pre_get_posts' , 'wps_add_my_cpt' );
function wps_add_my_cpt() {
if ( is_home() && false == $query->query_vars['suppress_filters'] ) //if you want it to appear in the feed, comment this line & use the next line
if ( ( is_home() && false == $query->query_vars['suppress_filters'] ) || is_feed() )
$query->set( 'post_type' , 'array( 'post' , 'wps_cars' );
return $query;
}[/php]

Display Custom Post Types with Custom Loop

WordPress added support for single-type-template in Version 3.0 and for archive-type-template in Version 3.1.

Single template

In the form of the single-type-template. In the same way that posts are shown on their own page with single.php, custom post types will use single-{posttype}.php if it's available.

So for the above example, you could create a single-wps_cars.php file and the product posts would be shown using that template.

Archive template

In the form of the archive-type-template. In the same way that posts are shown on their own archive with archive.php, custom post types will use archive-{posttype}.php if it's available.

So for the above example, you could create a archive-wps_cars.php file and the product posts would be shown using that template.

*Note: Use the is_post_type_archive() function to check if the query shows post type archive page, and the post_type_archive_title() to echo the post type title.

Custom Post Type Custom Loops

To create your own custom loop in your page template (or, for Genesis users, you can see my post, <a href="https://wpsmith.net/frameworks/how-to-create-a-wordpress-custom-post-type-template-in-genesis/" target="_blank">How to Create a WordPress Custom Post Type Template in Genesis</a>), you can add this bit of code:

[php]$args = array( 'post_type' => 'wps_cars' , 'posts_per_page' => 5 , 'orderby' => 'post_title' , 'order' => 'ASC' );
$carsloop = new WP_Query( $args );
if ( $carsloop->have_posts() ) {
$output = '<div id="cars-content">';
while ( $carsloop ->have_posts() ) : $carsloop ->the_post();
$output .= the_title();
$output .= '<div class="entry-content">';
$output .= the_content();
$output .= '</div>';
endwhile;
$output .= '</div>';
}
else
$output = '<p>No cars were found.</p>';
[/php]

Display Custom Post Types via Shortcode

One way to display custom post types is to create a shortcode (thanks to Mark Jaquith, @markjaquith) to display them on pages or posts. There are a variety of reasons to use them and a variety of reasons that these can be abused. However, the benefits outweigh the risks and if done well, this can improve the user experience.

To display the cars custom post type that we have been working with, simply create a page and insert [ cars] (without the space in the front) to display wps_cars posts as a posts page (except we are ordering by Post Title in ascending order).

[php]function wps_cars_posting() {
global $post;
$xglobals = $GLOBALS;
$args = array( 'post_type' => 'wps_cars' , 'posts_per_page' => 5 , 'orderby' => 'post_title' , 'order' => 'ASC' );
$carsloop = new WP_Query( $args );
$output = '';
if ( $carsloop->have_posts() ) {
while ( $carsloop->have_posts() ): $carsloop->the_post();
$output .= '<div id="cars-content">';
$output .= get_the_post_thumbnail( $post->ID, 'thumbnail' );
$output .= '<strong>';
$output .= get_the_title();
$output .= '</strong>';
if (!empty( $post->post_excerpt ) )
$output .= '<em>'.$post->post_excerpt.'</em>';
$output .= get_the_content();
$output .= '</div>';
endwhile;
}
else
$output = '<p>No cars were found.</p>';
$GLOBALS = $xglobals;
return $output;
}

function my_init() {
add_shortcode( 'cars' , 'wps_cars_posting' );
}

add_action('init' , 'my_init');
[/php]

Be sure to add CSS your style.css accordingly.

For Genesis users, you can use the custom_loop function.