WordPress Custom Post type theming – Single page / category page and index page theming

Introduction to Custom Post types

Custom post types are new post types you can create. A custom post type can be added to WordPress via the register_post_type() function. This function allows you to define a new post type by its labels, supported features, availability and other specifics. (http://codex.wordpress.org/Post_Types)

Default Post types in WordPress

• Post (Post Type: ‘post’)
• Page (Post Type: ‘page’)
• Attachment (Post Type: ‘attachment’)
• Revision (Post Type: ‘revision’)
• Navigation menu (Post Type: ‘nav_menu_item’)

Most people are only familiar with Post and Pages. Most often when we use premium themes, we see custom post types like portfolio / products / testimonials / clients etc.

So here comes the need of creating custom post types. We need custom post types to add content other then default post and pages like if we want to show our portfolio on website.

How to create custom post types in wordpress

Last week I wrote this article on how to add a custom post type in wordpress, you can learn a lot from there. For today’s tutorial I will be just using code that you need to add in functions.php to create a custom post type – Portfolio !!

Code to create Portfolio custom post type

if ( ! function_exists('custom_post_type') ) {

// Register Custom Post Type
function custom_post_type() {

$labels = array(
'name' => _x( 'Portfolios', 'Post Type General Name', 'text_domain' ),
'singular_name' => _x( 'Portfolio', 'Post Type Singular Name', 'text_domain' ),
'menu_name' => __( 'Portfolio', 'text_domain' ),
'parent_item_colon' => __( 'Parent Item:', 'text_domain' ),
'all_items' => __( 'All Items', 'text_domain' ),
'view_item' => __( 'View Item', 'text_domain' ),
'add_new_item' => __( 'Add New Item', 'text_domain' ),
'add_new' => __( 'Add New', 'text_domain' ),
'edit_item' => __( 'Edit Item', 'text_domain' ),
'update_item' => __( 'Update Item', 'text_domain' ),
'search_items' => __( 'Search Item', 'text_domain' ),
'not_found' => __( 'Not found', 'text_domain' ),
'not_found_in_trash' => __( 'Not found in Trash', 'text_domain' ),
);
$args = array(
'label' => __( 'portfolio', 'text_domain' ),
'description' => __( 'Add your portfolio items', 'text_domain' ),
'labels' => $labels,
'supports' => array( 'title', 'editor', 'excerpt', 'author', 'thumbnail', 'comments', 'trackbacks', 'revisions', 'custom-fields', 'page-attributes', ),
'hierarchical' => false,
'public' => true,
'show_ui' => true,
'show_in_menu' => true,
'show_in_nav_menus' => true,
'show_in_admin_bar' => true,
'menu_position' => 5,
'menu_icon' => '',
'can_export' => true,
'has_archive' => true,
'exclude_from_search' => false,
'publicly_queryable' => true,
'capability_type' => 'page',
);
register_post_type( 'portfolio', $args );

}

// Hook into the 'init' action
add_action( 'init', 'custom_post_type', 0 );

}

Code to create custom taxnomony for Portfolio custom post type

Above code will add a custom taxonomy by the name of Portfolio Category. Functionality would be same as category in posts.

You can learn more about custom taxonomies in another tutorial written by me – How to create custom taxonomies in wordpress – register_taxonomy();

Rest adding below code in your themes functions.php will work perfectly for you !!

if ( ! function_exists( 'custom_taxonomy' ) ) {
// Register Custom Taxonomy
function custom_taxonomy() {

$labels = array(
'name' => _x( 'Porfolio Categories', 'text_domain', 'bootstrap_thinkncode' ),
'singular_name' => _x( 'Porfolio Category', 'Taxonomy Singular Name', 'bootstrap_thinkncode' ),
'menu_name' => __( 'Portfolio Category', 'bootstrap_thinkncode' ),
'all_items' => __( 'All Portfolio Category\'s', 'bootstrap_thinkncode' ),
'parent_item' => __( 'Parent Item', 'bootstrap_thinkncode' ),
'parent_item_colon' => __( 'Parent Item:', 'bootstrap_thinkncode' ),
'new_item_name' => __( 'New Portfolio Category', 'bootstrap_thinkncode' ),
'add_new_item' => __( 'Add New Item', 'bootstrap_thinkncode' ),
'edit_item' => __( 'Edit Item', 'bootstrap_thinkncode' ),
'update_item' => __( 'Update Item', 'bootstrap_thinkncode' ),
'separate_items_with_commas' => __( 'Separate items with commas', 'bootstrap_thinkncode' ),
'search_items' => __( 'Search Items', 'bootstrap_thinkncode' ),
'add_or_remove_items' => __( 'Add or remove items', 'bootstrap_thinkncode' ),
'choose_from_most_used' => __( 'Choose from the most used items', 'bootstrap_thinkncode' ),
'not_found' => __( 'Not Found', 'bootstrap_thinkncode' ),
);
$args = array(
'labels' => $labels,
'hierarchical' => true,
'public' => true,
'show_ui' => true,
'show_admin_column' => true,
'show_in_nav_menus' => true,
'show_tagcloud' => true,
);
register_taxonomy( 'portfolio_category', array( 'portfolio' ), $args );

}

// Hook into the 'init' action
add_action( 'init', 'custom_taxonomy', 0 );

}

Portfolio Custom Post type theming

Create a new file content-portfolio.php and add following code in it. In this page we are adding conditional template tags to display title and content on different pages. We will be using content-portfolio.php to call content on single page and taxonomy page.  If you are not familiar with template tags you can have a quick view about template tags at  wordpress codex. You also needs to have a basic understanding of Conditional tags, I would again recommend you to learn about conditional tags from this wordpress codex link for conditional tags.

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

<?php if (is_single() ) { ?>
 <h1 class="entry-title">
 <a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a>
 </h1>
 <div class="article-content">
 <?php the_content(); ?>
 </div>
<?php }
//single ends

elseif (is_archive() ) { ?>
 <h1 class="entry-title">
 <a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a>
 </h1>
 <?php the_title();?>
 <div class="article-content">
 <?php the_excerpt(); ?>
 </div>
<?php }

else {?>

<h1 class="entry-title">
 <a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a>
 </h1>
 <?php the_title();?>
 <?php the_content(); ?>

<?php }

</article>

Create another file single-portfolio.php and add following code to it.

single-{post-type}.php

The single post template used when a single post from a custom post type is queried. For example, single-book.php would be used for displaying single posts from the custom post type named “book”. index.php is used if the query template for the custom post type is not present.

<?php
/**
 * The Template for displaying Portfolio single posts.
 */

get_header(); ?>

 <div class="container"> <!-- container opens -->
<div id="page" class="hfeed site">

 <?php while ( have_posts() ) : the_post(); ?>

 <?php get_template_part( 'content', 'portfolio' ); ?>

<!-- calling portfolio categories -->
<?php $hd_list = get_the_term_list( $post->ID, 'portfolio_category', '<strong>Portfolio Categories :</strong> ', ', ', '' ); ?>

<?php echo $hd_list; ?> 

<!-- calling portfolio categories ends -->

<!-- use author name only for blog post -->

<a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>"><?php the_author_meta( 'display_name' ); ?></a>

<!-- author link ends-->

<span class="entry-date"><?php echo get_the_date(); ?></span>
<br/>
<?php echo get_the_time(); ?>
<?php endwhile; // end of the loop. ?>

 </div><!-- #primary -->
</div>
?>
<?php get_footer(); ?>

Next we need to create another page to display list of articles posted in custom post type – Portfolio !! This page will actually display all your portfolio items in a list as default wordpress blog shows latest posts, this page template will show latest portfolio items.

This page will create a new page template, to use this page template, create a new page and choose Portfolio as Page template from left side of edit screen,

Create a new file – portfolio-page.php and add following code in it.

<?php
/**

Template Name: Portfolio

*/

get_header(); ?>

 <?php

 // WP_Query arguments
$args = array (
 'post_type' => 'portfolio',
);

// The Query
$query = new WP_Query( $args );

// The Loop
if ( $query->have_posts() ) {
 while ( $query->have_posts() ) {
 $query->the_post();
 ?>

 <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
 <?php echo '<br/>' ?>
 <?php the_content(); ?>

 <?php echo '<hr/>' ?>
 <?php

 }
} else {
 // no posts found
}

// Restore original Post Data
wp_reset_postdata();

 ?>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Taxonomy – Portfolio Category theming

At last we need to code for custom taxonomy theming, Create a file taxonomy-product_category.php and add following code to it. This template will work for product categories.

<?php
/**
 * The template for displaying Archive pages.
 *
 * Learn more: http://codex.wordpress.org/Template_Hierarchy
 *
 * @package text_domain
 *
 * visit https://thinkncode.com to learn more
 *
 */

get_header(); ?>

	<section id="primary" class="content-area">
		<main id="main" class="site-main" role="main">

		<?php if ( have_posts() ) : ?>

			<header class="page-header">
				<h1 class="page-title">
					<?php
						if ( is_category() ) :
							single_cat_title();

						elseif ( is_tag() ) :
							single_tag_title();

						elseif ( is_author() ) :
							printf( __( 'Author: %s', 'text_domain' ), '<span class="vcard">' . get_the_author() . '</span>' );

						elseif ( is_day() ) :
							printf( __( 'Day: %s', 'text_domain' ), '<span>' . get_the_date() . '</span>' );

						elseif ( is_month() ) :
							printf( __( 'Month: %s', 'text_domain' ), '<span>' . get_the_date( _x( 'F Y', 'monthly archives date format', 'text_domain' ) ) . '</span>' );

						elseif ( is_year() ) :
							printf( __( 'Year: %s', 'text_domain' ), '<span>' . get_the_date( _x( 'Y', 'yearly archives date format', 'text_domain' ) ) . '</span>' );

						elseif ( is_tax( 'post_format', 'post-format-aside' ) ) :
							_e( 'Asides', 'text_domain' );

						elseif ( is_tax( 'post_format', 'post-format-gallery' ) ) :
							_e( 'Galleries', 'text_domain');

						elseif ( is_tax( 'post_format', 'post-format-image' ) ) :
							_e( 'Images', 'text_domain');

						elseif ( is_tax( 'post_format', 'post-format-video' ) ) :
							_e( 'Videos', 'text_domain' );

						elseif ( is_tax( 'post_format', 'post-format-quote' ) ) :
							_e( 'Quotes', 'text_domain' );

						elseif ( is_tax( 'post_format', 'post-format-link' ) ) :
							_e( 'Links', 'text_domain' );

						elseif ( is_tax( 'post_format', 'post-format-status' ) ) :
							_e( 'Statuses', 'text_domain' );

						elseif ( is_tax( 'post_format', 'post-format-audio' ) ) :
							_e( 'Audios', 'text_domain' );

						elseif ( is_tax( 'post_format', 'post-format-chat' ) ) :
							_e( 'Chats', 'text_domain' );

						else :
							_e( 'Archives', 'text_domain' );

						endif;
					?>
				</h1>
				<?php
					// Show an optional term description.
					$term_description = term_description();
					if ( ! empty( $term_description ) ) :
						printf( '<div class="taxonomy-description">%s</div>', $term_description );
					endif;
				?>
			</header><!-- .page-header -->

			<?php /* Start the Loop */ ?>
			<?php while ( have_posts() ) : the_post(); ?>

				<?php
					
					get_template_part( 'content', 'portfolio');
				?>

			<?php endwhile; ?>

		<?php else : ?>

		//else 

		<?php endif; ?>

		</main><!-- #main -->
	</section><!-- #primary -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Thats all about Custom Post type theming. If you find any bugs in code, please mention it in codes below.

Remember sharing is caring