Building a Portfolio With Custom           Post Types           Alex Blackie             (x96design)
Slidemap●   Define custom post types●   Basic implementation (code walk-through)●   Featured Images (thumbnails)●   Live d...
What are Custom Post Types?●   A way to add custom streams of content      ● Photos, Podcasts, Screencasts...      ● A blo...
So...WordPress Custom Post Types can be used for           your Portfolio entries.
How It Works●   WordPress      –   Project Custom Post Type           ●   Client taxonomy                 – Clients       ...
Benefits●   Flexible       –   Ability to extend       –   Relate taxonomies between custom post types●   Organized       ...
The Code
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() {  ...
functions.php /   register_post_type_taxonomy() function create_post_type_taxonomies() {   $labels = array(      name     ...
portfolio-list.php<?php   /* Template Name: Portfolio Gallery */   get_header();   query_posts(array(post_type => projects...
single-projects.php<?php   get_header();   if(have_posts()): the_post();?>           <h1 class="page-title"><?phpthe_title...
Phew.
Making it “Pop”●   Post Thumbnails      –   Built into WordPress      –   Integrated      –   Easy to use      –   Attache...
functions.phpadd_theme_support(post-thumbnails);function create_post_type() {     register_post_type( projects,          a...
portfolio-list.php<?php   /*Template Name: Portfolio Gallery */   get_header();   query_posts(array(post_type => projects)...
single-projects.php<?php   get_header();   if(have_posts()): the_post();?>           <h1 class="page-title"><?php the_titl...
Live Demo
Questions?
Download This       x96design.com/other/wcv11●   All source code for functions.php, single-    project.php, and project-li...
Stalk Me@x96design on Twitter   X96Design.comalex@x96design.com
Upcoming SlideShare
Loading in …5
×

Building a Portfolio With Custom Post Types

5,288 views
5,178 views

Published on

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,288
On SlideShare
0
From Embeds
0
Number of Embeds
40
Actions
Shares
0
Downloads
57
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Building a Portfolio With Custom Post Types

  1. 1. Building a Portfolio With Custom Post Types Alex Blackie (x96design)
  2. 2. Slidemap● Define custom post types● Basic implementation (code walk-through)● Featured Images (thumbnails)● Live demo● Questions● Download link
  3. 3. What are Custom Post Types?● A way to add custom streams of content ● Photos, Podcasts, Screencasts... ● A blog outside of the blog
  4. 4. So...WordPress Custom Post Types can be used for your Portfolio entries.
  5. 5. How It Works● WordPress – Project Custom Post Type ● Client taxonomy – Clients ● Projects entries – Portfolio items
  6. 6. 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.
  7. 7. The Code
  8. 8. functions.php / add_action()add_action(init, create_post_type);add_action(init, create_post_type_taxonomies);
  9. 9. 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) ) );}
  10. 10. 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 ), )); }
  11. 11. 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();
  12. 12. single-projects.php<?php get_header(); if(have_posts()): the_post();?> <h1 class="page-title"><?phpthe_title(); ?></h1> <?php the_content(); ?><?php else: // 404 message endif; get_footer();
  13. 13. Phew.
  14. 14. Making it “Pop”● Post Thumbnails – Built into WordPress – Integrated – Easy to use – Attaches thumbnails to posts
  15. 15. 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:
  16. 16. 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 echoget_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();
  17. 17. 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();
  18. 18. Live Demo
  19. 19. Questions?
  20. 20. Download This x96design.com/other/wcv11● All source code for functions.php, single- project.php, and project-list.php.● My presentation (slides) for reference.
  21. 21. Stalk Me@x96design on Twitter X96Design.comalex@x96design.com

×