How to Create a Portfolio Page

Learn how to create Portfolio Posts, assign them to Categories and create a Portfolio Page with Filtering.

Creating a Portfolio Page Video Tutorial

Learn how to create a Portfolio Page using this video tutorial.

STEP 1.

Install Plugin
Ensure the Portfolio Plugin is installed – to install the Portfolio plugin, goto WordPress Admin > Appearance > Install Plugins > Locate Portfolio Post Type > Click Install.

STEP 2.

STEP_2-3.png

Create Post
Let’s create our Portfolio Posts. Goto WordPress Admin > Portfolio > Add New Item > Once the page has loaded Enter a Post title.

For this stage, we need to ensure we see the Visual Composer Editor buttons are displayed.

If you can not see buttons in the diagram above, goto WordPress Admin > Visual Composer > General Settings > Role Manager > Post Types ( assuming you’re administrator ) > Ensure Portfolio is Checked.

STEP 3.

STEP_3-4.png

Adding Content
Next, we need to add content to our Portfolio Post. We’ll use the Visual Composer to do this.

You can use the many Elements to add content to the post – at this stage we have a few choices – see diagram for reference.

  1. Backend Editor – Click the Backend Editor to start adding Elements to the post
  2. Frontend Editor – Click the Frontend Editor button to start adding Elements to the post on the Frontend of your site ( Add / Edit Elements in real-time )
  3. Use Demo Portfolio – Click the Text view button and paste in the HTML from the Classic Demo ( See below ).

Use Demo Portfolio
If you would like to use the format used on the Classic Demo and have not installed the Demo Content ( recommended ) you can use the following steps to paste the HTML from the demo into the post:

  1. To do this, click the Text view button ( see diagram )
  2. Copy all of the following HTML from this File
  3. Paste the HTML into the Editor field ( See arrow in diagram )

Once you have pasted the HTML into the Editor field, follow these steps:

  1. Click the Visual button
  2. Click the Backend Editor button
  3. You should now see all of the content on the Post and you can edit it with your own text and images

 

 

STEP 4.

STEP_4-2.png

Assign Post to Categories
Once we’re happy with our Portfolio Post content, we can assign the Post to a Category. This is essential if you wan to use Animated Filtering to filter your Portfolio posts by Category.

To add a post to a Category, follow these steps, see the diagram above for reference.

  1. Locate the Portfolio Categories section of the post.
  2. Click + Add New Portfolio Category
  3. Enter the Name of your Category
  4. Click the Add New Portfolio Category
  5. Select the Categories you wish to assign this Portfolio Post to
  6. Click Publish

STEP 5.

STEP_5-1.png

Create a Template
If you would like to use the same format for all your other Portfolio Posts, you can save the Portfolio Post you’ve just created as a Template. This will save you time and keep your Portfolio Posts consistent.

To create a Template, follow these steps – see diagram for reference:

  1. Whilst editing the post you wish to create a Template from, click the Templates Icon
  2. Give the Template a Name e.g. My Portfolio Template
  3. Click Save Template

STEP 6.

STEP_6-1.png

Load a Template
If you wish to load a template you’ve created or one of the default templates, create a new Post and follow these steps:

  1. Click the Templates Icon,
  2. Goto the Default Templates tab
  3. Search for your Template e.g. My Portfolio Template
  4. Hover over your Template
  5. Click the + icon or template name to add the template to the post

STEP 7.

STEP_7-2.png

Create the Portfolio Page
Once you have created all of the Portfolio Posts, it’s time to create the Page which displays them all. Follow these steps to create a Portfolio Page and add an element to the page.

  1. Goto WordPress Admin > Pages > Add New > Once the page has loaded Enter a Page title
  2. Enable the Visual Composer Backend Editor or Frontend Editor
  3. Click + Add Element

STEP 8.

STEP_8-1.png

Choosing a Gallery or Slider
We’re going to use the Visual Composer again to create a Gallery or Slider to display our Portfolio Posts. Follow these steps to add a Gallery to the Page.

  1. Once you’ve clicked the + Add Element button, you’ll see all of the Elements within Visual Composer
  2. All of the Elements you can use for a Portfolio page are highlighed in the diagram above
  3. For this example, we’re going to select the Grid Gallery

STEP 9.

STEP_9.png

Select Image / Media Source
Next we need to select the source of our Grid Gallery content, in this case our Portfolio Posts. Follow these steps to select our Portfolio posts and use the diagram for reference:

  1. Select Build Query from the Select Image / Media Source select box
  2. Click the Build Query button
  3. Select Portfolio Post type
  4. Enter All to display all posts
  5. Goto the Taxonomies field,
  6. Start typing the Name’s of the Categories you created in STEP 4. )
  7. Once it finds a match, click the Category Name

STEP 10.

STEP_10.png

Configure the Gallery or Slider
Once we’ve selected the Source, all that’s left to do is configure the Gallery or Slider to suit your content. For this example, I’ve used the settings in the diagram above:

  1. Image Size – large
  2. Content – Title on Hover + Image
  3. Columns – 3 Columns
  4. Animated Filtering Click to Filter – this displays our Categories at the top of the page which we can click on to filter.
  5. Masonry – Enabled – if you content has different sized content, this option fits the content together with equal spacing

If you’re using the Frontend Editor, you can experiment with the settings to see what works best for you. Once you’re happy with the settings, click Save Settings and click Publish on the page.

STEP 11.

STEP_11.png

Assign to Portfolio Parent Page
Once you’re happy with your portfolio page, you can assign it as a Portfolio Parent Page. This means when the icon above is clicked or Portfolio is clicked in the Breadcrumbs, it will take the user back to the Portfolio Page you’ve created.

Assign the page via WordPress Admin > Appearance > Customize > Portfolio > Portfolio Parent Page.