building a portfolio with custom post types
DESCRIPTION
TRANSCRIPT
Alex Blackie(x96design)
Building a Portfolio With Custom Post Types
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.
The Code
functions.php / add_action()
add_action('init', 'create_post_type');add_action('init', 'create_post_type_taxonomies');
functions.php / register_post_type()
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') ) );}
Output:
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' ), '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' ), ));}
Output:
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();
Phew.
Making it “Pop”
● Post Thumbnails– Built into WordPress– Integrated– Easy to use– Attaches thumbnails to posts
functions.phpadd_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><!-- end .wraparound --><?php else: // 404 message endif; get_footer();
Live Demo
Questions?
Download This
x96design.com/other/wcv11
● All source code for functions.php, single-project.php, and project-list.php.
● My presentation (slides) for reference.
