Our latest theme is the Portfolio Theme, we have used Artisteer 2.4, cu3er slideshow and have created a function to add a number of categories, posts and tags when the theme is first loaded, check back early February for linking, columns and mouseover fading.

Visit The Wedding Theme to see how the post images look, while you are there sign the guestbook, we would say view our photos but if we have not emailed you the password you will not be able to.

This post has been created based on a post by Mark Jaquith here and we would like to thank mark for making the code easy to follow.

But in this short tutorial we are only looking at the Post Images, support for post images is now a part of WordPress and is easy to implement so lets get started, if you have been following our tutorials then you will already have these lines in the demo-functions.php file, if not you can add them to the Artisteer functions.php file.

The width (200)  and height (133)  dimensions we used here in line three are for a standard landscape image, you may want to change the dimensions to a square or portrait based on the type of posts you will be making.

Add to either your demo-functions.php or the Artisteer theme functions.php

/* Start WordPress Thumbnail Support Code */
add_theme_support( 'post-thumbnails');
set_post_thumbnail_size( 200, 133, true); // Normal post thumbnails
add_image_size( 'single-post-thumbnail', 400, 9999 ); // Permalink thumbnail size
/* End WordPress Thumbnail Support Code */

Now we need to add a style to the stylesheet for our image, you may want to pad the image or add additional margins to suit your theme, Artisteer adds a margin around the img tag, in our theme it was 7px so we added that to the image width, 200 to 214px, and a right margin just to push the text more to the right.

Add to either your demo-custom.css or the Artisteer theme style.css

/* Add a div to the post list for our thumbnail images */
#demo-image
{
 margin-right: 7px;
 float: left;
 overflow: hidden;
 width: 214px;
 height: 100%px;
}

Last step is to add our image into two Artisteer files, index.php and archive.php, as you scroll down you will see this line.

<?php while (have_posts()) : the_post(); ?>

Below that is another line that look like this, paste the code lines after this lines

<!– article-content –>

Add this code to the index.php and archive.php

<!-- Start demo code Add our post image to the post list -->
 <div id="demo-image">
 <?php the_post_thumbnail(); ?>
 </div>
 <!-- End demo code Add our post image to the post list -->

So your code block should look like this:

<div class="art-postcontent">
 <!-- article-content -->

 <!-- Start demo code Add our post image to the post list -->
 <div id="demo-image">
 <?php the_post_thumbnail(); ?>
 </div>
 <!-- End demo code Add our post image to the post list -->

 <?php if (is_search()) the_excerpt(); else the_content(__('Read the rest of this entry &raquo;', 'kubrick')); ?>
 <?php if (is_page() or is_single()) wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>

 <!-- /article-content -->
</div>

Now that is it with the code how easy was that, just edit a post and in the right column you will see an option for the Post Thumbnail, select an image from the post media and you will see an option to make thumbnail, save the post and view your website.

The last and most important thing is to let others know if this helped you, just add your comment to this post for anyone else reading it.

The only time you should change core theme files is if it is the only way to change something, have you ever changed a value in a style and forgotten what the original value was when you wanted to roll back the change, or added code in the functions.php and forgotten what you added, all out tutorials going forward are going to use two new files and one line of code in the core functions.php file to load them, you could as a rule add these to your themes as a best practice.

The first file is a css file with the naming convention of your initials plus custom.css so mine is ‘dsc-custom.css’, so when in the tutorial it say open your css file, you will know to open this one.

Open your text editor and add a few comment lines between /* here */ to say what the file is for and save it as described above into your theme folder, it does not matter that there is no code changes in the file.

Stylesheet

/* This file is part of the Digital Raindrops CMS-Tutorial for WordPress and Artisteer
Copyright 2010  David Cox  (email : david.cox@digitalraindrops.net)
Plugin Support: http://www.digitalraindrops.net/Boards/
This CSS file will be loaded last, make any changes to your styles only in this file
*/

Functions

this file you will save the same as above with a name of your initials plus functions.php, so mine is dsc-functions.php

<?php
/* This file is part of the Digital Raindrops CMS-Tutorial for WordPress and Artisteer
Copyright 2010  David Cox  (email : david.cox@digitalraindrops.net)
Plugin Support: http://www.digitalraindrops.net/Boards/
This php file will be called from the main functions.php, make any new functions in this file
*/
?>

Not impressed, so lets put this into practice, in your own ???-functions.php file we will add some code to load our custom stylesheet and if you are using 2.9 we will add code to give page and post thumbnail support, so lists can show the thumbnails if the plug supports it, the next tutorials will be using the thumbnail functions.

First if you are using 2.9 adding support for the thumbnails only requires three lines of code, here you should set the default thumbnail size.

<?php
/*This file is part of the Digital Raindrops CMS-Tutorial for WordPress and Artisteer
Copyright 2010  David Cox  (email : david.cox@digitalraindrops.net)
Plugin Support: http://www.digitalraindrops.net/Boards/
This php file will be called from the main functions.php, make any new functions in this file
*/

/* Start WordPress Thumbnail Support Code */
add_theme_support( 'post-thumbnails');
set_post_thumbnail_size( 200, 200, true); // Normal post thumbnails
add_image_size( 'single-post-thumbnail', 400, 9999 ); // Permalink thumbnail size
/* End WordPress Thumbnail Support Code */
?>

Next we will create a function to load our stylesheet when the theme loads, the clever part with this is the WordPress hook wp_print_styles, which calls a standard function and loads the stylesheet, notice we have added the ‘if’ condition this will stop any fatal errors if a function is withdrawn, or you upload to an earlier version of WordPress.

<?php
/* This file is part of the Digital Raindrops CMS-Tutrorial for WordPress and Artisteer
Copyright 2010  David Cox  (email : david.cox@digitalraindrops.net)
Plugin Support: http://www.digitalraindrops.net/Boards/
This php file will be called from the main functions.php, make any new functions in this file
*/

/* Start WordPress Thumbnail Support Code */
add_theme_support( 'post-thumbnails');
set_post_thumbnail_size( 200, 200, true); // Normal post thumbnails
add_image_size( 'single-post-thumbnail', 400, 9999 ); // Permalink thumbnail size
/* End WordPress Thumbnail Support Code */

/* Start code to load custom stylesheet name the function with your initials */
function dsc_stylesheet() {
if (file_exists(TEMPLATEPATH.'/dsc-custom.css')) ?>
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/dsc-custom.css" type="text/css" media="screen" />
<?php }
add_action('wp_print_styles', 'dsc_stylesheet');
/* End code to load custom stylesheet name the function with your initials */
?>

Our last line of code goes into the themes functions.php file, open the file and after the <?php line add the call to your functions file.

/* Start code to load custom functions file */
if (file_exists(TEMPLATEPATH. '/dsc-functions.php')){
include_once (TEMPLATEPATH. '/dsc-functions.php');
}
/* End code to load custom functions file */

Conclusion

You now have a tidy system to add styles and functions to your themes without changing the core code to often, and code that is portable between themes, but what was all that thumbnail stuff about?

On your Pages and posts you will now have a new form where you can select a thumbnail for your post or page, WordPress will crunch it to size for you as well.

How can you use this thumbnail, some plugin already support this, on the home page we are using  category posts plugin.

http://wordpress.org/extend/plugins/category-posts/

In the next tutorials we will be using this and the Dynamic content gallery on a theme, trying to get from this theme I created following a post on the Artisteer forum.

Finishing with gallery and three columns of categories as a tutorial not for production use.