Building a Portfolio With Custom Post Types / Taxonomies: Enhancing The Archive
Yesterday we finished our portfolio, built with a custom post type, three taxonomies, and some custom field information that we can use to display lots of data about our pieces. Today is a bonus; we’ve got all these really cool taxonomies, but no way to really browse the portfolio based on a specific term.
- 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
Once this is done, your portfolio will be browsable, functional, and look pretty awesome too!
Adding Taxonomy Data to the Archive Pages
When you visit a single portfolio entry, you’ll remember now we have all of that information on the right side. We want to do something similar for the main archive page, and all subsequent taxonomy archive pages, but showing all of the options to choose from.
There’s three taxonomies, but what fun is it to just show a bulleted list for every taxonomy? Let’s turn one of them into a drop-down menu.
[code]
function get_terms_dropdown($taxonomies, $args){
$myterms = get_terms($taxonomies, $args);
$output =”<select name=’wordpress_functionality’>”;
$output .=”<option value=’#’> </option>”;
foreach($myterms as $term){
$root_url = get_bloginfo(‘url’);
$term_taxonomy=$term->taxonomy;
$term_slug=$term->slug;
$term_name =$term->name;
$link = $term_slug;
$output .=”<option value='”.$link.”‘>”.$term_name.”</option>”;
}
$output .=”</select>”;
return $output;
}
[/code]
Make sure to change the value to match the one you want to showcase.
Next, we’ll head over to sidebar.php. Drop this into your sidebar:
[code]
<!–portfolio archive widgets–>
<?php if ( ‘portfolio’ == get_post_type() && is_archive() ) { ?>
<li class=”widget”>
<h4 class=”widgettitle”>Browse Portfolio</h4>
<h5>Work Done</h5>
<ul><?php wp_list_categories(‘taxonomy=work_done&title_li=’); ?></ul>
<h5>WordPress Functionality</h5>
<form action=”<?php bloginfo(‘url’); ?>” method=”get”>
<?php
$taxonomies = array(‘wordpress_functionality’);
$args = array(‘orderby’=>’name’,’hide_empty’=>true);
$select = get_terms_dropdown($taxonomies, $args);
$select = preg_replace(“#<select([^>]*)>#”, “<select$1 onchange=’return this.form.submit()’>”, $select);
echo $select;
?>
<noscript><div><input type=”submit” value=”Go” /></div></noscript>
</form>
<h5>By Color:</h5>
<ul><?php wp_list_categories(‘taxonomy=color_scheme&title_li=’); ?></ul>
</li>
<?php } ?>
[/code]
There are three sections: the Work Done section, the WordPress Functionality section (our drop-down), and Color Scheme. I’m using wp_list_categories to pull a bulleted list for each of the taxonomies, and the form in the middle is the drop down for the functionality section. By wrapping it in a conditional tag we ensure it only shows up 1) on the portfolio pages and 2) only when displaying an archive.
However, we still have one problem: None of the archive templates (typically) make arrangements for custom taxonomies. Let’s fix that.
Add Taxonomy Title to Fallback Archives
Edit your archive.php and add this in just before the <?php while (have_posts()) : the_post(); ?> line:
[code]
<?php if( is_tax() ) {
global $wp_query;
$term = $wp_query->get_queried_object();
$title = $term->name; ?>
<h2 class=”pagetitle”><?php echo $title ?></h2>
<?php } ?>
[/code]
This will display your term’s name as the page title.
Wrapping It Up
And that’s it! We’ve created our portfolio, added templates to customize it, set up the taxonomies to sort our data, and provided a means to display that data on both the single and archive portfolio pages. Obviously these can be tweaked to your specifications, but I’ve found a lot of utility in having the data searchable and browsable in many different ways.