Portfolio Designer WordPress Plugin Documentation

Introduction

Thank you for the activation of Portfolio Designer Plugin. We are glad that you have chosen our plugin for your website.

Portfolio Designer is a powerfull portfolio designer WordPress plugin to created especially for portfolio display. This plugin is Fully Responsive and Mobile-Friendly with Powerful backend options. Your site will get ready for set up and customize in a minute using it’s fantastic One Click Installation feature.

This document written very carefully by keeping mind set that it should be easy understand for Beginner to Advance user or developers. We have divided this document in 3 main section.

1) Getting Started : This section will very help full for Quick start and understand how plugin works
2) Detailed Document : This section explains every thing about Portfolio Designer plugin with every settings.
3) Other : This section provides information about miscellaneous item like plugin features, FAQ, License Key etc.

If you have any query that is beyond the scope of document, please feel free to contact us at support@solwininfotech.com

Portfolio Designer
We offer plugin customization. Get in touch for a quote.
Quick Search Tip: Access your browser search with keyboard shortcut "Crtl+F" (Windows) or "CD+F" (OSX) for instant results.

Installation

1. Installation Via WordPress Admin area

  1. Step 1. Log into your WordPress admin area.
  2. Step 2. Click on the left side plugin menu.
  3. Step 3. Now at the top you can see the Add New button, click the button.
  4. Step 4. Again at the top you can see/view Upload Plugin button, click the button.
  5. Step 5. Now upload the plugin zip file (portfolio-designer.zip) that you have downloaded from your members area at Solwin Infotech website. After upload, install the zip and click on "Activate Plugin".

Plugin Installation

Fig. 1.0 Plugins List

Plugin Upload

Fig. 1.1 Plugin Upload

Plugin Install

Fig. 1.2 Install Uploaded Plugin

Plugin Activation

Fig. 1.3 Active Installed Plugin

2. Installation Via FTP

  1. Step 1. Download Portfolio Designer plugin zip file (portfolio-designer.zip) from your members area at Solwin Infotech website.
  2. Step 2. Extract Zip file. it will create "Portfolio Designer" folder with all plugin files & folder inside it. (Remember extracted folder path)
  3. Step 3. Using your FTP program, upload the non-zipped plugin folder into the "/wp-content/plugins/" folder on your server.
  4. Step 4. Go to Dashboard » Plugins » Installed Plugins and find Portfolio Designer from plugin list.
  5. Step 5. Click on Activate to activate Portfolio Designer.
Before going to the detail document, preview the Quick Guide of the Portfolio Designer.

Quick Guide

Quick guide will help you to easily setup your portfolio layout in 3 easy steps within 1 to 2 minutes. we have make it more easier as you can setup only in 2 Steps.

Please follow this quick steps given below.

Create a new Page

Create a new portfolio layout

Please follow below steps.

Detail Document

Create a New Layout

  1. Step 1. Go to Dashboard » Portfolio Designer
  2. Step 2. Click on "Create New Portfolio Layout" Button OR click on "Add Layout" menu link.
  3. Create new layout
  4. Step 3. Fill all the settings as per your preferences.
  5. Step 4. Click on "Save Changes" button at bottom of page. And Enjoy the Portfolio Layout.

General Settings

General Settings

Fig.3.0 Portfolio General Setting

1. Portfolio Name

Unique layout name to identify your portfolio layout on listing page.

2. Select Post Type for Portfolio

Select type of posts which you wants to use as a Portfolio Layout.

Query Settings

Query Settings

Fig.3.1 Portfolio Query Setting

1. Select Taxonomy Type to Filter Posts

Here Portfolio Designer provide taxonomy selection that you should use in post query and post filtering like Category, Tags.

2. Select Terms to Filter Posts

By selecting terms it will display only selected items in layout.

NOTE : If you will not select any terms for filtration then it will show all posts.

3. select Post

Using this option you can Select particular post for your portfolio item.

4. Order

Using this option you can set your portfolio item by name and values as according to Ascending and Descending order.

5. Order By

By Selecting below listed parameter you can sort portfolio items as.

  • Order By: Author
  • Order By: Comment Count
  • Order By: Date
  • Order By: ID
  • Order By: Modified date
  • Order By: Name
  • Order By: Title
  • Order By: Random

Layout Settings

Layout Settings

Fig.3.2 Portfolio Layout Setting

1. Layout Type

Portfolio Designer provide you three type of layout like below.

  • Grid Layout
  • Masonary Layout
  • Slider Layout

2. Column Layout

Set column layout with 6 different styles .

  • 1 Column Portfolio Layout
  • 2 Column Portfolio Layout
  • 3 Column Portfolio Layout
  • 4 Column Portfolio Layout
  • 5 Column Portfolio Layout
  • 6 Column Portfolio Layout

3. Column Spaces

To add space between two portfolio item Horizontally.

4. Row Space

To add space between two portfolio item Vertically.

Thumbnail Settings

Thumbnail Settings

Fig.3.3 Portfolio Thumbnail Setting

1. Select Thumbnail Size

Select preferable resolution of thumbnail image for portfolio items.

NOTE : The original resolution is loaded if a thumbnail size doesn't exist in an image.

2. Select Default Image

Upload default image for your portfolio items.

NOTE : If there is no any default image, it will show uploaded default image.

3. Image Overlay Effect

Select the checkbox to apply hover effect on portfolio images.

4. Select Content Position

Select portfolio content position in four different position.

  • Overlay on Image
  • Bottom of Image
  • Left Side of Image
  • Right Side of Image

5. Select Mouse Hover Effect

This plugin provides more then 35+ Image Hover Effects like below instead of.

  • Depth Zoom Out
  • Overlay Slide
  • Corner Slide
  • Rotating Zoom Out
  • Right Corner
  • Left Corner
  • Depth Zoom In
  • Depth Zoom Out
  • Depth Rotator
  • Rotator
  • Slide Top
  • Slide Right
  • Slide Bottom
  • Slide Left
  • Enclose ZoomIn
  • Enclose ZoomOut
  • Enclose FaddeIn
  • Enclose FaddeOut
  • Overlay Top
  • Overlay Right
  • Overlay Bottom
  • Overlay Left
  • Overlay ZoomOut
  • Expand
  • Flyer Top Left
  • Flyer Top Right
  • Flyer Bottom Left
  • Flyer Bottom Right
  • Skate Top
  • Skate Bottom
  • Shift Top
  • Shift Bottom
  • Door Slide
  • Reducer
  • Retard Top
  • Retard Bottom
NOTE : Image Effect option only available when Image Overlay Effect is selected.

7. Display Summary in Words

It will display number of word in portfolio item Summary as description.

NOTE : Set ZERO for disable summary.
NOTE : Display Summary option only available on when Image Overlay Effect is selected.

8. Show Image Popup Link

It is providing options to show portfolio item image in full size in popup box.

9. Project URL Open In

It is providing options like Disable link or open in same tab or new tab.

NOTE : This will work only for custom post type generated by this plugin, on image hover.

Filter Setting

Filter Setting

Fig.3.4 Portfolio Filter Setting

1. Enable Filter

By selecting checkbox you enable filtration on front end.

NOTE : If filter enable then pagination not apply.

2. Text of "Show All" filter tag

Enter text that you want to display for "Show All" filter tag.

NOTE : If you will set blank then default text will be "Show All".

Pagination Setting

Pagination Setting

Fig.3.5 Portfolio Pagination Setting

1. Enable Pagination

Pagination will show, if post count is larger then number of selected post.

NOTE : Enable pagination if your post count is larger than the "Number of posts" option.

2. Pagination Type

Portfolio designer provide you three type of paginations like below.

  • Pagination (simple Pagination)
  • Load More Button (by clicking on button it will display another port folio item on same page)
  • Auto Load (By scrolling page it will display automatically)

Social Share Setting

Social Share Setting

Fig.3.6 Portfolio Social Share Setting

1. social share Links

Select checkbox to display social share icons in front.

2. Social Icon Display Position

This option will display all social icon in selected position like below.

  • Before Loop (Show all social icons before portfolio items)
  • After loop (Show all social icons after portfolio items)

3. Select Social Icon Alignment

you can set social icon in three different position like below.

  • Left
  • Center
  • Right

4. Select Social Share Style

select icon style from social share style.

5. Select Shape of Social Icon

select icon shape from social share shape option.

6. Select Size of Social Icon

select icon size from social share size of icon option.

7. Facebook Share Link

To set Facebook social share count.

8. Twitter Share Link

To set Twitter social share .

9. Google+ Share Link

To set Google+ social share count.

10. Linkedin Share Link

To set Linkedin social share count.

11. Pinterest Share Link

To set Pinterest social share count.

12. Share Via Mail

To share portfolio via E-mail link.

13. WhatsApp Share Link

To share portfolio via whatsapp link.

1. Social share count position

To set social share count position like below.

  • Bottom
  • Right
  • Top

Style Setting

Style Setting

Fig.3.7 Portfolio StyleSetting

1. Select Title Font Family

Select Font style for post titles.

2. Select Title Font Size

Select Font size for post titles.

NOTE : If want to default font size set value ZERO.

3. Select Title Font Color

To set title font color.

4. Select Content Font Family

To set post excerpt and post Contents font style.

5. Select Content Font Size

To set post excerpt and post Contents font size.

NOTE : If want to default font size set value ZERO.

6. Select Content Font color

To set post excerpt and post Contents font color.

7. Select Meta Font Family

To set post excerpt and post Meta font style.

8. Select Meta Font Size

To set post excerpt and post Meta font size.

NOTE : If want to default font size set value ZERO.

9. Select Meta Font color

To set post excerpt and post Meta font color.

10. Filter Text Padding

To set filter text padding.

11. Filter Text Border

To set filter text border and border color.

12. Filter Text & Border Hover Color

To set filter text and border on mouse hover.

13. Filter Text Background Color

To set filter text background color.

14. Select Meta Font color

To set post excerpt and post Meta font color.

15. Filter Text Background Hover Color

To set filter text mouse hover background color.

16. Select Button Font Family

To set Button font style.

17. Select Button Font Size

To set Button font size.

NOTE : If want to default font size set value ZERO.

18. Select Button Font color

To set Button font color.

19. Select Button Background color

To set Button background color.

20. Select Content Background Color

To set portfolio content background color.

21. Select Image Background Color

To set portfolio image background color.

22. Select Image Hover Background Color

To set portfolio image mouse hover background color.

23. Custom CSS

To add extra CSS to particular tag or any html section .

Ex. .class_name{ color:#000000; }

Create a New Custom Post Type

  1. Step 1. Go to Dashboard » Portfolio Designer » Custom Post types
  2. Step 2. Click on "Create New Post types" Button.
  3. Create New Custom Post Type
  4. Fig.5.0 Create New Custom Post Type

Custom Post Type Name and Slug

Custom Post Type General settings

Fig.6.0 Custom Post Type General settings

1. Custom Post Type Plural Name

Using Custom Post Type Plural Name user can set name for the post type(e.g. Portfolio).

2. Custom Post Type Singular Name

Using Custom Post Type Singular Name user can set name for the post type(e.g. Portfolio post).

3. Custom Post Type Slug

Enter custom post type unique slug name like an post type id (e.g. portfolioname).

NOTE : enter slug name in small letters without include any spaces.

4. Custom Post Type Icon

Select icon for your custom post type which is display on your wordpress dashboard menu.

Custom Post Type Taxonomy Setting

Custom Post Type Taxonomy Setting

Fig.6.1 Custom Post Type Taxonomy Setting

1. Create Custom Category

Select checkbox to register new custom category for new custom post type.

2. Custom Category Name

Enter new custom category name

3. Custom Category Slug

Enter new custom category slug (e.g. categoryname).

NOTE : enter categort slug name in small letters without include any spaces.

4. Create Custom Tag

Select checkbox to crate new custom tag name for new custom post type.

5. Custom Tag Name

Enter tag name for the new custom post type.

6. Custom Tag Slug

Enter new custom tag slug name (e.g. tagname).

NOTE : Enter tag slug name in small letters without include any spaces.

7. Select Additional Taxonomies

Using this option user can select additional taxonomies which is registered for the other post type.

Custom Post Type Metabox Setting

Custom Post Type Metabox Setting

Fig.6.2 Custom Post Type Metabox Setting

1. Gallery Image Upload

By selecting this checkbox it will provide gallery Metabox to upload gallery images in custom post type.

2. Link URL

By selecting this checkbox it will provide Link URL Metabox to add portfolio link in custom post type.

3. Custom Fields

By selecting user can add Custom Fields in custom post type.

Custom Post Type Single Post Setting

Custom Post Type Single Post Setting

Fig.6.3 Custom Post Type Single Post Setting

1. Select Single Post Layout

You can set 4 types of custom post type single page layout listed below.

  • Full width Slider
  • Column Portfolio Layout
  • Column Layout Full Images
  • Column Layout With slider

Single Post Layout with Full Width Slider

Single Post Layout with Full Width Slider Setting

Fig.6.3.1 Single Post Layout with Full Width Slider Setting

1.Select Single Post Layout

Select Full With slider types option to apply full width slider on single page.

2. Select Slider Height

Set slider height in px ex: 300px.

NOTE : To set auto image height set zero(0) in text box.

3.Slide Looping

Select check-box to set infinite looping for slider.

4.Autoplay

Select check-box to set autoplay for slider.

5.Slide Speed

Set timeout duration between slides in milliseconds ex: 3000.

6.Slider Navigation

Select check-box to display navigation button in bottom of the slider.

7.Slider Controls

Select check-box to display left or right slider control button on front of slider.

8.Custom Fields Box

Select check-box to display custom fields on portfolio post page.

9.Select content layout

Select sidebar position to display in portfolio post layout like below.

  • Withoput Sidebar
  • Left Sidebar
  • Right Sidebar

10.Select Sidebar Width

Select sidebar width for portfolio post layout like below.

  • 1/3 ( width: 33% )
  • 1/4 ( width: 25% )

11.Select sidebar

Select sidebar name to display on portfolio single post oage.

12.Social Share Links

Select check-box to display social icons on portfolio post page.

13. Select Social Icon Alignment

You can set social icon in three different position like below.

  • Left
  • Center
  • Right

14. Select Social Share Style

Select icon style from social share style.

15. Select Shape of Social Icon

Select icon shape from social share shape option.

16. Select Size of Social Icon

select icon size from social share size of icon option.

17. Facebook Share Link

To set Facebook social share count.

18. Twitter Share Link

To set Twitter social share .

19. Google+ Share Link

To set Google+ social share count.

20. Linkedin Share Link

To set Linkedin social share count.

21. Pinterest Share Link

To set Pinterest social share count.

22. Share Via Mail

To share portfolio via E-mail link.

23. WhatsApp Share Link

To share portfolio via whatsapp link.

24. Social share count position

To set social share count position like below.

  • Bottom
  • Right
  • Top

25. Related Post

To display related post in portfolio post page.

26. Related Post Title

To display related post title in portfolio post page.

27. Select Mouse Hover Effect

To apply mouse hover effect on portfolio post page select hover effect from drop-down list.


Single Post Layout with Column Layout

Single Post Layout with Column layout Setting

Fig.6.3.2 Single Post Layout with Full Width Slider Setting

1.Select Single Post Layout

Select Column Layout types option to apply column layout on single page.

2.Custom Fields Box

Select check-box to display custom fields on portfolio post page.

3.Select content layout

Select sidebar position to display in portfolio post layout like below.

  • Withoput Sidebar
  • Left Sidebar
  • Right Sidebar

4.Select Sidebar Width

Select sidebar width for portfolio post layout like below.

  • 1/3 ( width: 33% )
  • 1/4 ( width: 25% )

5.Select sidebar

Select sidebar name to display on portfolio single post oage.

6.Social Share Links

Select check-box to display social icons on portfolio post page.

7. Select Social Icon Alignment

You can set social icon in three different position like below.

  • Left
  • Center
  • Right

8. Select Social Share Style

Select icon style from social share style.

9. Select Shape of Social Icon

Select icon shape from social share shape option.

10. Select Size of Social Icon

Select icon size from social share size of icon option.

11. Facebook Share Link

To set Facebook social share count.

12. Twitter Share Link

To set Twitter social share .

13. Google+ Share Link

To set Google+ social share count.

14. Linkedin Share Link

To set Linkedin social share count.

15. Pinterest Share Link

To set Pinterest social share count.

16. Share Via Mail

To share portfolio via E-mail link.

17. WhatsApp Share Link

To share portfolio via whatsapp link.

18. Social share count position

To set social share count position like below.

  • Bottom
  • Right
  • Top

19. Related Post

To display related post in portfolio post page.

20. Related Post Title

To display related post title in portfolio post page.

21. Select Mouse Hover Effect

To apply mouse hover effect on portfolio post page select hover effect from drop-down list.

Import & Export

1. Import

  1. Step 1. Go to Dashboard » All Layouts.
  2. Step 2. Click on Import Portfolio Layout button.
  3. Step 3. Click on Brows button and choose .txt file to import layouts.
  4. Step 4. Now, click on Import Layout button.

Import Admin Screen

Fig.7.0 Import portfolio items

2. Export

  1. Step 1. Go to Dashboard » Portfolio Designer.
  2. Step 2. Now click on particular layout export button to export displayed in below image.
Export Admin Screen

Fig.7.1 Export portfolio items

Other

One Click Installation

1. Demo Installation

  1. Step 1. Go to Dashboard » Portfolio Designer.

    Select any one option from Add Sample Post Types

    • 1. Create Sample Post Type only

      It will create only sample post type.

    • 2. Create Sample Post Type with Dummy Data

      It will create sample post type with sample data(sample portfolio post in post type).

    Select option from Add Sample Layouts

    • 1. Create Portfolio Layout Shortcode (3 Layouts)
  2. Step 2. Now click on One Click Installation button displayed in below image.
  3. Wait for a while it will show notification when it will done.

One Click Installation

Fig.8.0 One Click Installation

Portfolio Designer plugin features

FAQ

1. How portfolio designer plugin can setup?

To setup portfolio designer setup please visit this link Quick Guide , it will helps you to make setup your first portfolio layout

2. How custom post type can be setup?

To setup custom post type in portfolio designer please visit this link Create New Custom Post Type , it will helps you to create your first Custom Post Type

3. What to do if you get the Fatal Error like "Cannot declare class lessc_formatter_compressed, because the name is already in use" ?

If you get the Fatal Error like above when activate the Portfolio Designer Plugin, then contact to your theme developer.

4. Portfolio custom post type not display after create in portfolio designer?

After creating any custom post type in portfolio designer plugin you should have to save permalink from wordpress settings.

After saving permalink your custom post type will display on your dashboard.

5. Is it possible to overwrite Single page with a portfolio designer pro? How?

yes, it is possible to overwrite Single page with portfolio designer.

Here the instruction

  • Create "portfolio-designer" folder in active theme directory.
  • Now go to portfolio designer plugin directory.
  • Copy 'single' folder and paste it to active-theme/portfolio-designer/

License Key

How To get License Key?

  1. Step 1. Go to solwininfotech.com
  2. Step 2. Login with your username and password (If you are not logged in) OR Register
  3. Step 3. Go to My account
  4. Step 4. Click on "Payment History" tab
  5. Step 5. View your order
  6. Step 6. Copy "License Key" from there

Once you have added your license key with Portfolio Designer Plugin then you will get your next Portfolio Designer Plugin update notifications in your WP Admin area automatically. With the help of update notifications, you can update your Portfolio Designer Plugin any time.

Update Portfolio Designer Plugin

You can update Portfolio Designer Plugin using 1 of the two ways below

1. Update plugin manually


2. Update plugin using Plugins Screen via license key

Verify your License key to get automatic update.

How to get license key? Follow the below steps and get your unique license key of your purchase.

Go to Dashboard » Portfolio Designer » License key

License Key

Fig.9.0 Add License Key

Thanks for using Portfolio Designer Plugin!

We would like to thank you for using our Portfolio Designer Plugin! If you have any difficulties with Portfolio Designer Plugin or need any additional service, do not hesitate to contact us. We provide priority support with our all premium WordPress themes and plugins.

Just contact us on support.solwininfotech.com

We are very happy to assist you!

Credits

I've used the following jQuery Plugins as listed.

  • Chosen - Chosen is a jQuery plugin that makes long, unwieldy select boxes much more user-friendly.
  • SocialShare.js - jQuery plugin for creating custom like buttons and like counters.
  • SlikSlider - An awesome, fully responsive jQuery slider plugin.
  • Aristo - The "Aristo" theme for Cappuccino ported to a jQuery UI Theme.
  • Font Awesome - The iconic font and CSS toolkit.