Download - Building a Portfolio With Custom Post Types
![Page 1: Building a Portfolio With Custom Post Types](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c43a914a795967118b45a3/html5/thumbnails/1.jpg)
Alex Blackie(x96design)
Building a Portfolio With Custom Post Types
![Page 2: Building a Portfolio With Custom Post Types](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c43a914a795967118b45a3/html5/thumbnails/2.jpg)
Slidemap
● Define custom post types● Basic implementation (code walk-through)● Featured Images (thumbnails)● Live demo● Questions● Download link
![Page 3: Building a Portfolio With Custom Post Types](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c43a914a795967118b45a3/html5/thumbnails/3.jpg)
What are Custom Post Types?
● A way to add custom streams of content● Photos, Podcasts, Screencasts...● A blog outside of the blog
![Page 4: Building a Portfolio With Custom Post Types](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c43a914a795967118b45a3/html5/thumbnails/4.jpg)
So...
WordPress Custom Post Types can be used for your Portfolio entries.
![Page 5: Building a Portfolio With Custom Post Types](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c43a914a795967118b45a3/html5/thumbnails/5.jpg)
How It Works
● WordPress– Project Custom Post Type
● Client taxonomy– Clients
● 'Projects' entries– Portfolio items
![Page 6: Building a Portfolio With Custom Post Types](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c43a914a795967118b45a3/html5/thumbnails/6.jpg)
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.
![Page 7: Building a Portfolio With Custom Post Types](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c43a914a795967118b45a3/html5/thumbnails/7.jpg)
The Code
![Page 8: Building a Portfolio With Custom Post Types](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c43a914a795967118b45a3/html5/thumbnails/8.jpg)
functions.php / add_action()
add_action('init', 'create_post_type');add_action('init', 'create_post_type_taxonomies');
![Page 9: Building a Portfolio With Custom Post Types](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c43a914a795967118b45a3/html5/thumbnails/9.jpg)
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:
![Page 10: Building a Portfolio With Custom Post Types](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c43a914a795967118b45a3/html5/thumbnails/10.jpg)
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:
![Page 11: Building a Portfolio With Custom Post Types](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c43a914a795967118b45a3/html5/thumbnails/11.jpg)
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();
![Page 12: Building a Portfolio With Custom Post Types](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c43a914a795967118b45a3/html5/thumbnails/12.jpg)
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();
![Page 13: Building a Portfolio With Custom Post Types](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c43a914a795967118b45a3/html5/thumbnails/13.jpg)
Phew.
![Page 14: Building a Portfolio With Custom Post Types](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c43a914a795967118b45a3/html5/thumbnails/14.jpg)
Making it “Pop”
● Post Thumbnails– Built into WordPress– Integrated– Easy to use– Attaches thumbnails to posts
![Page 15: Building a Portfolio With Custom Post Types](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c43a914a795967118b45a3/html5/thumbnails/15.jpg)
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:
![Page 16: Building a Portfolio With Custom Post Types](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c43a914a795967118b45a3/html5/thumbnails/16.jpg)
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();
![Page 17: Building a Portfolio With Custom Post Types](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c43a914a795967118b45a3/html5/thumbnails/17.jpg)
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();
![Page 18: Building a Portfolio With Custom Post Types](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c43a914a795967118b45a3/html5/thumbnails/18.jpg)
Live Demo
![Page 19: Building a Portfolio With Custom Post Types](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c43a914a795967118b45a3/html5/thumbnails/19.jpg)
Questions?
![Page 20: Building a Portfolio With Custom Post Types](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c43a914a795967118b45a3/html5/thumbnails/20.jpg)
Download This
x96design.com/other/wcv11
● All source code for functions.php, single-project.php, and project-list.php.
● My presentation (slides) for reference.