Introduction

In themes that support the Portfolio custom post type, you may want to display multiple portfolios. For example one for design work and one for photography.

The portfolio page template is coded to display ALL portfolios, with a category menu/filter of all categories. As a result, you can have any number of pages assigned to this page template, but it will always display the same thing.

The below code examples are for Gigawatt and may vary for your theme, but the theory is the same. To get specific class names, right click the element when viewing the page and choose Inspect Element.

The Solution

Option A: The Easy Method

We recommend using Category structures to separate your portfolios. This is not only the easiest way for you to manage it, but it helps you avoid modifying the theme and is a method we can support later if you run into problems.

Using the above example, say you have a collection of design work and a collection of photography. Rather than create two categories called Design and Photography, these should be defined by the page. Setup your category structure for each portfolio under Portfolio > Categories by adding all top-level categories similar to this:

(Design Categories)

  • Web
  • Print
  • UI

(Photo Categories)

  • Editorial
  • Nature
  • Fine Art

You now have 6 categories.  Now use the porfolio posts as your albums. Create one post per project following your Theme Documentation for creating portfolio posts, and add them to the appropriate category. In my example, I now have the following:

Web:

  • Website Project 1
  • Website Project 2
  • Website Project 3

Print

  • Print Project 1
  • Print Project 2
  • Print Project 3

and so on, 3 posts per category. Next, create a new page for each portfolio (Design and Photography) and assign it to the Widgetized Page Template. Using widgets under Appearance → Widgets, I can now setup a slider or a number of content widgets to display each portfolio.

Working Out the Kinks

When someone clicks on one of my portfolios, they will see the portfolio post as normal, but the category menu/filter will appear at the top. If you don’t want the menu to appear at all, you can disable it in some themes under Theme Options, or hide it using custom css :

#category-column {display: none;}

If you want the category filter, but only want the categories for this portfolio to appear, you can use custom css to hide specific categories on that page.  This will require you to get the specific class of each page using Inspect Element or viewing the page source. Below is an example using Gigawatt.

This hides the photography category links when someone views the Web category. You will need one set of these for each category page.

.tax-portfolio-category .term-web #category-column li:nth-child(4),

.tax-portfolio-category .term-web #category-column li:nth-child(5),

.tax-portfolio-category .term-web #category-column li:nth-child(6){display: none;}

Here is an explaination of this style:

.tax-portfolio-category = This is the class name for the portfolio category pages and tells WordPress to only do this when viewing one of these pages.

.term-web = This is the class for this specific portfolio category page.  You can see the class for your category page by looking at the <body tag in your source.

#category-column li = This is the selector for the thing we want to hide

nth-child(4), nth-child(5), etc = This selects the specific link to hide, depending on its position in the list. I wanted to hide the 4th, 5th and 6th links on my pages. For the photography category pages, I will hide the 1st, 2nd, 3rd etc.

 You can now add your new pages to your menu. You may also optionally forgo creating the widgetized pages and simply add one of your categories to the menu as the landing page for that portfolio.

Method 2: If you are familiar with PHP

This is a Mod

This is considered a modification, so do it at your own risk! Make a backup of your existing file so you can replace it if something goes wrong and you need to start over.  Modified files WILL probably be replaced by a theme update at some point so keep note of your changes for future reference or see our guides below. Please note that we cannot assist you with modifying your theme or support problems you encounter as a result!

If you are modifying a theme as part of a client project, the following are really important!

How to Modify Your Theme the Right Way

How to Track Update Changes and Maintain Modifications



The other option requires creating two custom page templates based on your theme’s portfolio page template, and adding custom queries to pull in only the categories you wish to display. This allows you to create two separate portfolio pages assigned to these different page templates.  The category structure would still follow the above scheme.

1. On a local copy of the theme, open  portfolio.php in an HTML editor and change “Portfolio List” at the top to your own title.

2. Replace line 18:

query_posts("post_type=portfolio&showposts=-1");

With:

$args = array(
	'post_type' => 'portfolio',
	'tax_query' => array(
		array(
			'taxonomy' => 'portfolio-category',
			'field' => 'slug',
			'terms' => array('cat1', 'cat2' )
		)
	)
);
$query = new WP_Query( $args );

3. Change cat1 and cat2 etc to your category names you want to display.
4. Change lines 34-35 :

<?php if (have_posts()) :
                while (have_posts()) :    the_post();

To:

<?php if ($query->have_posts()) :
                while ($query->have_posts()) :  $query->the_post();

5. Save the file as portfolio2.php or something unique and upload it to your theme folder. You can now make another copy for the second portfolio. This way you don’t make changes to the original template, but have two custom templates for your purpose that wont get overwritten by a theme update.

6. From here, you can use the same CSS trick to hide categories in the category menus on the pages using these templates (See above) OR customize the terms list query on line 5.

Reference:

WP_Query on WP.org

get_the_terms