1. About

Colio plugin is a complete solution for creating and managing multiple portfolios for your website with different sets of items and individual settings.

In Admin you can easily select number of columns, choose font size for titles, button color and much more. However its main feature is the ability to display details about items on the same page in form of expandable (sliding down) viewport, that can appear before, after or inside the grid. Also plugin comes with two themes for item details presentation, that you can switch in portfolio settings.

Plugin code is well commented and structured to allow easy customization. For advanced users plugin provides few filters to modify output.

2. Installation

To install Colio plugin please unzip package that you downloaded from Codecanyon. Inside you will find this documentation and colio.zip plugin file.

Log in to Wordpress Admin and go to "Plugins -> Add New". Click "Upload" in menu and select colio.zip. Click "Install Now" and then "Activate Plugin".

3. Adding Items

Colio plugin provides its own post type for portfolio items. Please follow the steps below to add portfolio items

1. Click "Colio -> New Item"

2. When new item page will load enter title, content and set featured image. Please note that items without featured image will not appear in portfolio grid!

   
3. Then in "Groups" metabox add new group. Grouping items is necessary if you want to have few portfolios on your website with different sets of items.
4. In excerpt field you can enter short description for item. If you leave it empty, excerpt will be generated from content by trimming it to the length which is set as "Excerpt Length" option in portfolio settings.
5. Ok. Now scroll down to "Extra Photos" metabox. Here you can upload additional photos to create gallery. So, to upload photo click new photo icon. This will show up "Upload Photo" modal box where you can upload from your computer or select image in "Media Library". In either case select image size and click "Insert into Post" button to add photo. When you have few photos you can drag them to rearrange in desired order.
6. Also you can add social links for item using "Social Links" metabox. Select social provider from drop down list and click "Add Link". In text field that will appear enter link URL.
7. When done, don't forget to click "Publish" button to save post!

4. Portfolio Settings

So, you know how to add items. Now it's time to learn how to create portfolio and add it to the page or post.

1. Go to "Colio -> Settings" menu
2. Enter portfolio name and click "Add New" button

3. Page will reload and new portfolio will appear in list

   
4. Now click + icon or portfolio name to open settings
5. If you want to display items only from specific group please select it in "Groups" option. You can select few groups by holding Cmd/Ctrl key.
6. Configure all other options and click "Save Changes" at the bottom of settings
7. When page will reload copy shortcode for your portfolio, that looks like [colio id="my_portfolio"], where my_portfolio is its unique ID

8. Open page or post and insert shortcode where you want portfolio to appear

   
9. Reload page to see the changes!

5. Filters

With Colio plugin it's possible to make your portfolio filterable. To do this you should perform few simple steps, listed below

1. Go to "Colio -> Items" menu. For every item in list click "Quick Edit" and add some tags to the "Filter Tags" field.

   Tags that you add will work as filter labels and will appear at the top of portfolio grid.
2. Next go to "Colio -> Settings" and click + or portfolio name to open settings
3. Make sure that "Filters" checkbox is checked. Also in "Filters Style" option select how you want to display filters - as labels or as select element.

4. Save changes and reload page with your portfolio. Filters will show up at the top of portfolio grid in alphabetical order, preceded by "x" icon to disable filters and show all items.

   
5. If you want to remove filter, go to "Colio -> Tags" menu and simply remove corresponding tag.

6. Advanced Usage

To insert portfolio in PHP code you can use get_colio() template tag, which by default will echo html for portfolio with given ID.

<?php get_colio('my_portfolio'); ?>

to make this function return html instead of echoing it, pass false as second parameter

<?php 
	$my_portfolio = get_colio('my_portfolio', false); 
	echo $my_portfolio; 
?>

Portfolio ID you can get from shortcode on "Colio -> Settings" page.

Filters. Colio WP plugin provides few filters to allow theme developers or just anyone who wants to modify plugin output easily to do this.

colio_class - filter to add/modify classes for colio wrapper. Accepts array with classes as first argument and portfolio option name as second. colio_item - filter to modify HTML for item before it is inserted into portfolio grid. Accepts HTML as first argument, item post ID as second and portfolio option name as third. colio_content - filter to modify content for item that will be displayed in description viewport. Accepts HTML as first argument, item post ID as second and portfolio option name as third. colio_content_main - filter to modify/append HTML to the main section of content. Accepts empty string as first argument, item post ID as second and portfolio option name as third. colio_content_side - filter to modify/append HTML to the side section of content. Accepts empty string as first argument, item post ID as second and portfolio option name as third.

In every filter function, except "colio_class", you can use global $post variable to get current post object for colio item. To get portfolio settings for current item in filter, pass portfolio option name (3rd argument) to get_option() function. You will receive array where keys are option names.

For example, using following code you can list item groups in main section of item details

<?php 
	function add_portfolio_name($html, $post_id, $name) {
		$groups = get_the_term_list($post_id, 'colio_group', '', ', ');
		$html .= "
" . $groups .  "
";
		return $html;
	}
	
	add_filter('colio_content_main', 'add_portfolio_name', 10, 3);
?>

BTW. 'colio_group' is taxonomy name for item group and 'colio_tag' is taxonomy for filter tags.

Thanks for reading!