Portfolio Options

Once the Portfolio plugin is installed – access the Portfolio Options via WordPress Admin > Portfolio > Add New or Edit an Existing Post > Scroll to the Tabs section.

Install Portfolio Plugin

To install the Portfolio plugin, goto WordPress Admin > Appearance > Install Plugins > Locate Portfolio Post Type > Click Install.

To access the global Portfolio options, goto WordPress Admin > Appearance > Customize > Portfolio.

General Tab

The General Tab consists of the following Page Options:

  • Display TitleUse this option to display or disable the Page Title
  • Alternative Page Title – If you wish to display an Alternative Title to the Page Title, use this option ( Ideal for having a different title from the Menu title )
  • Subtitle – Use this option to enter a Sub title for the page. This will appear directly below the Page Title text
  • Breadcrumbs – Override the global Breadcrumb option set in the Theme Options

Share + Related Posts

  • Share Post – Display or Disable Social Icons on this post
  • Related Posts – Display or Disable Related Posts on this post
  • Featured Image – Choose to display the Featured Image on this post

Layout Tab

The Layout Tab consists of the following Page Options:

General

  • Site Layout – Override the global Site Layout option, choose between Default, Wide or Boxed
  • Page Layout – Change the Page Layout for this page only. This overrides the default Page Layout set in the Theme Options
  • Column 1 Sidebar – If you have set a Page Layout to a layout which consists of a Sidebar, use this option to choose which Sidebar Widget Area to use for Column 1 ( Left Column )
  • Column 2 Sidebar – If you have set a Page Layout to a layout which consists of a Sidebar, use this option to choose which Sidebar Widget Area to use for Column 2 ( Right Column )

Header / Menu

  • Dock Bar – Choose to Display or Disable the Dock Bar on this page
  • Header Display – Choose to Display or Disable the Header on this page
  • Sticky Header – Enable or Disable the Sticky Header on this page
  • Horizontal Layout – Override the global Header Horizontal Layout for this page
  • Vertical Layout – Override the global Header Vertical Layout for this page
  • Logo Top Margin – Set the Logo Top Margin for this page ( Space above the Logo )
  • Logo Bottom Margin – Set the Logo Bottom Margin for this page ( Space below the Logo )
  • Menu Top Margin – Set the Menu Top Margin for this page ( Space above the Menu )
  • Menu Bottom Margin – Set the Menu Bottom Margin for this page ( Space below the Menu )
  • Floating Header – Set the Header to Float over the page content. Float + Transparent will remove the Background Color / Image
  • Title / Breadcrumbs Layout – Change the Page Title & Breadcrumbs Alignment for this page
  • Menu – Choose a different Menu for this page

Footer

  • Footer – Enable or Disable the Footer for this page

Social

Choose to Display the Dock Bar Social Icons on this page. Select which icons you wish to display or disable.

Skin

Use this option to display an alternative Skin for this page.

Portfolio

Use the Portfolio tab to set the Parent Portfolio Page for this post. When the “back to Portfolio” page links are clicked – including breadcrumbs, it will take the user back to the page set here. If no parent page is set, it will use the Portfolio Archive page as a parent.

This option will override the global option set via WordPress Admin > Appearance > Customize > Portfolio > Parent Portfolio Page.

Media

Use these options to add a Video or Audio to a post. The Media Tab consists of the following Post Options:

  • Media URLEnter the URL of the Video or Audio file ( YouTube & Vimeo is supported too ) – use oEmbed and you’ll need to set the Post Format to Video or Audio

Additional

The Additional Tab consists of the following Post Options:

  • Alternative Link – If you require to link the post to another URL, enter an alternative URL here
  • Disable Link – Disable the post from linking anywhere
  • CSS Classes – Enter CSS classes to help with Custom styling

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.