This is free version of our portfolio theme and is a cut down version of a commercial premium theme we will be releasing in April, with this version you will need to edit the files where the commercial version will have a setup page and a number of additional pages and options.

This theme is not a typical blogging theme and designed to promote yours or your customers professional skills or services, so it needs no sidebars and is not adSense enabled although there are many other themes and plugins that could deliver these.

Credits and plugins

You will need to have the cu3er slideshow  WordPress plugin from 18Elements which uses a category to feed the display, you can view: The Portfolio Theme here if you have visited the portfolio site recently you might need to refresh your browser, ctrl+F5, and you can download the free version from here. CMS-Portfolio Theme (848)

If you like the fancy bookmarks here and on the single post pages then that plugin is Sexy Bookmarks which you can download and install on your blog.

The thumbnail code in this ‘free theme’ was created based on a post by Mark Jaquith here and we would like to thank mark for making the code easy to follow.

cu3er settings

A picture is worth many words so here are the settings you will need to use, the category ID will be the one you use for the slideshow:

Footer

When you activate the theme you will have four footer areas to populate however you want, these replace the need for a sidebar as you can cover most of what you want with these.

Header Logo

To enable the logo first you must replace with your own logo the ‘logo.jpg’ file (670 x 106 pixels), this is in the theme images folder, then you need to copy the ‘cms-header-logo.php’ file in the cms-addons folder into the themes folder, this will hide the blog title and show the logo.

Header Information

Open the ‘cms-header-info.php’ file in the themes folder, there are four information options in this file, change them to your own values, if you want a URL link then you must have the http from a website or the @ for an email and fill in the $infoName value, looking in the file and at the header image or our portfolio website will help with setting this up.

Changing the Menu Options

You can change the menu options by following the method in this tutorial here:

Changing the Colors

You can change the colors of the links to your own values for the information panel, Post Headers and footer content in the themes cms-colors.css file, you will need to change the hex value for each element to your own requirements.

Body Image

The body image can be found in the images folder you can change this to your own, the header is transparent which gives a rather nice effect.

That all there is really, once again if you like this theme share a link to this post on your own website, leave a comment or feedback.

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.