Installing the Plugin
a3 Portfolio is available for download for free from wordpress.org. It can also be installed directly from your WordPress plugins dashboard. Click Add New on the plugins menu and type the search term a3 portfolio. Install the plugin once it appears.
Once you have the plugin installed and activated it adds the a3 Portfolio menu to your WordPress admin page menu. It looks like this when you hover over or click on a3 Portfolio.
The first thing to do is to create some Portfolio Items. Once that has been done we can then look at how the Portfolio should display on the front end.
Add a New Item
a3 Portfolio allows you to create an unlimited number of Portfolio Items. Items are WordPress custom post types and hence if you know how to create a WordPress post then you know how to create a Portfolio Item which a few extra features.
This is the item post title. It will also show as the title on the Item Card either under the card on when a user moves their mouse over the card (depending on which option you have selected in the General Settings)
Use the WordPress text editor to add your description (just like posts). The description shows on the item expander on the front end and also in the post.
Tip: If you only want a part of the description to show on the item expander (if you have a lot of text) use the WordPress text editor ‘Read More Tag’ to break the text where you want it broken. Only text above the —– more —- will show in the item expander with a Read more link to the post. See image
Each Portfolio item has it’s own gallery. You can upload any number of images via the Portfolio Item Meta section that is found under the WordPress text editor. Click the ‘Add portfolio gallery images’ link and the WordPress Image uploader will open. You can upload images or use any image from your WordPress media Library. When the images are selected or uploaded click the Add to Gallery button (bottom right corner of the WP medi uploader pop-up and you will see the image thumbnails in the Portfolio Gallery meta box. See image
Item Main Thumbnail
The first image in the thumbnails will be used as the item Card image on the front end. You DO NOT have to set it as the feature image.
Sort Image Order
Sort the order of the images in the Item gallery by drag and dropping the thumbnails in the Portfolio Gallery meta box. You will also see an delete X show on each thumbnail when you mouse over it. This allows you to easily and quickly remove images from the gallery (does not delete the image from your media Library).
You will see the second item on the Portfolio Item Meta menu is ‘Layout’. Important ! The layout settings apply for users who’s post content width is greater than 762px. When the post width is greater than 762px the default layout expands to Main Gallery image LEFT and Taxonomy, description to the right. Under 762px and the layout is Main image top with thumbnails under the main image and then the Taxonony – description.
For users with post content wider than 762px there are 2 elements that you can control on a post by post basis. These elements are set in the General Settings menu and whilst they apply to all Portfolio Item posts they can be over-ridden on any item post.
Main Image Width – This is the width of the Gallery main image as a percentage of the Theme post content width.
Gallery Thumbnail Position – Options are RIGHT or BELOW and both are relative to the Gallery main image.
The image below shows the Item post on a page that has no sidebar and is 830px wide (greater than 762px wide) with the layout settings Main Image Width 40% and Gallery Thumbnails positioned below.
The next image is the same Portfolio Item Meta > Layout settings – but the post has a Sidebar and hence the content section of the post is less than 762px wide. See how the content auto wraps below the gallery for an enhanced display – especially in tablets in portrait view.
Feature Data are data that is common to a number of Portfolio items. Fields that are created in the Feature Data menu are shown in the Portfolio Item Meta Feature Data menu. This allows you to add values specific to the portfolio item that is being created and link the value to a Portfolio Tag or to any URL. The Feature data menu lists all Feature data Fields that have been create with an Expand / Collapse feature for enhanced UI. Leave a Field blank and it will not show on the front end.
Feature Data in Collapse state.
Feature Data Expand Single Field
The Button shows under the description in the Item Post and on the Item Expander. Add a link to any URL, Add custom button text and set how the link should open – default is open in the same window. Leave the fields empty and the button does not show. See image
Portfolio categories meta can be found in the right sidebar of the Item post edit page just like WordPress post categories. The meta box works exactly the same, assign the item post to a category and create new categories. See image
Portfolio categories have other important functions – visit the Portfolio Categories section to read about those.
Portfolio Tags meta can be found in the right sidebar of the Item post edit page just like WordPress post Tags. The meta box works exactly the same, add new Tags or choose from the most used tags. See image.
There is no need to set an image as featured. The image that is first in the Portfolio Item Meta > Portfolio Gallery will always show as the Portfolio Gallery main image and on the item card. If you do set a Featured image the thumbnail will not show in the Portfolio gallery meta (it shows in the featured image meta – see image below) and the image will be used as the main image and show on the item card.
Portfolio categories are a custom WordPress Taxonomy. This means that creating Categories works exactly the same as Post Categories but they also have a couple of advanced features.
Portfolio Nav Bars
The Portfolio main page Navigation bar is created from the Portfolio Parent Category names that are created and turned ON to show on the main navigation bar. If it is turned OFF then that category and all Portfolio items assigned to it will not show on the main Portfolio page. Don’t worry – you can use your WordPress Menus to show a category page on any Nav bar and or use the a3 Portfolio Category widget for navigation.
When the Portfolio page first loads all of the items load – hence the All tab. Click on a category name and all the items assigned to that category show without the page reloading. You can see that here on the demo site.
Nav Bar Sort
Sort the order that the Portfolio Navigation bar items show by dragging and dropping the Categories into the position that you want on the Categories table. Note any Categories that are turned OFF from showing on the main nav bar are ignored in the front end nav bar order. When you mouse over a Parent Portfolio category you will see a 4 way arrow. Click on the category and hold down your mouse left clicker. With the left clicker held down move your mouse up or down the page and when the Parent category is in the position you want drop it (let go of the left mouse clicker).
See the screenshot below of dragging and dropping the Parent categories up or down the order.
Portfolio Category Pages
If a Portfolio Parent category has no Child categories then no Navigation bar shows on that parent category page. See a Parent category page on the demo site. Screenshot of that page is below.
When sub categories or child categories are created they are auto created as the Parent categories Navigation bar on the parent category page. Below is a image that shows you a Parent category page (see it here on the demo). In the screenshot we have included the a3 Portfolio Categories widget to show the structure. The Parent Portfolio category is Chameleon and it has 2 child Categories Business and Motels. See that Nav bar created is ALL , Business and Motels.
Front End Display Settings
You can control the a3 Portfolio front end display on your site from the General Settings menu. On the Settings tab there 3 settings that apply to the item card display on the main Portfolio page, Portfolio category pages and Portfolio Tag pages.
Items Per Row
Use the slider to set the maximum portfolio cards to show per row in larger PC screens. In the image below we have it set at 3 items per row because that is a good fit on the demo site
See it displays 3 per row on the Portfolio page
But lets say we where using it on a full page with no sidebar. Setting it to show at 5 item cards per row would be a better option. Use you mouse to move the slider to the right to increase the number
Here is the same page full wide with the setting at 5 items per row.