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".

Updating plugin. Please use FTP method to update plugin to newer version. This will guarantee that your existing settings won't be lost during update!

• in Admin go to "Plugins -> Installed Plugins" and deactivate Colio
• unzip colio.zip file and upload whole colio/ directory to wp-content/plugins/ folder on your web server. Answer "yes" when you will be asked whether you want to replace colio/ directory
• go back to Admin and active Colio 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. To add a photo click "empty photo" icon. This will show up "Media Library" dialog where you can select one or few photos simultaneously. Photos uploaded here will be used for photo feed or slider in item details viewport. BTW. You can drag thumbs in metabox to rearrange photos 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 display Colio portfolio in your theme you can use get_colio() template tag. By default it will echo html for portfolio with specified 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; 
?>

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

If you want to insert your own content in item details viewport or make any other modifications, please use next filters and action hooks.

FILTERS

"colio_wrap_class" - filter to add/remove classes that will be assigned to portfolio grid wrapper. Accepts array with classes as argument. Must return array as well. "colio_thumb" - filter to modify HTML for item thumb before it's inserted into portfolio grid. Filter accepts thumb HTML as first argument, item $post object as second. "colio_item_class" - filter to add/remove classes that will be assigned to item wrapper in colio viewport. Accepts array with classes as first argument, item $post object as second. Must return array as well. "colio_item_subtitle" - filter to modify text that is displayed as item subtitle in colio viewport. By default subtitle displays creation date. Filter accepts date as first argument, item $post object as second.

If you need to get settings for specific portfolio you can use "global $colio_settings;" variable in filter functions

ACTION HOOKS

"colio_item_before_main_content" - use this hook to insert text/html before item content in colio viewport. Function accepts item $post object as argument "colio_item_after_main_content" - use this hook to insert text/html after item content in colio viewport. Function accepts item $post object as argument "colio_item_before_social_links" - use this hook to insert text/html before social links in colio viewport. Function accepts item $post object as argument "colio_item_after_social_links" - use this hook to insert text/html after social links in colio viewport. Function accepts item $post object as argument "colio_item_before_side_extra" - use this hook to insert text/html before extra photos in colio viewport. Function accepts item $post object as argument "colio_item_after_side_extra" - use this hook to insert text/html after extra photos in colio viewport. Function accepts item $post object as argument

Please note that in Colio WP v2.0 next filters are not available any more - "colio_content", "colio_content_main", "colio_content_side"!

Here is very simple example how to insert item groups underneath item content in details viewport

<?php 
	function list_item_groups($post) {	
		$groups = get_the_term_list($post->ID, 'colio_group', '', ', ');
		echo "
" . $groups . "
";
	}
	add_action('colio_item_after_main_content', 'list_item_groups');
?>

Thanks for reading!