• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

Add Portfolio Category Archive Page To Metro Theme

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.

  1. The 1st PHP code block goes at the end of your child themes functions.php file
  2. 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.
  3. The 3rd block of CSS code goes before your Media Queries near the end of your style.css file

metro portfolio

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

portfolio widget

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

Metro Pro Theme

Reader Interactions

Comments

  1. Ana says

    September 5, 2014 at 5:46 pm

    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
    • Brad Dalton says

      September 5, 2014 at 7:05 pm

      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
  2. Deb says

    March 26, 2014 at 7:01 pm

    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
    • Brad Dalton says

      March 26, 2014 at 7:06 pm

      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++

      functions.php 
      page_portfolio.php
      style.css

      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
  3. Ingebjørg Huus says

    February 15, 2014 at 10:09 am

    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
  4. AnitaC says

    December 15, 2013 at 3:53 pm

    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
    • Brad Dalton says

      December 16, 2013 at 2:35 am

      The best code to use comes from Executive Pro and should be very easy to add to Modern Portfolio Pro.

      Portfolio

      Log in to Reply
  5. karan rana says

    July 29, 2013 at 1:14 pm

    thanx for sharing the informative knowledge ….

    Log in to Reply
    • Brad Dalton says

      July 29, 2013 at 1:50 pm

      No worries Karan

      Log in to Reply
  6. AnitaC says

    July 28, 2013 at 11:36 am

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

    Log in to Reply
    • Brad Dalton says

      July 28, 2013 at 11:42 am

      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

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.