We have used this in the our wedding theme, the cu3er slideshow  WordPress plugin from 18Elements uses a category to feed the display, when we added the images the slideshow category and the posts appeared, not a problem if the images form a part of a full post, but messy when used as placeholders.

View: The Wedding Theme.

We could hardcode the category ID and exclude this, that is fine on a static theme where we already know the Category ID, but what if we wanted to make the theme available to other clients or for free download.

On looking for a solution for our Artisteer theme to return a category ID we could not find a simple WordPress function to use on the lists, we have to create our own function that returns a value from the database, if you have been following our tutorials then you will already have demo-functions.php file, if not you can add them to the Artisteer functions.php file.

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

function demo_get_categoryID($catName){
 global $wpdb;
 $category_slug = str_replace(" ","-",$catName);
 $category_slug = strtolower($category_slug);
 $thevalue = $wpdb->get_var( "SELECT term_id FROM $wpdb->terms WHERE slug = '" . $category_slug . "'" );
 if ($thevalue) {
 return $thevalue;
 }else{
 return "";
 }
}

Now we need to filter the categories list to exclude the slideshow category from the menu, you can change the name as required.

In the Artisteer theme functions.php we will add this block of code to the code that returns the categories list, look for this line and insert the code below.

Find: wp_list_categories(‘title_li=’); and replace with the following lines.

/* Start demo Category add line */
 $exclude = demo_get_categoryID('slideshow');
 if ($exclude){
 wp_list_categories('title_li=&exclude='.$exclude.'');
 }else{
 wp_list_categories('title_li=');
}
/* End demo Category add line */

So your code block should look like this:

add_action('get_terms', 'art_vmenu_get_terms_filter');
 add_action('wp_list_categories', 'art_vmenu_wp_list_categories_filter');

 /* Start demo Category add line */
 $exclude = demo_get_categoryID('slideshow');
 if ($exclude){
 wp_list_categories('title_li=&exclude='.$exclude.'');
 }else{
 wp_list_categories('title_li=');
 }
 /* End demo Category add line */
 remove_action('wp_list_categories', 'art_vmenu_wp_list_categories_filter');
 remove_action('get_terms', 'art_vmenu_get_terms_filter');

last step is to add our image into two Artisteer files, index.php and archive.php, look for this line and insert the code below.

Find: <?php while (have_posts()) : the_post(); ?> and paste in the following lines

<!-- Start Check if our post is a slideshow post -->
<?php $slideCat = demo_get_categoryID('slideshow'); ?>
<?php if (in_category($slideCat) ) continue; ?>
<!-- End Check if our post is a slideshow post continue if it is -->

So your code block should look like this:

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

<!-- Start Check if our post is a slideshow post -->
<?php $slideCat = demo_get_categoryID('slideshow'); ?>
<?php if (in_category($slideCat) ) continue; ?>
<!-- End Check if our post is a slideshow post continue if it is-->
<div>

Now we have hidden our slideshow category from view, remember that this will hide all posts in the specified named category, so only add the category to posts you do not want displayed .

Please leave a comment if you have found this post of use to your workflow.

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.

If it is your first visit and you are looking for the walkthrough you will find the pages on the top menu, the CMS-Lite has child menu items.

Feedback on the posts is welcomed, support is through the parent website, see the support page for the links.

The plugin has taken quite a while to complete, it is free of any charge to use as you see fit, if you do not understand something you can ask, you can suggest how to improve the plugin, do this through the forum.

If you have themes you would like us to add to the collection email us from the support page, these can be both free and premium, you will get full credit and links back to your website services.

Get the Plugin HERE:

Layout Stylesheet

/* Header Ad set the float and margins here */
#cms-header-ad {
display: block;
float:right;
height:60px;
margin-top:30px;
margin-left:0px;
margin-right:20px;
width:468px;
overflow:hidden;
}

There are only four settings we need to change here, float will place the adblock left or right, then you need to set the left or right margin and zero the other one, last is the top margin, header height – 60 and divided by two for ours 125-60 = 65,  65 / 2 =32.50 so we set ours at 30px

The paste this at the end of your style.css file remember to add start and end comments like this /* Start added by cms header  adSense block */

The Header Ad php code

<?php
/* update your ad here between ' ' */
$cmsmyadtext = 'replace with your adSense code here';
$cmsadtext = get_option('cms_banner_ad_text');
if ($cmsadtext != $cmsmyadtext) update_option('cms_banner_ad_text',$cmsmyadtext);
if(get_option('cms_banner_ad_text')){ ?>
<div id="cms-header-ad">
<?php echo stripslashes(get_option('cms_banner_ad_text')); ?>
</div>
<?php } ?>

This code will create and store the adsense code you enter between the single quotes on line 3 in a WordPress option, it will then compare this to what it gets back from the database, if it has been altered it will reset it to what you have in this file, to disable it just blank the text between the single quotes.

The Themes Header File

We now need to call this new file in the themes header file, you will need to know the structure of the header to place the code inside the correct tag, in our header we have placed the code in the art-header-jpg <div>.

<!-- Start CMS-Lite header ad  -->
<?php if (file_exists(TEMPLATEPATH . '/cms_inc/addons/cms-header-ad/cms-header-ad.php')){
    include_once(TEMPLATEPATH . '/cms_inc/addons/cms-header-ad/cms-header-ad.php');
} ?>
<!-- End CMS-Lite header ad  -->

Lets look at this code, the first line is our comment, the next line checks to see if our new file exists, if it exists the third line includes the code in the header, then we end with another comment.

Here is a screenshot with the Artisteer adSense block, I am sure i have seen that website before somewhere, please leave some feedback!

Adding a clickable logo to your theme is quite easy, you may have adsense, flash or another clickable area in your header so making the header clickable is not an real option, to overcome this you can add a clickable logo that has it’s own URL region, you will find the files in the addon folder which will be available soon, you can drop the folder into your theme or you can create the files from the code here, lets have a look at the css layout stylesheet first:

Stylesheet css

/* change the height width margin and float here */
/* header is 125px */
#cms-header-logo
{
 position: absolute;
 float:left;
 height:85px;
 margin-top:20px;
 margin-left:10px;
 width:300px;
 overflow:hidden;
 background-image: url('images/logo.png');
 background-repeat: no-repeat;
 background-position: center center;
}
/* change the height width for clickable area here */
#cms-header-logo a {
 position: absolute;
 display: block;
 height:85px;
 width: 300px;
}

What values do you need to change for your own theme:

Simple one this value places the logo position on the left or right:

float:left;

The height of your logo file:

height:85px;

The top margin is where it will fit horizontal to the top of the header section, on this website we have a header section of 125px, with an image height of 85, so to center the logo horizontal we make this value 20px.

margin-top:20px;

This is the indentation from the left, if your logo was on the right this would be margin-right, on this site we changed this to 10px to match the content.

margin-left:10px;

The width value of your logo here, ours is 300px.

width:300px;

The url which is the location and name of the logo image file relative to the themes root folder, notice there is no leading slash.

background-image: url('images/logo.png');

The second block of code is the clickable area, when you set an image as a background image it is not clickable, so you are adding a clickable area with the a tag, the size of this is the same as our logo in this example.

So you have the css code finished so you just paste this into the bottom of your css file, take time and enter some comments inside /* your comment */, this will enable you to identify your changes to move to a new theme, we will be publishing another post shortly on a good way to do this without using the themes file.

The Header logo php file

Instead of pasting the blocks of code into the header.php we will use another file and call this from the header with a single code line, this means that we can easy use the code on another theme, and we are not messing about with the core theme code and losing track of where we have been playing.

<?php
$logosrc = TEMPLATEPATH. '/images/logo.png';
if (file_exists($logosrc)){ ?>
 <div id="cms-header-logo">
 <a href=<?php echo "'http://www.digitalraindrops.net/'"; ?> ></a>
 </div>
<?php } ?>

This code will check if the logo exists in the themes folder, if it does it will create a div to hold the logo, the ‘a href’ is the url you want to direct the user to.

Save this code with a text editor with a php extention and place this in a folder in the themes root directory, use a good naming convention so you can relate to who created the file, we use csm-filename.php, so you could use your initials.

The Themes Header File

We now need to call this new file in the themes header file, you will need to know the structure of the header to place the code inside the correct tag, in our header we have placed the code in the art-header-jpg <div>.

<!-- Start CMS-Lite header logo  -->
<?php if (file_exists(TEMPLATEPATH . '/cms_inc/addons/cms-header-logo/cms-header-logo.php')){
    include_once(TEMPLATEPATH . '/cms_inc/addons/cms-header-logo/cms-header-logo.php');
} ?>
<!-- End CMS-Lite header logo  -->

Lets look at this code, the first line is our comment, the next line checks to see if our new file exists, if it exists the third line includes the code in the header, then we end with another comment.

You may be wondering what the <?php and ?> are for, in this code block they switch between html code and and the php code lines.