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
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..?
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
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
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++
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.
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…
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?
The best code to use comes from Executive Pro and should be very easy to add to Modern Portfolio Pro.
thanx for sharing the informative knowledge ….
No worries Karan
Thank Brad!!! You are absolutely right, a lot of people are looking for this.
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.