Creating the Portfolio Archive Page

The Portfolio Archive page is something you want to focus on when it comes to showcasing your work. This part of the website helps you gorgeously display the projects you’ve worked on, rendered in a grid based layout. In this article, we walk you through the steps you need to follow to create a consistent Portfolio Archive page.

Step 1  – How to Start?

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

  • Log into the WordPress Dashboard
  • Go to Pages → click on Add new, and write down a relevant 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 Attributes, you need to select Projects Archive or Portfolio List. What is special about the Projects List is that you’ll see an extra block of fields added once you choose this template.
  • Click on Update to save the changes, and you can move further.

Step 3 – Filtering projects

Furthermore, we’ve developed a neat Filtering System, based on our PixFields plugin. (screenshot)

The Archive Page displays the filters with the help of filterable fields from the Manage Fields section, available in the sidebar of each project. You can learn more about filtering and managing fields by checking out this article.

Step 4 – Changing Image Sizes and Proportions

Beyond our awesome Filtering System, you have the possibility to change the proportions of the Archive Images to either landscapeportrait or masonry.

You can achieve this by going to Settings  Media → Portfolio Thumbnail:

NOTE: Don’t forget to regenerate the thumbnails if you make any modification.

Examples of Proportions

Changing the Max Width to 400px and the Max Height to 400px generates square thumbnails.

Changing the Max Width to 400px and checking the below field (Crop thumbnail to exact dimensions),  generates landscape thumbnails.

You can read more info about image sizes in this comprehensive article.

Additional Readings:

Updated on May 9, 2017

Was this article helpful?

Related Articles