Building a Portfolio With Custom Post Types

Building a Portfolio With Custom
Post Types
Alex Blackie
(x96design)

Slidemap
● Define custom post types
● Basic implementation (code walk-through)
● Featured Images (thumbnails)
● Live demo
● Questions
● Download link

What are Custom Post Types?

● A way to add custom streams of content
● Photos, Podcasts, Screencasts...

● A blog outside of the blog

So...

WordPress Custom Post Types can be used for
your Portfolio entries.

How It Works
● WordPress
– Project Custom Post Type
● Client taxonomy
– Clients
● 'Projects' entries
– Portfolio items

Benefits
● Flexible
– Ability to extend
– Relate taxonomies between custom post types
● Organized
– Clients are organized under their own section and can
have multiple projects under them.

functions.php / add_action()

add_action('init', 'create_post_type');
add_action('init', 'create_post_type_taxonomies');

functions.php / register_post_type()
Output:
function create_post_type() {
register_post_type( 'projects',
array(
'labels' => array(
'name' => __( 'Projects' ),
'singular_name' => __( 'Project' ),
),
'public' => true,
'rewrite' => array('slug' => 'projects'),
'supports' => array('title', 'custom-fields',
'editor', 'revisions')
)
);
}

functions.php / register_post_type_taxonomy()
function create_post_type_taxonomies() {
$labels = array(
'name' => _x( 'Clients', 'taxonomy general name' ),
'singular_name' => _x( 'Client', 'taxonomy singular name' ),
'search_items' => __( 'Search Clients' ),
'all_items' => __( 'All Clients' ),
'parent_item' => __( 'Parent Client' ), Output:
'parent_item_colon'=> __( 'Parent Client:' ),
'edit_item' => __( 'Edit Client' ),
'update_item' => __( 'Update Client' ),
'add_new_item' => __( 'Add New Client' ),
'new_item_name' => __( 'New Client Name' ),
);
register_taxonomy('client', array('projects'), array(
'hierarchical' => true,
'labels' => $labels,
'show_ui' => true,
'query_var' => true,
'rewrite' => array( 'slug' => 'clients' ),
));
}

portfolio-list.php
<?php
/* Template Name: Portfolio Gallery */
get_header();
query_posts(array('post_type' => 'projects'));
?>
<ul>
<?php
if(have_posts()): while(have_posts()): the_post();
?>
<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?
></a></li>
<?php
endwhile; else:
?>
<li>No Entries Found.</li>
<?php
endif;
?>
</ul>
<?php
get_footer();

single-projects.php
<?php
get_header();
if(have_posts()): the_post();
?>
<h1 class="page-title"><?php
the_title(); ?></h1>
<?php the_content(); ?>
<?php
else:
// 404 message
endif;
get_footer();

Making it “Pop”
● Post Thumbnails
– Built into WordPress
– Integrated
– Easy to use
– Attaches thumbnails to posts

functions.php
add_theme_support('post-thumbnails');
function create_post_type() {
register_post_type( 'projects',
array(
'labels' => array(
'name' => __( 'Projects' ),
'singular_name' => __( 'Project' ),
),
'public' => true,
'rewrite' => array('slug' => 'projects'),
'supports' => array('title', 'custom-fields', 'editor', 'revisions', 'thumbnail')
)
);
}

Output:

portfolio-list.php
<?php
/*Template Name: Portfolio Gallery */
get_header();
query_posts(array('post_type' => 'projects'));
if(have_posts()): while(have_posts()): the_post();
?>
<article class="project">
<a href="<?php the_permalink(); ?>"><?php echo
get_the_post_thumbnail($page->ID, array('400', '300'); ?></a>
</article>
<?php
endwhile; else:
?>
<h1>No Entries Found.</h1>
<p>Uh-oh.</p>
<?php
endif;
get_footer();

single-projects.php
<?php
get_header();
if(have_posts()): the_post();
?>
<h1 class="page-title"><?php the_title(); ?></h1>
<aside>
<?php echo get_the_post_thumbnail($page->ID, array('400',
'300'); ?>
</aside>
<div class="wraparound">
<?php the_content(); ?>
</div>
<?php
else:
// 404 message
endif;
get_footer();

Download This

x96design.com/other/wcv11

● All source code for functions.php, single-
project.php, and project-list.php.
● My presentation (slides) for reference.

Stalk Me

@x96design on Twitter

X96Design.com

alex@x96design.com

Building a Portfolio With Custom Post Types

Recommended

More Related Content

What's hot (20)

Similar to Building a Portfolio With Custom Post Types (20)

Building a Portfolio With Custom Post Types