Optimize builds on the popularity of Coffee Break theme, with stunning looks and super functionality built in to the brand spanking new WooFramework. The customizable front page will showcase your work or product in a sexy fashion. Impress visitors of your site with this optimized theme now!

SophisticatedFolio is a great theme for web/graphic designers to showcase their portfolio and blog, but can be used for many other purposes if you just put your imagination to work.

WP Fholio it’s very simple and also very poweful at the same time.

Features:

• Control Panel
• Content Slider
• Wordpress 2.6 and 2.7 compatible
• Works with, Opera, Firefox, Safari, Chrome, IE8 (IE6 and IE7 too)
• Widget, Flickr y Twitter Ready. There is not needed for a plugin
• 3 Custom Pages (Portfolio, Blog anc Contact)

Instalation and Customization

Download, unzip, upload and activate

To display your Portfolio create a new page and use “Portfolio” as Template.

To dsiplay the rest of your content create a new page and use “Blog” as Template.

Also you can use the “Simple Contact” template to create a very simple contact page, you will see the contact information right on your CP, like a normal comment.

Go to WP Fholio CP and play with the options until you get something you like.

Portfolio

Go to Categories and add a new one, name it something like “Portfolio”

Every Portfolio Item will a need a few custom fields, so create a new entry and use this values:

articleimg: Images full URL (works best for 500×300)
thumbnailimg: Thumbnail full URL (works best for 400×150)
Client: Your Client name
Work: Info about the work you did
Link: Your Client URL
Info: Additional information

Demo |  Download Fholio Theme Here

Fresh Folio is the second in our portfolio based themes created to help you promote your skills on a clean, sophisticated design. With a Fresh News influence by default it boasts 7 other diverse styles to choose from. We are confident you will be wooing new clients in no time.

I’m glad to announce an all new WordPress theme from Blog Oh! Blog called Portfolio Press. This is a dark-colored theme suitable for anyone who wants to create a quick portfolio or wants to showcase his work through WordPress. The theme is fully CSS/XHTML validated, WordPress 2.6+ ready and comes with easy to modify code. The comments are nicely designed with Gravatar functionality.

The theme is very small in size (58Kb only) and loads very quickly. It is also SEO optimized and has been tested with Firefox, IE6, IE7 and Opera browsers.

How to install this theme?

• You should have WordPress installed and ready either at your local host or on your paid hosting
• Download the zip file for this theme. Extract the theme folder and upload it to /wp-content/themes/ in your WordPress installation.
• Log in to your WordPress admin panel, go to the “design” section and click on “Portfolio Press” theme to apply it.
• Check your blog for the theme change.

Note: he pieces of work added to the portfolio are not my own creation. They are from minimalsites.com

About the Design

Two grids have been used for the design: one of 12 columns (66px) and another one of 24 sub-columns (26px) with a glutter of 14px and a width of 946px (BBC – Visual Language Guidelines v1.0.6).

These parameters matched up perfectly with the dimensions of the golden ratio incorporated to the design. To respect the golden ratio and to better visualize the text, two líneas bases are used in some areas of the design, one of 14px and another one of 18px. Although it is not the most correct option, it is the one that best adapted to the idea.

About the Style – CSS

It has been divided into five files, which were imported in style.css, as shown in this code.

@import "style/css/reset.css";
@import "style/css/typography.css";
@import "style/css/layout.css";
@import "style/css/coda.css";
/*@import "style/css/diagnostic.css"; Just use for developing tests */

Reset.css

The one created by Eric Meyers, in its v1.0 | 20080212, has been used.

Typography.css

As mentioned above, the base line used for this text has 18px. The default font size has 12px.

The body will remain as follows:

body{font: 75%/1.5em Arial, Helvetica, sans-serif;}

James Whittaker has created an application under Adobe Aire that is quite useful when preparing base lines.

Colors used:

Darker: #000, Dark: #333, Midel-light: #666, Light: #999, Lighter: #FFF.
These colors have been used both for the fonts and the design.

Layout.css

As indicated by its name, the layout specifications can be found in this style.

Coda.css

The styled for the coda-slider.js script can be found in this style.

Portfolio Wordpress Codex

“The WordPress Codex was founded to revitalize the collaborative documentation effort of WordPress…”

Portfolio – WPESP Theme uses such documentation and several tutorials to acquire its potential. The code is commented with links to the Codex de WordPress o a los tutoriales, or the tutorials, as shown in the following example of the index.php file.

if (is_category(work) or is_category(featured)):
// Category Work
// http://codex.wordpress.org/Conditional_Tags#A_Category_Page
include(TEMPLATEPATH . '/category-work.php');
elseif( in_category(3) ) :
// Post in Category Work(in our case ID 3) - View Case Study
// http://codex.wordpress.org/Conditional_Tags#A_Category_Page
// http://codex.wordpress.org/Template_Tags/in_category#Use_OUTSIDE_The_Loop
 include(TEMPLATEPATH . '/work.php');
endif

if(is_page(about)) :
// Page About | http://codex.wordpress.org/Conditional_Tags#A_PAGE_Page
include(TEMPLATEPATH . '/about.php');
elseif(is_page(contact-us)) :
// Page Contact
include(TEMPLATEPATH . '/contact.php');
endif

Some of the pages created for this theme are shown in the previous code, and will be commented on together with other ones.

Index.php

It is the main file. It names different files according to the established parameters.

Category-Work.php

It is activated when the categories Featured and Work are marked, and is where the pieces of work for Home should be. All pieces of work must use the Work category, including the featured piece of work, which will be Featured. In the Featured category, Work must be marked as Category Parent.

Work.php

It corresponds to the page View Case Study, this is, the page of each piece of work. As mentioned in Category-Work.php, the pieces of work should use the Work category. In Work.php we mark the posts that belong to the Work category, which corresponds to ID=3 in the Demo.

About.php

It corresponds to the page About. Some features shared by this file and Contact.php will be explained when the functions are discussed.

Contact.php

It corresponds to the page Contact. WPESP Portfolio Theme uses the cformsII plugin to show the form.

You should edit the cform.php file of the plugin to show the text (Required) after the label. This process should be repeated each time the plugin is updated.

Edit process for cform.php:

Look for the following code, cut it…

### adding "required" text if needed
if($field_emailcheck == 1)
$content .= '<span class="emailreqtxt">'.stripslashes($cformsSettings['form'.$no]['cforms'.$no.'_emailrequired']).'</span>';
else if($field_required == 1 &amp;&amp; !in_array($field_type,array('ccbox','luv','subscribe','checkbox')) )
$content .= '<span class="reqtxt">'.stripslashes($cformsSettings['form'.$no]['cforms'.$no.'_required']).'</span>';

… and paste it after this one.

### print label only for non "textonly" fields! Skip some others too, and handle them below indiv.
if( ! in_array($field_type,array('hidden','textonly','fieldsetstart','fieldsetend','ccbox','luv','subscribe','checkbox','checkboxgroup','send2author','radiobuttons')) )
$content .= $nttt . '<li'.$liID.$liERR.'>'.$insertErr.'<label' . $labelID . ' for="'.$input_id.'"'. $labelclass . '><span>' . stripslashes(($field_name)) . '</span></label>';

Home.php

Index.php appears as “main” in the previous section, because Home.php is the file that configures the homepage.

“When the page is being displayed as the homepage, if a Page Template with the filename home.php exists for your active Theme, the Plugin will override the Page’s set Page Template and use home.php instead.”

Functions.php

Following the guidelines of the tutorial How You Can Use WordPress Functions to Run a Smarter Blog, the functions have been placed in different files and have been included in this file.

Portfolio_Panel.php

This file is used so as the code is not re-written in the files Home.php and Category-Work.php.

The description in Portfolio_Panel.php should be written in the Excerpt of the administration panel in the working post. The rest of the data are added as a normal post, using the Custom Write Panel created for WPESP Portfolio Theme. This last topic will also be discussed.

<?php the_excerpt(); ?>

As shown in the comment "// Featured Category (in our case id=5)” of the following code, you should edit the file so that it corresponds with the category Featured of your portfolio.

<?php if (in_category(5)):
// Featured Category (in our case id=5) ?>
<img class="new" src="< ?php echo get_option('home'); ?>/wp-content/uploads/new.png" width="66" height="28" alt="New!" />;
< ?php endif ?>

It will be included using the code:

<?php portfolio_panel() ?>

This file contains the code that corresponds to the card of the pieces of work. The result of the front-end is the one shown on the image at the right side.

Portfolio_hCard.php

Just as the Portfolio_Panel.php, it is used to put a same code in different files. In this case it corresponds to hCard of #sidebar of About.php and Contact.php.

It will be included using the code:

<?php portfolio_hcard() ?>

Portfolio_Custom-Write-Panel.php

This function is different from the previous ones. In this case, it is a plugin that affects the administrator, and has been created according to the proposal in the tutorial Creating Custom Write Panels in WordPress. The function creates two new drop-down menus in the administrator panels, one in posts and the other one in pages.

Portfolio Post Settings:

It corresponds to the first example mentioned, where the different Custom Fields used to create the portfolio are integrated.

hCard Post Settings:

It corresponds to the second example, where the different Custom Fields used to create the hCard that will appear in pages About and Contact are integrated.

As shown in the comment “// If is About (in our case id=5) or Contact (in our case id=89) page” of the following code, you should edit the file so it corresponds to the pages of your portfolio.

1. foreach($hcard_meta_boxes as $meta_box) {
2. if ($post->ID == 5 or $post->ID == 89) {
3. // If is About (in our case id=5) or Contact (in our case id=89) page
4. $meta_box_value = get_post_meta($post->ID, $meta_box['name'].‘_value’, true);
   

Ajax – Coda Slider Effect

The tutorial Coda Slider Effect by jQuery for Designers has been followed. A few changes have been done to the file coda-slider.js to meet the demands of the theme.

Changes done

In this part of the code, the following has been added “width: 946px” to meet the demands of the theme.

// collect the scroll object, at the same time apply the hidden overflow
// to remove the default scrollbars that will appear
var $scroll = $('#slider .scroll').css(
'overflow': 'hidden'
,'width': '946px');

In the demo the images of the buttons can be found at http://demo.wpesp.com/portfolio/wp-content/uploads/scroll_left.png, This part should be published using the url address chosen for your buttons, as for example http://yoururl.com/wp-content/uploads/scroll_left.png.

// apply our left + right buttons
$scroll
.before('<img class="scrollButtons left" src="http://demo.wpesp.com/portfolio/wp-content/uploads/scroll_left.png" alt="Left button" />')
.after('<img class="scrollButtons right" src="http://demo.wpesp.com/portfolio/wp-content/uploads/scroll_right.png" alt="Right button" />');

Part of the original code has been deleted, because our theme does not use this navigation. The example of jQuery for Designers corresponds to the top navigation.

// handle nav selection
function selectNav() {
  $(this)
    .parents('ul:first')
      .find('a')
        .removeClass('selected')
      .end()
    .end()
    .addClass('selected');
}

$('#slider .navigation').find('a').click(selectNav);

// go find the navigation link that has this target and select the nav
function trigger(data) {
  var el = $('#slider .navigation').find('a[href$="' + data.id + '"]').get(0);
  selectNav.call(el);
}

if (window.location.hash) {
  trigger({ id : window.location.hash.substr(1) });
} else {
  $('ul.navigation a:first').click();
}

The following lines corresponding to the previous navigator have also been deleted.

1. navigation: ‘.thumb a’,
2. onAfter: trigger, // our final callback
   

Demo | Download WPESP Theme here

It has a widget-ready sidebar, so everything on the sidebar can be moved around with ease.

Note: This has a recent comments plugin built-in (visible in the footer). If you already have a recent comments plugin activated on your blog, please make sure it’s deactivated before installing this theme, as it may cause issues.

Demo | Download Colourise Theme Here

Bigeasy Portfolio Based Theme By Woothemes

Bigeasy a very neatly coded, pixel sharp portfolio-based theme designed by the UK based web legend Dan Rubin. This theme boasts an impressive widgetized home page, custom typography, and impressive portfolio handling functionality.

Antisocial was one of our most anticipated themes yet. Designed by Tim Van Damme Antisocial is the perfect online business card and personal blog theme to aggregate all your online profiles in a beautiful slick and unique design.

Unique Features

These are some of the more unique features that you will find within the theme:

• vCard and hCard facilities for accessible contact details.
• 3 completely widgetized zones with 5 custom widgets including a neat re-usable social profiles widget and dedicated zone.
• A neat AJAX calendar widget that is beautifully styled – this plugin required.
• A unique comment form with a JQuery plugin that grabs your Gravatar without a page refresh – plugin available here.
• Antisocial has been localized and includes a .po file for easy translations to be made of the theme
• 10 amazing colour schemes to choose from!

Standard Features

These features are probably just as special as the one’s above, but you’ll find these standard features within most of our wide range of themes:

• Integrated Theme Options (for WordPress) to tweak the layout, colour scheme etc. for the theme;
• Threaded Comments for WordPress 2.7+;
• Custom Page Templates for Archives, & Sitemap;
• Built-in Gravatar Support for Comments