wordpress-sleep-compress
November 21st, 2010

Create a Project Collection Theme using WordPress 3.0 Custom Post Type

I faced many problems to manage my shared content on skydrive, google Docs, dropbox…etc. I decided to create a wordpress theme where I could share my content properly. I like wordpress 3.0 custom post type feature. It gives me option to create this feature. In this post, A project collection theme using wordpress 3.0 custom post type is explained.

Object:

1. To create Custom post type for Projects with following options:
Report(s)
Presentation(s)
Submitted By
Other Attachment(s)
2. To add different external shared file (Google Docs, Windows SkyDrive..etc) in Options.
3. To create Index page and new feed for the Projects
4. To create catalog for Projects.

WordPress 3.0 Custom Post Type Feature:

According to the WordPress Codex,

“Post type refers to the various structured data that is maintained in the WordPress posts table. Custom post types allow users to easily create and manage such things as portfolios, projects, video libraries, podcasts, quotes, chats, and whatever a user or developer can imagine.”

We will use this feature in the default 3.0 theme, TwentyTen to implement our object.

Step 1: Register the Custom Post Type

Download Smarter Custom Post types from here. It provides facility to create index page for custom post type.

Copy Code, create new file ‘functions-helper.php’ in theme folder, paste it and save it.

Open functions.php and add following code:

include ('functions-helper.php');
$args = array(
        	'label' => __('Projects'),
        	'singular_label' => __('Project'),
        	'public' => true,
        	'show_ui' => true,
        	'capability_type' => 'post',
        	'hierarchical' => false,
        	'rewrite' => true,
        	'supports' => array('title', 'editor', 'thumbnail','comments','excerpt')
        );
	sd_register_post_type( 'project', $args );

project-collection-theme-wordpress-admin

Step 2: Adding Options:

To add Report(s), Presentation(s), Submitted By, Other Attachment(s) options in admin section, add following code in functions.php

add_action("admin_init", "admin_init");
	add_action("save_post", "save_brij");

	function admin_init(){
		add_meta_box("projInfo-meta", "project Options", "meta_options", "project", "side", "low");
	}

	function meta_options(){
		global $post;
		$custom = get_post_custom($post->ID);
		$brij_report = $custom["brij_report"][0];
		$brij_presentation = $custom["brij_presentation"][0];
		$brij_submittedby = $custom["brij_submittedby"][0];
		$brij_othersattachment = $custom["brij_othersattachment"][0];
?>
	<label>Report(s):</label><br/>
	<textarea rows="4" cols="60" name="brij_report"><?php echo $brij_report; ?></textarea><br/>
	<label>Presentation(s):</label><br/>
	<textarea rows="4" cols="60" name="brij_presentation"><?php echo $brij_presentation; ?></textarea><br/>
	<label>Submitted By:</label><br/>
	<textarea rows="2" cols="40" name="brij_submittedby"><?php echo $brij_submittedby; ?></textarea><br/>
	<label>Other Attachment(s):</label><br/>
	<textarea rows="4" cols="60" name="brij_othersattachment"><?php echo $brij_othersattachment; ?></textarea><br/>
<?php
	}

function save_brij(){
	global $post;
	update_post_meta($post->ID, "brij_report", $_POST["brij_report"]);
	update_post_meta($post->ID, "brij_presentation", $_POST["brij_presentation"]);
	update_post_meta($post->ID, "brij_submittedby", $_POST["brij_submittedby"]);
	update_post_meta($post->ID, "brij_othersattachment", $_POST["brij_othersattachment"]);
}

wordpress-project-theme-options

Step 3: Adding Custom Categories:

To add new custom categories say Catalogs in Product type post, add following code:

register_taxonomy("catalog", array("project"), array("hierarchical" => true, "label" => "Catalogs", "singular_label" => "Catalog", "rewrite" => true));
wordpress-catalog-custom

Step 4: Customize Columns:

Add following code to create custom set of columns for our Product type:

add_filter("manage_edit-project_columns", "proj_edit_columns");
add_action("manage_posts_custom_column",  "proj_custom_columns");

function proj_edit_columns($columns){
		$columns = array(
			"cb" => "<input type=\"checkbox\" />",
			"title" => "Title",
			"description" => "Description",
		/*	"brij_report" => "Report(s)",
			"brij_presentation" => "Presentation(s)",
			"brij_submittedby" => "Submitted By",
			"brij_othersattachment" => "Other(s) Attachment", */
			"catalog" => "Catalog",
		);

		return $columns;
}

function proj_custom_columns($column){
		global $post;
		switch ($column)
		{
			case "description":
				the_excerpt();
				break;
			case "brij_report":
				$custom = get_post_custom();
				echo $custom["brij_report"][0];
				break;
			case "brij_presentation":
				$custom = get_post_custom();
				echo $custom["brij_presentation"][0];
				break;
			case "brij_submittedby":
				$custom = get_post_custom();
				echo $custom["brij_submittedby"][0];
				break;
			case "brij_othersattachment":
				$custom = get_post_custom();
				echo $custom["brij_othersattachment"][0];
				break;
			case "catalog":
				echo get_the_term_list($post->ID, 'catalog', '', ', ','');
				break;
				
		}
}

wordpress-admin-project-column

Step 5: Creating Template:

Create new folder “project” in your theme folder.
Create new index.php file in project folder and add following code:

<?php
get_header(); ?>

		<div id="container">
			<div id="content" role="main">

			 <?php 
global $wp_query;
$wp_query = new WP_Query("post_type=project&post_status=publish&posts_per_page=5");


  if (have_posts()) : while (have_posts()) : the_post(); 
  $custom = get_post_custom($post->ID);
  ?>

  <div class="archivearticle">

<div class="posttitle"><h1><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>
  
         <!-- Comments -->  
  

</div>

 <!-- Title div -->

<div class="postcontent">
  <?php the_post_thumbnail(); ?>
<?php echo 'Submitted By: '.$custom["brij_submittedby"][0]; ?><br/>   
<?php 

echo '<h3>Download:</h3><ul class="download-project">';
if (strlen($custom["brij_presentation"][0]) > 0){
echo '<li><h4>Presentation(s)</h4><div>';
echo $custom["brij_presentation"][0].'</div></li>'; 
}

if (strlen($custom["brij_report"][0]) > 0){
echo '<li><h4>Report(s)</h4><div>';
echo $custom["brij_report"][0].'</div></li>'; 
}

if (strlen($custom["brij_othersattachment"][0]) > 0){
echo '<li><h4>Other(s)</h4><div>';
echo $custom["brij_othersattachment"][0].'</div></li>'; 
}  
echo '</ul>';
echo '<div style="width:100%;clear:both"></div>';
 ?>
 </div> <!-- Post content div -->

</div> <!-- Latest article div -->
<?php endwhile; ?>

<div class="pagination">
			<div class="alignleft"><?php next_posts_link('&laquo; Older Entries'); ?></div>
			<div class="alignright"><?php previous_posts_link('Newer Entries &raquo;'); ?></div>
</div>



	<?php else : ?>



		<h1>Not Found</h1>

		<p>Sorry, but you are looking for something that isn't here.</p>



	<?php endif; ?>

			</div><!-- #content -->
		</div><!-- #container -->

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

Create new single.php file in project folder and add following code:

<?php
/**
 * The Template for displaying all single posts.
 *
 * @package WordPress
 * @subpackage Twenty_Ten
 * @since Twenty Ten 1.0
 */

get_header(); ?>

		<div id="container">
			<div id="content" role="main">

<?php if ( have_posts() ) : while ( have_posts() ) : the_post();
$custom = get_post_custom($post->ID);
 ?>
<div class="archivearticle">
<div class="posttitle">  
  <h1><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>
<div class="subtitleleft">
<span class="bold">
  <?php the_time('jS F Y g:i a'); ?></span> by <span class="bold"><?php the_author(); ?></span>
  </div>
</div>

<!-- Title div -->

<div class="postcontent">

  <?php the_post_thumbnail( 'single-post-thumbnail' ); ?>

<?php echo 'Submitted By: '.$custom["brij_submittedby"][0]; ?><br/>   
<?php 

echo '<h3>Download:</h3><ul class="download-project">';
if (strlen($custom["brij_presentation"][0]) > 0){
echo '<li><h4>Presentation(s)</h4><div>';
echo $custom["brij_presentation"][0].'</div></li>'; 
}

if (strlen($custom["brij_report"][0]) > 0){
echo '<li><h4>Report(s)</h4><div>';
echo $custom["brij_report"][0].'</div></li>'; 
}

if (strlen($custom["brij_othersattachment"][0]) > 0){
echo '<li><h4>Other(s)</h4><div>';
echo $custom["brij_othersattachment"][0].'</div></li>'; 
}  
echo '</ul>';
echo '<div style="width:100%;clear:both"></div>';
echo '<h3>Intro:</h3>';
 ?>


<?php the_content(); ?>


<?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>



<p><?php the_tags('Tags: ', ', ', '<br/>'); ?>Posted in <?php the_category(', '); ?> | <a href="<?php comments_link(); ?>">&nbsp;<?php comments_number('0','1','%'); ?></a><?php edit_post_link('Edit', ' | ', ''); ?></p>



<?php comments_template(); ?>

</div> <!-- Post content div -->

</div> <!-- Latest article div -->



<?php endwhile; else : ?>



		<h1>Not Found</h1>

		<p>Sorry, but you are looking for something that isn't here.</p>



	<?php endif; ?>

			</div><!-- #content -->
		</div><!-- #container -->

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

Step 6: Apply URL changes:

Go to Settings Permalink in wp-admin and re-save your current URL structure. This will flush WP’s current URL structure and add our new rewrite rules.

Step 7: Test it:

In admin section > Projects > Add New
Enter data
Publish it and Enjoy it.
Note: index page of project post type: <Your site url>/projects/
feed url: <Your site url>/projects/feed/
See following output screenshot:

Project-collection-theme-techbrij

Download Code:

You can download the updated theme here.

  • Niraj

    this is really coool, it will help me a lot,
    can you help me out in my website part,
    i have a website of mba courses & colleges info,
    what i want is when i add new/edit post in the editing part i want a text box with the label named as Twitter User ID,
    so that when i ll enter the Twitter account ID of that universitie, i ll get all the tweets of that university/college just next to my post,
    but the point is i want this in every post,
    for eg
    In, Insead College post, i ll get all the tweets on insead & for Denver i ll get all the tweets for Denver,
    how can this be done,
    is there any plugin available for this?
    -NIRAJ
    tech-admin-www.mbas.in

  • http://www.techmaish.com/ Tech Maish

    Great sharing. I am not so good in PHP, but this can help me a lot.

  • Niraj

    i want to display custom taxonomies on my pages also, how can i do that?
    i am using plugin for custom taxonomies, GDCPT plugin,
    can you help me???????????????

  • http://www.techbrij.com Brij Mohan

    You need to use get_the_term_list method to display custom taxonomies. Put following where you want to display:

    <?php echo get_the_term_list($post->ID, 'catalog', 'catalog: ', ', ', ''); ?>

  • http://www.techbrij.com Brij Mohan

    Thanks for reply.

  • http://www.techbrij.com Brij Mohan

    I would like you to follow below steps:

    1. Create a custom option for twitter account ID similar to report/presentation..etc.
    2. Go to twitter, get code of recent tweets widget.
    3. Put the code where you want to display and replace your twitter ID to custom option twitter account ID.

    Hope, It helps.

  • Nirajmchauhan

    thanks for your reply,
    i have three custom taxonomies, location, courses & duration,
    with the same names i created three pages,
    now i want that all the terms of taxonomy location should be displayed on location page, and same for others
    how can i do that?

  • Chantal

    Hi,
    thanks for your post. This is exactly what I was looking for.
    Perhaps you can help me. I have altered the code a bit, but I'm getting “Page not found” now on my site for the added post.

    This is the code in my functions.php:
    add_action('init', 'create_resales');
    function create_resales() {
    $resales_args = array(
    'label' => __('Resales'),
    'singular_label' => __('Resale'),
    'public' => true,
    'show_ui' => true,
    'capability_type' => 'post',
    'hierarchical' => false,
    'rewrite' => true,
    'supports' => array('title', 'editor', 'thumbnail')
    );
    register_post_type('resales',$resales_args);
    }
    ?>
    add_action(“admin_init”, “add_resales”);
    add_action(“save_post”, “save_resales”);

    function add_resales(){
    add_meta_box(“resales_details”, “Resale Options”, “meta_options”, “resales”, “side”, “low”);
    }

    function meta_options(){
    global $post;
    $custom = get_post_custom($post->ID);
    $resales_report = $custom[“resales_report”][0];
    $resales_presentation = $custom[“resales_presentation”][0];
    $resales_submittedby = $custom[“resales_submittedby”][0];
    $resales_othersattachment = $custom[“resales_othersattachment”][0];
    ?>
    <label>Report(s):</label>

    <textarea cols=”60″ name=”resales_report” rows=”1″><?php echo $resales_report; ?></textarea>

    <label>Presentation(s):</label>

    <textarea cols=”60″ name=”resales_presentation” rows=”1″><?php echo $resales_presentation; ?></textarea>

    <label>Submitted By:</label>

    <textarea cols=”40″ name=”resales_submittedby” rows=”1″><?php echo $resales_submittedby; ?></textarea>

    <label>Other Attachment(s):</label>

    <textarea cols=”60″ name=”resales_othersattachment” rows=”1″><?php echo $resales_othersattachment; ?></textarea>

    }

    function save_resales(){
    global $post;
    update_post_meta($post->ID, “resales_report”, $_POST[“resales_report”]);
    update_post_meta($post->ID, “resales_presentation”, $_POST[“resales_presentation”]);
    update_post_meta($post->ID, “resales_submittedby”, $_POST[“resales_submittedby”]);
    update_post_meta($post->ID, “resales_othersattachment”, $_POST[“resales_othersattachment”]);
    }

    register_taxonomy(“resales”, array(“resales”), array(“hierarchical” => true, “label” => “Countries”, “singular_label” => “Country”, “rewrite” => true));
    ?>
    add_filter(“manage_edit-resales_columns”, “resales_edit_columns”);
    add_action(“manage_posts_custom_column”, “resales_columns_display”);

    function resales_edit_columns($resales_columns){
    $resales_columns = array(
    “cb” => “<input type=””checkbox””>”,
    “title” => “Title”,
    “description” => “Description”,
    /* “resales_report” => “Report(s)”,
    “resales_presentation” => “Presentation(s)”,
    “resales_submittedby” => “Submitted By”,
    “resales_othersattachment” => “Other(s) Attachment”, */
    “catalog” => “Catalog”,
    );

    return $columns;
    }

    function resales_custom_columns($column){
    global $post;
    switch ($column)
    {
    case “description”:
    the_excerpt();
    break;
    case “resales_report”:
    $custom = get_post_custom();
    echo $custom[“resales_report”][0];
    break;
    case “resales_presentation”:
    $custom = get_post_custom();
    echo $custom[“resales_presentation”][0];
    break;
    case “resales_submittedby”:
    $custom = get_post_custom();
    echo $custom[“resales_submittedby”][0];
    break;
    case “resales_othersattachment”:
    $custom = get_post_custom();
    echo $custom[“resales_othersattachment”][0];
    break;
    case “catalog”:
    echo get_the_term_list($post->ID, 'catalog', '', ', ','');
    break;

    }
    }
    ?>

    This is the code in my single page:

    <div id=”main”>
    $custom = get_post_custom($post->ID);
    $screenshot1 = $custom[“screenshot1″][0];
    ?>
    <div id=”project-content”>


    echo '

    Download:

    <ul class=”download-project”>';
    if (strlen($custom[“resales_presentation”][0]) > 0){
    echo '<li>

    Presentation(s)

    <div>';
    echo $custom[“resales_presentation”][0].'</div></li>';
    }

    if (strlen($custom[“resales_report”][0]) > 0){
    echo '<li>

    Report(s)

    <div>';
    echo $custom[“resales_report”][0].'</div></li>';
    }

    if (strlen($custom[“resales_othersattachment”][0]) > 0){
    echo '<li>

    Other(s)

    <div>';
    echo $custom[“resales_othersattachment”][0].'</div></li>';
    }
    echo '</ul>';
    echo '<div style=”width:100%;clear:both”></div>';
    echo '

    Intro:

    ';
    ?>

    </div>
    <div id=”project-image-large”>
    <img src=”&lt;?php echo $screenshot1;?&gt;”>
    </div>
    </div>

    Can you tell me what I'm doing wrong? So it helps me understand the custom posts better.

    Thank you.
    Chantal

  • Pingback: wp-popular.com » Blog Archive » Create a Project Collection Theme using WordPress 3.0 Custom Post Type | Tech Brij()

  • http://www.techbrij.com Brij Mohan

    Use 'Tweets By Post' Plugin
    http://techbrij.com/category/p

  • http://twitter.com/HTML5Based HTML5 Based

    Thanks for your hard work, I followed your article from tut+, I am almost done, however i have one issue and one doubt which i am unable to understand.
    doubt=> I haven't created index and single inside “project” folder instead i have created “template_resource.php” and “single_resource.php” in the theme folder, and still it works, how?

    issue=> While the page access “template_resource.php” this as template and shows series of “posts” however clicks on the headings doesn't take me to the post page and 404 error.
    and if I click on “view post” from the back end it shows the post. I noticed both URLs seems to be different. how do i fix this.

    Thanks in advance.

  • http://twitter.com/HTML5Based HTML5 Based

    hello, any help would be highly appreciated. I have got the project folder name as resource, single post does show me the content however when I try to accessing index page using “http://myurl/resource/” it shows me page not found, please give me some direction to fix this,

  • http://www.techbrij.com Brij Mohan

    Let me know what happened if you use http://myurl/resources/

  • maco

    First thank for nice tutorial. Everything works fine, but it not showing th category. I have exactly what you have, 2 cat are deffined with posts but not showing (post yes, but category name not.) Is there any alternative to ?