Add Portfolio Category Archive Page To Metro Theme

Jul 28, 2013

—

Metro is one of the most popular StudioPress child themes however it doesn’t include a portfolio page. In this tutorial, i’ll provide all the code which is tested and works for adding a portfolio page to the Metro theme.

This tutorial and the code below should work for any child theme with a header width of 1080 px.

Here’s the screenshot from my local installation showing the perfect alignment of portfolio post thumbnails/featured images in the portfolio archive page in Metro.

Code Installation

All code should be copied from the view raw link in each Gist using a code editor.

The 1st PHP code block goes at the end of your child themes functions.php file
The 2nd block of PHP code goes in a new file you create using a text editor like Notepad++ named page_portfolio.php which you upload to the root directpry of your child theme.
The 3rd block of CSS code goes before your Media Queries near the end of your style.css file

This tutorial is based on the code used to create portfolio style category archive pages in the Balance theme.

This would have to be the most efficient and easiest way to create portfolio pages for all your different category archives.

Important Tips

Don’t forget to resave your permalink settings after saving the code in your child themes files. And resave them again if you tweak the PHP code.
Its also recommended to crop/resize your images to the exact same size before adding as a featured image to all posts assigned to the portfolio category.
And only add the same amount of posts you have in the widget so if you have set 6 posts to display on your portfolio page, only add 6 posts with featured images to that category.

How to Configure the Portfolio

To set up the Portfolio page in Balance, create a new Page called Portfolio (or similar). In the meta box on the right side, choose the Portfolio Page template. Publish the page.

You will need to create posts for the portfolio, with images uploaded to each post. We assigned each post to a Portfolio category.

Under Appearance -> Widgets, the will be a Portfolio widget area. Drag the Genesis Featured Posts widget to this area. Here’s how we set our demo site up:

Please Click to Enlarge

Source: http://my.studiopress.com/setup/balance-theme/#portfolio

Metro Pro Theme

Comments

11 responses to “Add Portfolio Category Archive Page To Metro Theme”

Ana

September 5, 2014

Hi Brad, I was trying to set up this page for all my categories. I’ve figured it out how to do 1 page, but how to do 5 category pages? From the page attributes, I can see only 1 portfolio template..?

Log in to Reply
1. Brad Dalton
  
  September 5, 2014
  
  This is not the best solution for what you want to do Ana.
  
  If you want to display your category archive pages in columns, i suggest you use CSS or column classes conditionally
  
  Log in to Reply
Deb

March 26, 2014

Hi Brad, I really appreciate the help you offer with these great code modifications. This one in particular I’ve needed for quite a while. Glad to finally find it.

I am trying to add this to my Metro site, but I find when I’ve copied and pasted your code to the functions.php and uploaded the file, my website disappears! When I revert back to the original functions file, it restores. Tried it 4 or 5 times now with Chrome and Firefox.

If its the permalinks that need re-saving first, after the upload, I can’t get to it because I only pull up a white screen when I try to go to the permalinks settings. Even if I try to save the permalinks settings using a separate browser that has it open. It disappears.

Any ideas on what could be causing it?

Thanks

Log in to Reply
1. Brad Dalton
  
  March 26, 2014
  
  Deb
  
  The code i used to do this produces exactly what you see in the screenshots.
  
  You must be copying and/or pasting the code incorrectly.
  
  Please copy ALL the code from the view raw link and paste it in the correct files using a text editor like Notepad++
  [code]
  functions.php
  page_portfolio.php
  style.css
  [/code]
  You need to read all the instructions in this tutorial so you know exactly where to paste the code.
  
  tested this code again and it works perfectly.
  
  Log in to Reply
Ingebjørg Huus

February 15, 2014

First I want to thank you for this tutorial, I have been looking for this for a long time.

I have a question:

I set up the portfolio page as you show, you can see it here:

How can I make the images align in the center? As it is now, there is more space on the right then the left side of the portfolio page…

Log in to Reply
AnitaC

December 15, 2013

Hi Brad, trying to use this on the new Modern-Portfolio Pro. It works great on the non PRO version, but I can’t get it working on the PRO version. Do I need to do something else?

Log in to Reply
1. Brad Dalton
  
  December 16, 2013
  
  The best code to use comes from Executive Pro and should be very easy to add to Modern Portfolio Pro.
  
  Log in to Reply
karan rana

July 29, 2013

thanx for sharing the informative knowledge ….

Log in to Reply
1. Brad Dalton
  
  July 29, 2013
  
  No worries Karan
  
  Log in to Reply
AnitaC

July 28, 2013

Thank Brad!!! You are absolutely right, a lot of people are looking for this.

Log in to Reply
1. Brad Dalton
  
  July 28, 2013
  
  Yep its the easiest way to do it and can be used on most themes.
  
  add_image_size( ‘portfolio-metro’, 328, 200, TRUE );
  
  I actually used 330 for the image width (in functions) rather than 328 which is in the code however the CSS width should be around 328 (in style.css)
  
  width: 328px;
  
  Note: One thing which is always a problem when modifying or adding new PHP code is the permalinks need to be re saved. If the images don’t display in a grid then doing this should fix it.
  
  Log in to Reply