Advertisement

WordPress: Beginner to Master, Part 4

by

Throughout this six-part beginner-to-master series, we'll be using the advanced features of WordPress to create our own portfolio & blog, complete with an options page, multiple styles and support for the new WordPress 2.7 features. Today, we'll work on the Portfolio itself.

Today we're going to create our main Portfolio page, which is actually very similar to the 'Latest Work' section on the homepage.

We're also going to create the 'single post' view for portfolio items, where more details of the item can be displayed.

We'll then finish up by creating the 'Default Page Template'. This will be used on all other pages requiring a normal structure – such as an About or Contact page.


Also available in this series:

  1. WordPress: Beginner to Master, Part 1
  2. WordPress: Beginner to Master, Part 2
  3. WordPress: Beginner to Master, Part 3
  4. WordPress: Beginner to Master, Part 4
  5. WordPress: Beginner to Master, Part 5
  6. WordPress: Beginner to Master, Part 6

Jump to a Section


Portfolio

The portfolio page template is very similar to the first section of our homepage:


We are displaying the latest portfolio items, which when clicked go to their 'single' page.

Add the following below the existing code in page-portfolio.php:

 
<h2>Portfolio</h2> 
 
<?php 
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1; 
 
query_posts("paged=$paged&cat=$ts_portfolio_cat"); 
$counter = 0; 
while (have_posts()) : the_post(); 
 
    $counter++; 
    $preview = get_post_meta($post->ID, 'preview',true); 
    $date = get_post_meta($post->ID, 'date',true); 
 
?>

You should recognise the $paged statement from the blog page – allowing us to seperate the portfolio items out over multiple pages. Inside query_posts() we use our pagination variable, and also set the loop to retrieve only posts from the Portfolio category (cat=$ts_portfolio_cat).

And just like the loop on the homepage when retrieving the two latest portfolio items, we have increased the $counter (as we'll be using this again) and retrieved our portfolio and date custom-fields using the get_post_meta() function.

Next:

 
<div class="work <?php if($counter == 2) { echo "last"; $counter = 0; }; ?>"> 
 
    <?php if($preview) { ?> 
        <a href="<?php the_permalink(); ?>"> 
            <img src="<?php bloginfo('template_directory'); ?>/inc/thumb.php?src=<?php echo $preview; ?>&w=450&h=210&zc=1&q=100" 
            alt="<?php the_title(); ?>" /> 
        </a> 
        <?php 
    } ?> 
 
    <p> 
        <a href="<?php the_permalink(); ?>"> 
            <?php the_title(); ?> 
        </a> <?php 
 
        if($date) { 
            echo"<span>($date)</span>"; 
        } ?> 
    </p> 
 
</div><!--/work-->

The above code is exactly the same as we used on the frontpage. The $counter is used to add a class of last to every-other item (to keep the items inline).

If a $preview custom-field was used, we display it – and process it through the TimThumb PHP script to resize the image.

 
<?php endwhile; ?> 
 
<div class="navigation"> 
    <div class="alignleft"><?php next_posts_link('&laquo; Older Entries') ?></div> 
    <div class="alignright"><?php previous_posts_link('Newer Entries &raquo;') ?></div> 
</div> 
 
<?php get_footer(); ?>

We have closed off the Loop with endwhile, output the pagination buttons with next_posts_link() and previous_posts_link(), and included the footer.

Save and preview your portfolio page. It's now complete, and requires no extra styling since we are re-using the styles from the homepage. It should look something like the image below once you have a few other items added to the Portfolio category:



Single Portfolio Page

This is the layout used to display more details for each portfolio item when clicked on (on its 'single' page); as shown below:


Remember that in Part 3, we used some code in single.php to direct any requests for items in the 'Portfolio' category to the single-portfolio.php file.

Below is an outline of each section for the page:


Inside single-portfolio.php, start with the following:

 
<?php 
get_header(); 
 
if(have_posts()) : while (have_posts()) : the_post(); 
 
    $preview = get_post_meta($post->ID, 'preview',true); 
    $previewfull = get_post_meta($post->ID, 'preview-full',true); 
    $date = get_post_meta($post->ID, 'date',true); 
    $client = get_post_meta($post->ID, 'client',true); 
    $link = get_post_meta($post->ID, 'link',true); 
 
    ?>

The header has been included, and a normal WordPress Loop is initiated. Inside the loop we retrieve the preview, preview-full, date, client and link custom-fields for the post. A quick reminder of what each custom-field is for (from Part 2):

  • preview (URL of a 930px width image of your work)
  • preview-full (larger version of the work, will display in a lightbox)
  • date (the date the work was completed)
  • client (who the work was for)
  • link (to a live version of your work)

Next we include the title using the_title(), and if a $preview image from the custom-fields exists, the image is parsed through the TimThumb script to ensure it is 930px in width and output to the page – wrapped in a link to the $previewfull image if it exists:

 
<h2><?php the_title(); ?></h2> 
 
<div class="work worksingle"> 
 
    <?php if($preview) { ?> 
        <div id="fancyopen"> 
            <a href="<?php if($previewfull) { echo $previewfull; } else { echo '#'; } ?>"> 
            <img src="<?php bloginfo('template_directory'); ?>/inc/thumb.php?src=<?php echo $preview; ?>&w=930&h=430&zc=1&q=100" alt="<?php the_title(); ?>" /></a> 
        </div> 
        <?php 
    }

Below the image is the meta data for the item (containing the date, client and link fields):

 
if($date || $client || $link) { 
    echo '<ul class="meta">'; 
    if($date) { echo "<li>$date</li>"; } 
    if($client) { echo "<li>$client</li>"; } 
    if($link) { echo "<li><a href='$link'>Visit Site</a></li>"; } 
    echo '</ul>'; 
}

On the first line we checked whether at least one of the three fields contain anything – the use of  ||  means 'OR'.

Inside that, each field is checked individually and output if it contains anything.

Finally, the_content() is used to output the main content, the loop is closed and the footer included:

 
    the_content(); 
    ?> 
 
</div> 
     
<?php endwhile; endif; 
get_footer(); ?>

Preview the theme, everything should look fine – except the preview image, where we still need to incorporate the Lightbox.

The Lightbox

The FancyBox jQuery Lightbox will be used to display a larger preview of the portfolio image:


Download the files, and drop the /fancybox/ folder into the /inc/ theme folder.

Also create a new file in /inc/ named animate.js.

Inside header.php add the following between <?php wp_head(); ?> and </head>:

 
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/inc/fancybox/fancy.css" type="text/css" media="screen" /> 
 
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js"></script> 
    
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/inc/fancybox/jquery.fancybox-1.0.0.js"></script> 
	 
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/inc/animate.js"></script>

First, FancyBox's CSS file (/inc/fancybox/fancy.css) is included. The latest jQuery library (v1.3.1) is included from Google Code, followed by FancyBox's javascript file and the /inc/animate.js file.

The jQuery library is being loaded from Google Code to reduce load times, since the visitor may have already visited a site also using the library hosted on Google's servers, and so the file will be cached. It's a small difference, but you can always save the jQuery library into your /inc/ folder and reference it from there if you prefer.

Finally, we simply need to tell FancyBox which links it should apply itself to. Add the following to /inc/animate.js:

 
$(document).ready(function(){ 
 
    $("#fancyopen a").fancybox({ 
         'hideOnContentClick': true, 
         'overlayShow': true 
    }); 
 
});

If you're not familiar with jQuery, we have referenced the fancybox({}) function onto any objects at #fancyopen a (links inside div's with an ID of fancyopen). We've also passed through a couple of options: hideOnContentClick closes the image when it's clicked on, and overlayShow 'darkens' the background when the lightbox is active.

For more FancyBox parameters, see the 'How to Use' section here.

Tip: Want to learn more about jQuery? See Jeffrey's fantastic "jQuery for Absolute Beginners" screencast series on the ThemeForest Blog.

Refresh your portfolio, and try the lightbox out.


 


Default Page Template

We've created our home & portfolio page templates, but we haven't yet created a 'default' template which will be used for any other pages (eg. About or Contact Us).


Add these few lines to the end of the existing code in page.php:

 
<div id="mainarea"> 
 
<?php 
if(have_posts()) : while(have_posts()) : the_post (); ?> 
 
    <h2><?php the_title(); ?></h2> 
    <?php the_content(); 
	 
endwhile; endif; 
 
 
get_sidebar(); 
get_footer(); ?>

A basic WordPress loop outputting the title & content. Simple.


Summary

Check back tomorrow when we'll be creating our comments layout (and taking advantage of WordPress 2.7's new 'threaded comments' functions!) (Part 5 in our series.)

Advertisement