Building a Portfolio With Custom Post Types / Taxonomies: Files & Meta
Yesterday we took a look at the beginning parts of building a portfolio using WordPress. It basically boiled down to a few parts:
- Create the Post Type (done yesterday)
- Create The Taxonomies (Color Scheme [tag based], Work Done, WordPress Functionality Used) (done yesterday)
- Create Archive / Single pages for post type
- Create Meta Box
- Assign Meta Box Data to Single Page
- Assign Taxonomy Data to Archive Page
- Add Taxonomy Title to Fallback Archives
The last post talked about creating the post type and taxonomy. Today we’ll talk about how to create files specific to that post type, and how to store the extra “meta” information into a post so you can pull it out later.
Creating the Archive / Single Templates
With WordPress’ template system, there’s a lot of flexibility in how data is displayed. Templates use a “fallback” system so that if one template can’t be found, it’ll simply use another, more generic template.
For example, your archive posts (tags + categories) use this order:
[code]category-SLUG.php > category-ID.php > category.php > archive.php > index.php[/code]
If category-SLUG.php isn’t available, the more generic files get used (down to category.php, then archive.php). Index.php is the “catch-all”. Custom post types are no exception. By using “archive-POSTTYPE.php” you can override the default archive.php style.
The single-POSTTYPE.php file is the same way. Whereas normally single.php would be the default view for a file, single-POSTTYPE.php can allow you to have a customized single article view for your post type.
So, why would I want to create these files? Two reasons:
- On my archive page, I wanted to get rid of the excerpt text and shrink down the boxes to fit the new style (since I have to have a hard-height parameter set to allow the meta information to look like it does.
- On my single page, I wanted to remove the meta information and add buttons for ShareThis and Pinterest (since that section is very image heavy).
I could make any changes I wanted to, but once I’m done I have two files (archive-portfolio.php and single-portfolio.php) that allow me full customization on those sections.
Creating a Meta Box
A Custom Meta Box is a content piece that goes in the write screen of your posts or page section. It allows you to fill in the blanks to store extra meta information and call that information back out later to display in a different way.
For my single portfolio articles, I wanted to use both my taxonomy data and some specialized data to showcase each site:
- Client’s Name
- Website Name
- Website URL
- Testimonial Section (if I had one)
For this, I decided to use the “More Fields” plugin. It uses a GUI interface to create a meta box that stores custom field data. I can then use echo statements to pull the data out later.
The Process: Meta Boxes
- Download and install “More Fields”
- Head to the “More Fields” settings menu
- Create a Meta Box
- Edit your newly created box
- Add Input Fields
(once you do this, you’ll see two values and an option that must be filled in: Field Name, Custom Field Name, and Type. Make sure you remember specifically the custom field name; you’ll need it in a bit) - Save & Repeat for any extra boxes you want to create
Adding the Meta Information to the Portfolio Page
I wanted my information to stand out, so instead of adding it to the portfolio page directly, I decided to add it to the sidebar instead (at the top) to attract more attention. This posed a problem, however, as (unlike the portfolio page) the sidebar was visible on every page.
Here’s the full code, with my fix for this, and we can walk through it:
[code]
<?php if ( ‘portfolio’ == get_post_type() && !is_archive() ) { ?>
<li class=”widget portfolioInfoWidget”>
<h4 class=”widgettitle”>Portfolio Information</h4>
<p>Client Name: <span class=”blue”><?php echo get_post_meta($post->ID, ‘snv-client’, true) ?></span></p>
<p>Website: <a target=”_blank” class=”blue” href=”<?php echo get_post_meta($post->ID, ‘snv-weblink’, true) ?>”><?php echo get_post_meta($post->ID, ‘snv-website’, true) ?></a></p>
<p>Work Done: <?php echo get_the_term_list($post->ID, ‘work_done’, ”, ‘, ‘, ”); ?></p>
<p>Project Status: <span class=”blue”><?php echo get_post_meta($post->ID, ‘snv-status’, true) ?></span></p>
<?php if ( get_post_meta($post->ID, ‘snv-testimonial’, true) ) : ?>
<p>From The Client:<br />
<em><?php echo get_post_meta($post->ID, ‘snv-testimonial’, true) ?></em></p>
<?php endif; ?>
</li>
<li class=”widget portfolioInfoWidget”>
<h4 class=”widgettitle”>Color Palette</h4>
<?php echo get_the_term_list($post->ID, ‘color_scheme’, ”, ‘, ‘, ”); ?>
</li>
<li class=”widget portfolioInfoWidget”>
<h4 class=”widgettitle”>WordPress Functionality</h4>
<?php echo get_the_term_list($post->ID, ‘wordpress_functionality’, ”, ‘<br />’, ”); ?>
</li>
<?php } ?>
[/code]
Here are the important parts. Line 1 is a conditional statement that tells WordPress to only display this piece of code if two conditions are met: 1) it’s the portfolio post type and 2) if it’s NOT the archive page [hence the bang symbol]. Anything with <?php echo… ?> is what we use to display the custom meta information we stored earlier. Simply replace the variable (<?php echo get_post_meta($post->ID, ‘VARIABLE’, true) ?>) with your custom field key from earlier. Line 6 shows a comma separated list of the custom taxonomy terms.
It’s also worth noting line 8. It uses another conditional tag to check to see if a value has any information in it (snv-testimonial) and only displays the information if it isn’t null.
Where We Stand
So far we’ve created our post type and taxonomies, created custom archive + single pages for them, added our meta information, and displayed that information on the sidebar. We are technically finished, as once you get your information in you could start viewing the portfolio page and seeing your newly created templates at work. However, our taxonomy page is a little… lacking. It has no title and no way to sort through all those nice taxonomy pages we created. And we don’t just want endless lists of information; we want to store the longer ones in a drop-down for ease of viewing. Plus, our taxonomy page doesn’t even have a title.
That’s where we’ll pick it up next time.