WordPress Portfolio – WPESP Theme is a “minimalist” Theme based on the idea of portfolio created by DAILYWP. The Theme is a starting point in the creation of portfolios, using WordPress as CMS. In this short tutorial are the guidelines of the design, the Codex de WordPress used, where are explained the Custom Write Panel created to edit the content, and the adaptation to the Coda Slider Effect script, create by jQuery for Designers, and can be modified depending on what the user needs.

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

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.

Diagnostic.css

It is a diagnosis tool created by Eric Meyers.

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

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

Get the Best Ajax Sliders →

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.

navigation: '.thumb a',
onAfter: trigger, // our final callback

You are free:

• To copy, distribute, display, and perform the work.
• To make derivative works.

Under the following conditions:

• Attribution. You must give the original author credit.
• For any reuse or distribution, you must make clear to others the licence terms of this work.

• Any of these conditions can be waived if you get permission from the copyright holder.
• Nothing in this license impairs or restricts the author’s moral rights.

WPESP Portfolio Theme by WPESP is licensed under a Creative Commons Reconocimiento 3.0 España License.

1. Download the Theme files.
2. Install the Theme. You should upload the folder wpesp-portfolio to the root wp-content/themes of your WordPress installation.
3. Go to the Design panel of the Dashboard of your WordPress and activate it.
4. That’s all!

Dificult for you? Use a Premium Theme!

Download: Note: There is a file embedded within this post, please visit this post to download the file.

Adapted to WordPress 2.7 and tested in Firefox 3, Safari, IE6, IE7 and IE8 Beta.

Remove the footer link to WPESP and/or help us with your support, doing a $10 donation. Thank you.

Any questions?

This tutorial contains some basic information on Portfolio – WPESP Theme. If you have any further doubts, use the comments for each post to ask what you need. You will be answered as soon as possible.
Update: WordPress Forums.

Update: WordPress Forums.

Facebook WPESP: Do you have any suggestion?