Tutorials

How to create Portfolios

The purpose behind Portfolios is to add multiple projects with the use of additional details and essentially to help showcase your work.

Portfolios can serve many purposes, such as:

  1. Showcase your past and current Projects.
  2. Showcase your photography sessions.
  3. Showcase your traveling / adventures.
  4. Outside the box usage: Shopping Carts.
  5. Outside the box usage: Product Display.

The possibilities are limited only to your imaginations.

Often we’re asked, “What is the difference between Galleries and Portfolios” and we’ve created a specific post that explains that in detail.

Portfolios are quite simple to use and we’ll explain how now.

Creating Portfolio Categories

The first thing you want to do when creating a Portfolio is to “Create Your Categories” for the use of the Portfolio Items you will publish.

This Portfolio Categories will help in categorizing your items, but more importantly, they’re used to create your Portfolio Pages specifically.

In this tutorial, we’ll create a “Photos” and “Videos” portfolio.

So first, head to your WordPress Dashboard, locate the “Portfolio” sidebar item and when it expand to show more, click on “Categories”.

Create your desired Portfolio categories, ie., “Photos” and “Videos”.

Creating the Portfolio Page

Next we want to create the “Page” that will house those two individual Portfolio categories. So find the “Pages” menu item, select “Add New”.

Inside this new page we’re creating, we will give it a title, ours will be “Photos”. Afterward, you will repeat the steps for the “Videos” page.

Next, in the right side column, locate “Page Attributes” and here you will see a drop-down for Page Templates and select the “Portfolio Page”.

Now so far, we’ve given this page a “Title” and informed the page when published it is to be a “Portfolio Page” and will call the Portfolio items.

Next we will go to the “Write-Panel” options, located just beneath the “Content / Text Editor” and you will see it says “KingSize Page Options”.

The first item you will see here is “Portfolio Categories”. It is important you have created the Categories for your portfolios previously as explained, otherwise no categories will be displayed here. If you have completed the steps in order, you should already see listed “Photos” and “Videos”. For this page, we’ll be using the “Photos” Category.

Portfolio Page Options

Beneath this, you will see “Portfolio OrderBy” and this allows you to assign a specific order to your Portfolio items on this page.

Your choices are:

Default: DESC by Date* – this basically means they will show in order of the date posted from the most recent to the oldest portfolio item added.

*If you do not select an order, this above will be default.

Random Order: This will list the items at random each time the page is reloaded. Your portfolio items will always appear in a random order.

Custom ID Order: This allows you to organize your portfolio items in order of preference. When creating a Portfolio item, you can assign it an “ID”. For example, “1, 2, 3, 4…” and they will appear on the page created in that specified order you have assigned them to display as.

ASC by Date: will display the posts in order of oldest to most recent.

Additionally, you can define the “Page Background” custom to that page by uploading it within the write-panel options, either using a Video or Image background. Beneath these will follow options corresponding with your background selection to either “hide the navigation and body” to show the fullscreen video, or etc.

Creating your Portfolio Items

Now that we have created our Portfolio Page and Categories, we want to continue on by adding our newly created Portfolio Items / Posts.

Inside your Dashboard, locate the “Portfolio” menu and select the “Add New” option when it expands out with the sublevel menu options.

First we’ll add our Portfolio Post Title.

Next we’ll select “Photos” as our category (this means it will now show up in that Photos Portfolio Page we’ve previously created above).

Using the Content / Text Editor, you can add in your desired contents.

Portfolio Item Write-Panel Options

Beneath the Content / Text Editor, we again will find our “Write-Panel” with options pertaining specifically to this Portfolio Item we’ll be creating. By default, none of these items are required to be used, but in order to use the Portfolios to serve their full purpose, a few of these options would likely be necessary for your usage.

Background: If you want to use a custom background image, you would attach / insert the link to that image here.

Custom Read More Text: This allows you to add in your own text to override the default for that specific portfolio item (ie., Read More).

Custom Read More Link: Should you wish to link this to something else (ie., Clients Website, etc), then you would insert the link. By leaving this blank it will link directly to the Portfolio Item you have just created.

Disable the Read More Button: If you don’t want this button, disable it.

Lightbox on Portfolio Item: By default, lightbox is enabled on the thumbnails in the Portfolio page. However should you wish to disable this you can by selecting disable here.

Background Slider Category ID: This is used if you want a Background Slider on this specific page. This corresponds with the Slider post-type. Just insert the ID of the Slider Category you want to use and this post will then use that Slider you’ve specified for this post.

Custom Portfolio Background Video: You can insert the URL of a video you may wish to use for the background of your Portfolio Item.

Custom Video Background Options: Beneath the video URL option you will have corresponding options available.

Photo vs Video Portfolio Usage

When creating a Portfolio Item, you are either creating it for “Videos” or “Photos”. You can select one or the other for each Portfolio Item.

Photo Portfolio Items

Continuing where we left off in the write-panel options, next you will see “Image/Photo Portfolio Thumbnail Settings“.

This area is specific to Images / Photos and is not to be used when creating Portfolio Items for the purpose of Videos.

Here we will select the Photo or our choice for the use of the Portfolio Item we are creating. Select an image from your computer using the “Browse” button. This image will be used as the Portfolio Item thumbnail, but will also be appearing in the lightbox when that item is clicked (of course, that is if you’ve enabled lightbox).

Adding More Lightbox Images for Photo Portfolio Items

Wish to display more than just one image when lightbox is opened in the Portfolio Page? Have you multiple images you wish to showcase? To add more images, simply click the “Upload / Insert” button and attach more images to this post. Do not insert them into the post. Just attach them to it and they will display in the lightbox when clicked as it has been designed to pull attachments from this portfolio item.

Video Portfolio Items

Using the write-panel section labeled “Video Portfolio – Thumbnail & Video Settings” you can upload a thumbnail for your Portfolio Item and also insert the URL for the video you’re wanting to use for this item.

For the use of Vimeo and YouTube, simply copy and paste the URL into the appropriate field. For Flash, HTML5 and other formats, use the “Embed” box to insert your embed codes.

Conclusion of the Portfolio Tutorial

It is our hopes that with all the details provided above, you will have a clear understanding of how Portfolios work. Should you have issues or misunderstandings of how these work, please do not hesitate to write us. Additionally, be sure to checkout the Video Tutorials we’ve included.