Page (page.php)

Page information comes here

About

posted on July 19, 2010

Manage your portfolio projects easily and use them everywhere you like. This plugin is very simple to use, though it’s very powerful. It doesn’t bother you with a complex user interface. Add project specific information, for example your role and the team you’ve worked in. Add any media you like: YouTube, code snippets or any media from your wordpress built-in Media Library.

Updated Version 1.3

Recently there is an update available (1.3) which gives you more functionality, like assigning projects to clients, categories and tags.

Changelog:

  • Performance improvements in WordPress CMS (media metabox/panel). Decrease load time of images.
  • Taxonomies added, you can now assign your projects to categories and even tag them the way you like (thanks to Jankees van Woezik)
  • Paginating fixed
  • The option to enable/disable comments on projects
  • Sorting settings>portfolio info fields the way you like
  • XML update (clients, categories and tags added)
  • New API added (huge improvement)

Wonder how it works? Watch the screencast! (outdated, new video online soon which will explain the new features in detail)

Theme implementation

Integrate your portfolio items in your theme is pretty straight forward. Although it offers more functionality, these methods are most common:

<?php
/**
* Retrieves all portfolio media for provided project post. 
* @param $post_id int (optional) the project post id, if null pull from global $post
* @param $type string (optional) filter on type. possible values are: 'image', 'youtube', 'snippet' or 'text'
* @return array
*
* Example retrieve all project media:
* (usage in the loop @see http://codex.wordpress.org/The_Loop)
*
*		<?php while (have_posts()) : the_post(); ?>
*			<h1>Media</h1>
*			<ul>
*			<?php foreach (simple_portfolio_media() as $media): ?>
*				<li><?php print_r($media); ?></li>
*			<?php endforeach; ?>
*			</ul>
*		<?php endwhile; ?>
*
* Example retrieve typed media like Images and display them:
* (usage in the loop @see http://codex.wordpress.org/The_Loop)
*
*		<?php while (have_posts()) : the_post(); ?>
*			<?php foreach (simple_portfolio_media('image') as $image): ?>
*				<?php 
*					$src = wp_get_attachment_image_src($image['value'], 'full');
*					echo "<a href=\"$src[0]\">" . wp_get_attachment_image($image['value']) . "</a>";
*				?>
*			<?php endforeach; ?>
*		<?php endwhile; ?>
*
*/
function simple_portfolio_media(  $post_id = null, $type = null  ); 
 
/**
* Retrieves all portfolio general information for provided project post
* @param $post_id int (optional) the project post id, if null pull from global $post
* @return array
*
* Example: (usage in the loop @see http://codex.wordpress.org/The_Loop)
*		<?php while (have_posts()) : the_post(); ?>
*			<h1>Project Information</h1>
*			<ul>
*			<?php foreach (simple_portfolio_info() as $info): ?>
*				<li><?php echo $info; ?></li>
*			<?php endforeach; ?>
*			</ul>
*		<?php endwhile; ?>
*/
function simple_portfolio_info( $post_id = null ); 
 
/**
* Query projects. @see http://codex.wordpress.org/Function_Reference/query_posts
* You can use the loop from wordpress @see http://codex.wordpress.org/The_Loop after calling this method.
* @param $taxonomy string/array name of the taxonomy, possible values are: 'portfolio-clients', 'portfolio-categories' or 'portfolio-tags' (or combine multiple combinations in an array)
* @param $slug string slug of the taxonomy for filtering projects on taxonomy slug name.
* @return array
*
* Example:
* 		<?php simple_portfolio_query_projects(); ?>
*		<?php while (have_posts()) : the_post(); ?>
*			<h1><?php echo the_title(); ?></h1>
*			<?php the_content('Read more &raquo;'); ?>
*		<?php endwhile; ?>
*/
function simple_portfolio_query_projects( $taxonomy = null, $slug = null ); 
 
/**
* Retrieve projects in an array. When no arguments are applied, all projects will be returned. @see http://codex.wordpress.org/Function_Reference/get_posts
* @param $taxonomy string/array name of the taxonomy, possible values are: 'portfolio-clients', 'portfolio-categories' or 'portfolio-tags' (or combine multiple combinations in an array)
* @param $slug string slug of the taxonomy for filtering projects on taxonomy slug name.
* @return array
*
* Example:
*		<?php $commercial_projects = simple_portfolio_get_projects('portfolio-categories', 'commercial'); ?>
*
*		<ul>
*		<?php foreach ($commercial_projects as $post): ?>
*			<?php setup_postdata($post); ?>
*			<li>
*				<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
*				<?php the_content(); ?>
*			</li>
*		<?php endforeach; ?>
*		</ul>
*/
function simple_portfolio_get_projects( $taxonomy = null, $slug = null ); 
 
/**
* Is xml enabled? This way you can check easily if xml is enabled
* @return Boolean
* 
* Example check and show link to xml:
*		<?php if (simple_portfolio_xml_enabled()): ?>
*			<h1>You have enabled XML output</h1>
*			<?php $xml_url = get_site_url() . '/' . get_post_type_object('portfolio')->rewrite['slug'] . '.xml';
*			<a href="<?php echo $xml_url; ?>">View XML</a>
*		<?php endif; ?>
*/
function simple_portfolio_xml_enabled(); 
 
/**
* List clients. Echo the output directly.
* @param $post_id int (optional) the project post id. (default null which list all clients unrelated to a project post)
* @param $args array @see http://codex.wordpress.org/Template_Tags/wp_list_categories
*
* Example list all clients (even those who have no project posts):
*		<h1>Clients</h1>
*		<?php simple_portfolio_list_clients(null, array('hide_empty' => 0)); ?>
*
* Example usage in the loop @see http://codex.wordpress.org/The_Loop 
*		<?php while (have_posts()) : the_post(); ?>
*			<h1>Client(s)</h1>
*			<?php simple_portfolio_list_clients($post->ID); ?>
*		<?php endwhile; ?>	
*/
function simple_portfolio_list_clients( $post_id = null, $args = null ); 
 
/**
* Retrieve the clients as an array.
* @param $post_id int (optional) the project post id. (default null which list all clients unrelated to a project post)
* @param $args array @see http://codex.wordpress.org/Template_Tags/wp_list_categories
* @return array
*
* Example:
*		<?php $clients = simple_portfolio_get_clients($post->ID); ?>
*		There are <?php echo count($clients); ?> clients
*		<ul>
*			<?php foreach ($clients as $client): ?>
*				<li><a href="<?php echo $client->link; ?>"><?php echo $client->name; ?></a></li>
*			<?php endforeach; ?>
*		</ul>
*/
function simple_portfolio_get_clients( $post_id = null, $args = null ); 
 
/**
* List categories. Echo the output directly.
* @param $post_id int (optional) the project post id. (default null which list all categories unrelated to a project post)
* @param $args array @see http://codex.wordpress.org/Template_Tags/wp_list_categories
*
* Usage @see simple_portfolio_list_clients()
*/
function simple_portfolio_list_categories( $post_id = null, $args = null ); 
 
/**
* Retrieve the categories.
* @param $post_id int (optional) the project post id. (default null which list all categories unrelated to a project post)
* @param $args array @see http://codex.wordpress.org/Template_Tags/wp_list_categories
* @return array
*
* Usage @see simple_portfolio_get_clients()
*/
function simple_portfolio_get_categories( $post_id = null, $args = null ); 
 
/**
* List tags. Echo the output directly.
* @param $post_id int (optional) the project post id. (default null which list all tags unrelated to a project post)
* @param $args array @see http://codex.wordpress.org/Template_Tags/wp_list_categories
*
* Usage @see simple_portfolio_list_clients()
*/
function simple_portfolio_list_tags( $post_id = null, $args = null ); 
 
/**
* Retrieve the tags.
* @param $post_id int (optional) the project post id. (default null which list all tags unrelated to a project post)
* @param $args array @see http://codex.wordpress.org/Template_Tags/wp_list_categories
* @return array
*
* Usage @see simple_portfolio_get_clients()
*/
function simple_portfolio_get_tags( $post_id = null, $args = null ); 
?>

Settings panel

In Settings>Portfolio you can configure the portfolio plugin to fulfill your needs.

Creating a new Project

When the plugin is activated a new box will appear:

Project Information

In the metabox “General Information” you’ll see the fields you’ve created in your settings>portfolio. For each project you can define the content.

Media

The cool thing about this plugin, is that you can import images, YouTube movies, code snippets and text very easily. For instance adding images to your project uses the built-in Media Library from WordPress, this way you take advantage of the power WordPress provides.

Upload images directly in your project:

When all images are successfully crunched, the button “Add to Project” appears. When clicked, all these images will be added to your project:

Media – Youtube

Add the youtube id and you’ll get a preview in your media metabox:

Here you can see how nicely you can integrate your youtube movies in your theme:
http://projects.inlet.nl/simple-portfolio-wordpress3/portfolio/project-x/

Media – Code snippets

Now you can even add some html or javascript (anything that can be injected into the DOM structure). This can be very handy.
Check the live example with html & jQuery!

Finally

In the download section you can find this very basic example theme, which gives you insight of the available methods to display your portfolio properly.

I know there is much room for improvement, so please contact me if you have suggestions, ideas, add-ons or questions! It’s work in progress. I hope you’ll find this plugin helpful.

All the best,

Patrick Brouwer