OK, sorted, I think.
What you can use this for.
Supposing that you have an ecommerce site. On your front page index.php you want to show images of all your categories. For example, if you're selling fruit trees you can have an image of a plum tree, an apple tree, and a pear tree.
These images are smallish, and floated left (say) with a nice padding, so that the front page has a clean look with pictures of all your main categories in the main body of the page.
Clicking on the image of an apple tree will take you to another page (category.php) with images of a russets apple tree, a cox's apple tree, a golden delicious apple tree (basically just smallish images in posts, with no text, also floated left, say). You can take this a lot further, but that's all I wanted to achieve for the moment.
This would be ideal for clients wanting to manage their own ecommerece sites even with very little HTML or WP expertise. All they need to do is upload appropriate images to the theme images directory. Everything else should be manageable from within the Admin Panel.
You could do a LOT more with this, but this is a good starting point.
How it's done.
Create a category. Get its ID. Add subcategories. It's the subcategories that will be shown on the homepage index.php
You can still have sidebar links to various categories using `<?php wp_list_categories('child_of=1'); ?>
<?php wp_list_categories('child_of=3'); ?>
<?php wp_list_categories('child_of=6'); ?>`
etc.
Use the main category ID in the following code. Place it outside of The Loop e.g. bang in the middle of the page.
Hope this works for other people. If not, back to the drawing board.
It's not as sophisticated as the previous examples i.e. there's no default image, but hopefully it's more solid.
<?php
$image_path = get_bloginfo('stylesheet_directory');
$cats = get_categories('child_of=22');
$count=1;
foreach ((array)$cats as $cat) {
$catdesc = attribute_escape(strip_tags($cat->category_description));
$image = $cat->category_nicename .'.jpg';
$cat_img = '<div class="category-image" id="cat-image-'.$count.'"'.'><a href="' . get_category_link($cat) . '" title="'. $catdesc .'"><img class="image-for-category" src="' . $image_path . '/images/' . $image . '" alt="' . $cat->cat_name . '" /></a></div>'."\n\n";
echo $cat_img ;
$count++;
}
?>
And the output is like this:
<div class="category-image" id="cat-image-1"><a href="http://www.mysite.com/index.php/category/apples/" title=""><img class="image-for-category" src="http://www.mysite.com/wp-content/themes/whatever/images/apples.jpg" alt="apples" /></a></div>
<div class="category-image" id="cat-image-2"><a href="http://www.mysite.com/index.php/category/pears/" title=""><img class="image-for-category" src="http://www.mysite.com/wp-content/themes/whatever/images/pears" alt="pears" /></a></div>
Note that you can use nice names e.g. the slug that describes your category. So the slug for apple trees will by default be apple-trees, but if you choose can simply be apples. (Choose your slug when adding subcategories). Name your images after these 'slugs' e.g. apples.jpg
davidemorgan
richarduk
teerock
