Creating the Portfolio Archive Page

The Port­fo­lio Archive page is some­thing you want to focus on when it comes to show­cas­ing your work. This part of the web­site helps you gor­geous­ly dis­play the projects you’ve worked on, ren­dered in a grid based lay­out. In this arti­cle, we walk you through the steps you need to fol­low to cre­ate a con­sis­tent Port­fo­lio Archive page.

Step 1  — How to Start?

Here’s what you need to do to start with the right foot:

  • Log into the Word­Press Dash­board
  • Go to Pages → click on Add new, and write down a rel­e­vant name for this one (Work should be just fine)

Step 2 — Creating the Archive Page

  • Go to Pages → click on Add new, and give it a name.
  • On the right side, under Page Attrib­ut­es, you need to select Projects Archive or Port­fo­lio List. What is spe­cial about the Projects List is that you’ll see an extra block of fields added once you choose this tem­plate.
  • Click on Update to save the changes, and you can move fur­ther.

Step 3 — Filtering projects

Fur­ther­more, we’ve devel­oped a neat Fil­ter­ing Sys­tem, based on our Pix­Fields plu­g­in. (screen­shot)

The Archive Page dis­plays the fil­ters with the help of fil­ter­able fields from the Man­age Fields sec­tion, avail­able in the side­bar of each project. You can learn more about fil­ter­ing and man­ag­ing fields by check­ing out this arti­cle.

Step 4 — Changing Image Sizes and Proportions

Beyond our awe­some Fil­ter­ing Sys­tem, you have the pos­si­bil­i­ty to change the pro­por­tions of the Archive Images to either land­scapepor­trait or mason­ry.

You can achieve this by going to Set­tings  Media → Port­fo­lio Thumb­nail:

NOTE: Don’t for­get to regen­er­ate the thumb­nails if you make any mod­i­fi­ca­tion.

Examples of Proportions

Chang­ing the Max Width to 400px and the Max Height to 400px gen­er­ates square thumb­nails.

Chang­ing the Max Width to 400px and check­ing the below field (Crop thumb­nail to exact dimen­sions),  gen­er­ates land­scape thumb­nails.

You can read more info about image sizes in this com­pre­hen­sive arti­cle.

Addi­tion­al Read­ings:

This article applies to Mies, as they share the same underlying structure.

Updated on May 9, 2017

Was this article helpful?