• Home
  • About Mitch
  • Speaking
  • Articles
  • Contact
  • Home
  • About Mitch
  • Speaking
  • Articles
  • Contact

Digital Strategist

WordPress Developer

Content Creator

Unapologetic Punk

Mitch Canter

  • X
  • Bluesky
  • GitHub
  • Twitch
  • YouTube
  • LinkedIn
Tutorial

Building a Portfolio With Custom Post Types / Taxonomies: Enhancing The Archive

CMDR Mitchcraft

Reading time: 3 minutes

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.

999999, custom post type, custom taxonomy, portfolio in WordPress, Tutorial, WordPress
  • WPThumb: Bringing Back The “Hard Crop”

    WPThumb: Bringing Back The “Hard Crop”

    Reading time: 2 minutes

    One of the most useful features WordPress has is the ability to create custom image sizes from uploads.  This takes the guesswork out of design, as it allows me to specify exactly the dimensions I need for my image.  For a long time, WordPress had the ability to switch between a “soft crop”, which basically…

    WordPress
  • A Responsive Menu Solution for WordPress

    A Responsive Menu Solution for WordPress

    Reading time: 3 minutes

    Edited 01/14/14 to work with WordPress 3.8 A few months ago I modified a really cool WordPress template and started using it for my own clients.  As part of the overhaul, I realized that there was no really good way (included) to turn a WordPress unordered list into a menu that would work on a…

    Development, WordPress