Portfolio Setup


We have already created Portfolio Page, but it’s not enough for that to work properly. Let me explain you how Portfolio system works. First of all we need to create Portfolio Post. This is a basic template which teaches you how to do that:
These are minimum requirements for Portfolio Post to be created, for more options see Portfolio Single Advanced

Portfolio Post

  • Within your Dashboard navigate to Portfolio > Add New
  • Add Title and Content (if you like, not necessary)
  • Set Featured Image (REQUIRED for all portfolio post formats)
  • Set 2nd Featured Image (OPTIONAL if you want to create before-after effect on thumbnail hover)
  • Add at least one category (REQUIRED)
  • Click Publish and you’re done

It’s REQUIRED for each Portfolio Post to have at least one category, in the other case this post won’t be displayed on the Portfolio Page. It’s also important to know that categories are filters itself and any category which is assigned to the Portfolio Post will be added in the filters list on the Portfolio Page.
In case of multiple Portfolio Pages only the categories will be displayed which are assigned to the Portfolio Posts on the current page

Now we know how to create Portfolio Posts. If you want to have working example of Single or Multiple Portfolio Pages, go ahead and create 4 posts with:

  • Title: Classic Music and Category: classic
  • Title: Rock Music and Category: rock
  • Title: Nature Photo and Category: nature
  • Title: Fashion Photo and Category: fashion

Portfolio Post

After all that we should get the same result as on this picture below:

4 Portfolio Posts

Portfolio Page

Hyper-X Theme supports Single and Multiple Portfolio Pages as well. For more information see step by step explanation below and be careful not to miss something.

Within your Dashboard navigate to Pages > All Pages > Portfolio (I consider you have already created one, if not go to Site Setup and see how to create a Portfolio Page). Here, on the Portfolio Page editing screen, under the content editor you should see Page Template: Portfolio metabox. This is a single option which controls whether to display all posts or posts from custom categories on the current page. It’s configured to display all posts¬†by default. If you want to have Single Portfolio Page skip this option and update the page.

From All Categories

But if you are going to have Multiple Portfolio Pages follow this steps:
This is only example, in your case you should select those Categories which you want your posts to be displayed from.

  • Set Display Portfolio Items From: to Custom Categories
  • Check classic and rock categories
  • Change Page Title from Portfolio to Music Portfolio
  • Update the Page

Music Portfolio

Repeat this process one more time and create Portfolio Page with Title: Photo Portfolio and check cateogries fashion and Nature. After all that navigate to Appearance > Menus and add newly created pages to our already existing menu.

Now if you’ve done everything right you should have 2 Portfolio Pages with 2 different posts on them.

  • Music Portfolio (from categories: classic, rock)
    • Classic Music (category: classic)
    • Rock Music (category: rock)
  • Photo Portfolio (from categories: nature, fashion)
    • Nature Photo (category: nature)
    • Fashion Photo (category: fashion)

Portfolio Single Advanced

Each Portfolio Post comes with its unique options. Majority of them are located below the Post Content Editor. Let me explain them in details:
Everything explained here is the same for Blog Posts as well.

Masonry Metro Layout metabox.

Masonry Metro Layout Metabox

Select Post Width option only works if in Theme Customizer > Portfolio(Blog) Page > General > Layout Mode is set to Metro (Masonry – Different Width). This is 3 columns layout and by default each Post has 1x column width, but with this option you can change them to 2x or 3x and the post size will increase accordingly.

  • 1x Width – 1 column.
  • 2x Width – 2 column.
  • 3x Width – 2 column (Full Width).

Post Formats metabox. About this I’ll talk later on here.

Portfolio Post Options metabox. Options in this metabox are actually self-explanatory.
Note! empty fields won’t be displayed.

Portfolio Post Options Metabox

If Project Info block is globally disabled from Theme Customzier you can enable it on several posts with Show Project Info option and also you can force it to be Sticked to the post content with Sticky Project Info option and whenever user scrolls down the page, Project Info will follow a browser scroll.

Information from the following fields will be displayed only on the Single Post page.

  • Project Description Title
  • Project Description
  • Project Details Title
  • Project Client
  • Project Link

Information from the following fields won’t be displayed on the Single Post page, but on the Portfolio Page for each post individually.

  • Testimonial Author
  • Testimonial Content

Portfolio Skills metabox. By default, is located on the right side of a screen. This is Portfolio Post meta information and will be displayed on the Single Post page in the Project Info block.

Portfolio Skills

You can take a glance on Video as well about how to setup portfolio pages and post, strongly recommended for beginners.


Was this article helpful?

Related Articles