How to create category archives like 101 Cookbooks?

If this can’t be done with WP excerpts and categories, is there a way to modify Snazzy Archives so that it shows the categories instead of the months/date?

Hi

I’m sure there is more than one way to do this, but maybe try this out:

– Prepare your thumbnail images in PS or whatever.
– Write a few posts as per the next few points:
– In each post go to insert an image, upload the appropriate theumbnail image for the post. Do not insert into the post, but instead, where it gives the url for the image, copy this full location. Close the image upload window
– Go to custom fields at the bottom and (in the first instance) create a new field called front_page_thumb (for this example). In the value, paste in the URL of the image you just uploaded. Update the field.
– Type in an excerpt, or, if you plan to have a different blurb for your front page extract, create another custom field called something like front_page_excerpt and add your content there.
– Finish up writing the post.
– Repeat a few times!
– Open your index.php file, and go to the loop. Beneath the “while” line of the loop (which contains the $wp_query string) add:

<?php $thumbnail = get_post_meta($post->ID, 'front_page_thumb', $single = true); ?>

Next, add something like the following (I’m including some kind of basic markup for containers, which hopefully is self-explanatory):

[SEE CODE BELOW!!]

After that comes any other info for each post you want to include, then the endwhile.

The if statement above says that if your custom field is not blank, i.e. you entered a value, display the image as per the URL value you entered. It’ll do this for each post in the loop. You can copy and customise the image thumb for a custom summary in the same way.

Then all you need to do is style your listing accordingly.

Hope this helps

J

Oh, and my assumption above is that you’re modifying index.php because this is a listing on your home page…

J

Code got fudged in the above. Trying again…

<div class="summary-container">

<?php if($thumbnail !=='') { ?>
<div class="post_thumb"><a href="<?php the_permalink() ?>" rel="bookmark" title="Click here to go to <?php the_title(); ?>"><img src="<?php echo get_post_meta($post->ID, "front_page_thumb", true);?>" class="front_page_thumb" alt="image for <?php the_title(); ?>" /></a></div>
<?php } ?>

<div class="post_summary"><?php the_content('Read the rest of this entry &raquo;'); ?></div>

</div><!-- end summary container -->

Thank you for this SpankMarvin! You are so completely awesome.

Two questions:

1. Where would I add the front_page_excerpt to the code above?

2. I don’t want this to show up on the front page, but in the category archives. So, for instance, if you clicked on the “Quick Breads” category you would see thumbnails and brief descriptions for all the posts in that category. So would I still add the code to index.php? Or somewhere else?

Thank you for your help!

Check out the codex for list hierarchies. If you apply this to index.php, it should affect all category listings too, unless you have a custom category.php file. If you don’t have this file, WP will look for archive.php, then I believe index.php. You’ll need to modify whichever is the relevant file to get your listings how you want them.

If you’re using the standard “Excerpt” field in the post editor, I think it should just add that automatically. You could expand the code above to include a custom summary if you’d rather – for listings. So, in addition to the setup for the thumbnail, you’d create one for the other custom field you create:

<?php $thumbnail = get_post_meta($post->ID, 'front_page_thumb', $single = true); ?>
<?php $custom_summary = get_post_meta($post->ID, 'front_page_excerpt', $single = true); ?>

Then add it to your loop:

<div class="summary-container">

<?php if($thumbnail !=='') { ?>
<div class="post_thumb"><a href="<?php the_permalink() ?>" rel="bookmark" title="Click here to go to <?php the_title(); ?>"><img src="<?php echo get_post_meta($post->ID, "front_page_thumb", true);?>" class="front_page_thumb" alt="image for <?php the_title(); ?>" /></a></div>
<?php } ?>

<div class="post_summary">
<?php if($custom_summary !=='') { ?>
<?php echo get_post_meta($post->ID, "front_page_excerpt", true);?>
<a href="<?php the_permalink() ?>" title="Read full article">Read full article</a>

<?php } ?>

<?php if($custom_summary =='') { ?>
<?php the_content('Read the rest of this entry &raquo;'); ?>
<?php } ?>
</div>

</div><!-- end summary container -->

This looks for the thumbnail value. If there is one, it adds the image code accordingly. It then looks for a custom field called front_page_excerpt. For each post, if this value has been entered, it adds that to the front page with link to the main post. Next, if the value for the front_page_excerpt IS blank, it defaults to the standard excerpt, or if all else fails, outputs the main content of the post. You could have put else in up there, but I’ve run into problems doing that in this instance (probably some bad coding on my part somewhere) and I know this way ought to work.

You can easily apply this to category listings – the format of category.php is the same. Open category.php (or create it by copying and renaming archive.php or index.php) and add the code.

So, after the <?php if (have_posts()) : ?> line, put in your main overall container for all the posts.

After the while line, set up the variables, and add the content for each post.

Make sense?

J

Tidier version of the above:

<div class="summary-container">

<?php if($thumbnail !=='') { ?>
<div class="post_thumb"><a href="<?php the_permalink() ?>" rel="bookmark" title="Click here to go to <?php the_title(); ?>"><img src="<?php echo get_post_meta($post->ID, "front_page_thumb", true);?>" class="front_page_thumb" alt="image for <?php the_title(); ?>" /></a></div>
<?php } ?>

<div class="post_summary">
<?php if($custom_summary !=='') {
echo get_post_meta($post->ID, "front_page_excerpt", true);?>
<a href="<?php the_permalink() ?>" title="Read full article">Read full article</a>

<?php }
if($custom_summary =='') {
the_content('Read the rest of this entry &raquo;');
} ?>
</div>

</div><!-- end summary container -->

You are a genius SpankMarvin! Thank you, thank you!

I created the category.php and implemented the code as you said. It works great, but there is one issue I’m seeing which is – posts are only showing up in 1 category.

For instance, the jelly-filled doughnuts I made last month should be showing up in the Yeasted Breads category and the Desserts category, but it only shows up in yeasted breads. Any idea how to make posts with more than 1 category show up in all the category pages they’re assigned to?

I just noticed another problem – only one thumbnail shows up on any category page. ?? There should be 3 on the desserts page already. Any idea how to fix this?

Below is the code I’m using – thank you again!

<?php get_header(); ?>

	<div id="content" class="narrowcolumn">

		<?php if (have_posts()) : ?>

 <?php $post = $posts[0]; // Hack. Set $post so that the_date() works. ?>
<?php /* If this is a category archive */ if (is_category()) { ?>
<h2 class="title">Archive for the '<?php echo single_cat_title(); ?>' Category</h2>

<?php /* If this is a daily archive */ } elseif (is_day()) { ?>
<h2 class="title">Archive for <?php the_time('F jS, Y'); ?></h2>
<?php /* If this is a monthly archive */ } elseif (is_month()) { ?>
<h2 class="title">Archive for <?php the_time('F, Y'); ?></h2>
<?php /* If this is a yearly archive */ } elseif (is_year()) { ?>
<h2 class="title">Archive for <?php the_time('Y'); ?></h2>
<?php /* If this is a search */ } elseif (is_search()) { ?>
<h2 class="title">Search Results</h2>

<?php /* If this is an author archive */ } elseif (is_author()) { ?>
<h2 class="title">Author Archive</h2>

<?php /* If this is a paged archive */ } elseif (isset($_GET['paged']) && !empty($_GET['paged'])) { ?>
<h2 class="title">Blog Archives</h2>
<?php } ?>

<div align="center">
<?php /* If this is a category archive */ if (is_category()) { ?>
<p>You are currently browsing the archives for the <?php single_cat_title(''); ?> category.</p>
<?php /* If this is a yearly archive */ } elseif (is_day()) { ?>

<?php } ?>
</div>

<!-- start summary container -->
<div class="summary-container">

<?php if($thumbnail !=='') { ?>
<div class="post_thumb"><a href="<?php the_permalink() ?>" rel="bookmark" title="Click here to go to <?php the_title(); ?>"><img src="<?php echo get_post_meta($post->ID, "front_page_thumb", true);?>" class="front_page_thumb" alt="image for <?php the_title(); ?>" /></a></div>
<?php } ?>

<div class="post_summary"><strong><a href="<?php echo get_permalink() ?>" rel="bookmark" title="Permanent Link: <?php the_title(); ?>"><?php the_title(); ?></a></strong><br /> <?php the_time('F j, Y'); ?>.
<br />
<?php if($custom_summary !=='') {
echo get_post_meta($post->ID, "front_page_excerpt", true);?><br />
<a href="<?php the_permalink() ?>" title="Read the full article"> Read the full article</a>

<?php }
if($custom_summary =='') {
the_content('Read the rest of this entry &raquo;');
} ?>
</div>

</div>
<!-- end summary container -->	

		</div>
	<?php else : ?>
		<h2 class="center">Not Found</h2>
		<?php include (TEMPLATEPATH . '/searchform.php'); ?>

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

I think I see the problem, which might be the cause of both your issues.

Firstly, I see there’s an extra closing div tag toward the bottom of your code above. since I don’t know what div tags you’ve started in your header, this might be correct, but you have a LOT of validation errors, and this could be one of the causes of that. My guess is that taking out the </div> beneath the end summary container comment might help.

Re your one-post-only problems — your loop appears to be loopless!! You need a “while” in there for the loop to, err, loop through the posts. You also need to set up the thumbnail and custom_summary variables prior to their usage. Though this might not be giving you issues now, it will do in the future.

Here is a suggested amended version of your code above. Not the addition of an opening “while” loop and its closure after the summary container. This means that each post will appear in its own summary container, and all of these containers will be inside the main content div. Directly after opening the “while” statement, create the two variables prior to their use. The code below has also removed what appears to be the stray closing div tag beneath the summary container. I believe that to be the correct thing to do, unless I’m missing something

[DURRRRR, CODE BELOW AGAIN. SORRY.]

I would strongly recommend validating this page on w3c validator service. When I looked there were 340 errors. Removing the stray closing tag might help some, but you might need to go through each of the errors and recheck each time. Many of them are probably knock-on errors created by the odd stray bit of code gone bad.

Let me know how you get on with this.

J

Not sure how I keep messing up the code formatting. Try again:

<?php get_header(); ?>

<div id="content" class="narrowcolumn">

<?php if (have_posts()) : ?>

<?php $post = $posts[0]; // Hack. Set $post so that the_date() works. ?>
<?php /* If this is a category archive */ if (is_category()) { ?>
<h2 class="title">Archive for the '<?php echo single_cat_title(); ?>' Category</h2>

<?php /* If this is a daily archive */ } elseif (is_day()) { ?>
<h2 class="title">Archive for <?php the_time('F jS, Y'); ?></h2>
<?php /* If this is a monthly archive */ } elseif (is_month()) { ?>
<h2 class="title">Archive for <?php the_time('F, Y'); ?></h2>
<?php /* If this is a yearly archive */ } elseif (is_year()) { ?>
<h2 class="title">Archive for <?php the_time('Y'); ?></h2>
<?php /* If this is a search */ } elseif (is_search()) { ?>
<h2 class="title">Search Results</h2>

<?php /* If this is an author archive */ } elseif (is_author()) { ?>
<h2 class="title">Author Archive</h2>

<?php /* If this is a paged archive */ } elseif (isset($_GET['paged']) && !empty($_GET['paged'])) { ?>
<h2 class="title">Blog Archives</h2>
<?php } ?>

<div align="center">
<?php /* If this is a category archive */ if (is_category()) { ?>
<p>You are currently browsing the archives for the <?php single_cat_title(''); ?> category.</p>
<?php /* If this is a yearly archive */ } elseif (is_day()) { ?>

<?php } ?>
</div>

<!-- start summary container -->
<div class="summary-container">
<?php while (have_posts()) : the_post(); ?>
<?php $thumbnail = get_post_meta($post->ID, 'thumbnail', $single = true); ?>
<?php $custom_summary = get_post_meta($post->ID, 'front_page_excerpt', $single = true); ?>
<?php if($thumbnail !=='') { ?>
<div class="post_thumb">" rel="bookmark" title="Click here to go to <?php the_title(); ?>"><img src="<?php echo get_post_meta($post->ID, "front_page_thumb", true);?>" class="front_page_thumb" alt="image for <?php the_title(); ?>" /></div>
<?php } ?>

<div class="post_summary">" rel="bookmark" title="Permanent Link: <?php the_title(); ?>"><?php the_title(); ?>
<?php the_time('F j, Y'); ?>.

<?php if($custom_summary !=='') {
echo get_post_meta($post->ID, "front_page_excerpt", true);?>
" title="Read the full article"> Read the full article

<?php }
if($custom_summary =='') {
the_content('Read the rest of this entry ?');
} ?>
</div>

</div>
<!-- end summary container -->
<?php endwhile; ?>

<?php else : ?>
<h2 class="center">Not Found</h2>
<?php include (TEMPLATEPATH . '/searchform.php'); ?>

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

Thank you for getting back to me again SpankMarvin! I wasn’t aware there are so many validation errors on my site…. will have to go through them and see if I can fix whatever is causing them.

As for the code, I implemented the changes you suggested and now all the thumbnails are showing up – but so are the full posts. You can see an example of this on the Fruits page.

Also, how do I set it so all the posts in the category appear? I assume that only 2 appear because I have the “Reading” setting in WP-admin set to 2 posts for the front page. But in the category archives I want all the posts to appear.

Thank you again! I am going to add your name/link to the credits on my sidebar if that’s ok with you?

It looks like most of the errors are coming from the table tags – I built my template using a table instead of a CSS layout, because that’s what I was able to do on my own. (Sad, I know.) It’s marking nearly all the closing TD tags as errors, but there’s no way for me to change them in the code without breaking the entire site…

I copied and pasted your code just now (previously I had just added the loop) and now none of the thumbnails appear. It’s just text like this (Desserts Archive):

” rel=”bookmark” title=”Permanent Link: Chocolate Toffee Cookies with Toasted Pecans”>Chocolate Toffee Cookies with Toasted PecansDecember 31, 2008. Chocolate and toffee are irresistible on their own, but if you put them together? Whoo whee! Trust me. You need to make these cookies.” title=”Read the full article”> Read the full article
” rel=”bookmark” title=”Permanent Link: Blueberry & Raspberry Jelly Doughnuts for a Happy Chanukah”>Blueberry & Raspberry Jelly Doughnuts for a Happy ChanukahDecember 22, 2008. Sufganiyot are ball-shaped doughnuts that are first fried, then pierced and injected with jelly and sprinkled with powdered sugar. This post also has a recipe for hot chocolate.” title=”Read the full article”> Read the full article

In other words, instead of showing the thumbnails & excerpts, it just wrote out the titles and some of the code.

I think there’s something messed up in the code as I pasted it in. Let me try again. Looks like the summary code got fudged. Annoying, can’t work out what I’m doing wrong when I make it code in this editor…

Right, here goes — hopefully this should sort out your summary issues:

<?php get_header(); ?>

	<div id="content" class="narrowcolumn">

		<?php if (have_posts()) : ?>

 <?php $post = $posts[0]; // Hack. Set $post so that the_date() works. ?>
<?php /* If this is a category archive */ if (is_category()) { ?>
<h2 class="title">Archive for the '<?php echo single_cat_title(); ?>' Category</h2>

<?php /* If this is a daily archive */ } elseif (is_day()) { ?>
<h2 class="title">Archive for <?php the_time('F jS, Y'); ?></h2>
<?php /* If this is a monthly archive */ } elseif (is_month()) { ?>
<h2 class="title">Archive for <?php the_time('F, Y'); ?></h2>
<?php /* If this is a yearly archive */ } elseif (is_year()) { ?>
<h2 class="title">Archive for <?php the_time('Y'); ?></h2>
<?php /* If this is a search */ } elseif (is_search()) { ?>
<h2 class="title">Search Results</h2>

<?php /* If this is an author archive */ } elseif (is_author()) { ?>
<h2 class="title">Author Archive</h2>

<?php /* If this is a paged archive */ } elseif (isset($_GET['paged']) && !empty($_GET['paged'])) { ?>
<h2 class="title">Blog Archives</h2>
<?php } ?>

<div align="center">
<?php /* If this is a category archive */ if (is_category()) { ?>
You are currently browsing the archives for the <?php single_cat_title(''); ?> category.

<?php /* If this is a yearly archive */ } elseif (is_day()) { ?>

<?php } ?>
</div>

<!-- start summary container -->
<div class="summary-container">
<?php while (have_posts()) : the_post(); ?>
<?php $thumbnail = get_post_meta($post->ID, 'front_page_thumb', $single = true); ?>
<?php $custom_summary = get_post_meta($post->ID, 'front_page_excerpt', $single = true); ?>

<?php if($thumbnail !=='') { ?>
<div class="thumbnail_main_link"><a href="<?php the_permalink() ?>" rel="bookmark" title="Click here to go to <?php the_title(); ?>"><img src="<?php echo get_post_meta($post->ID, "front_page_thumb", true);?>" class="front_page_thumb" alt="image for <?php the_title(); ?>" /></a></div>
<?php } ?>

<div class="post_summary"><strong><a href="<?php echo get_permalink() ?>" rel="bookmark" title="Permanent Link: <?php the_title(); ?>"><?php the_title(); ?></a></strong> <?php the_time('F j, Y'); ?>.

<?php if($custom_summary !=='') {
echo get_post_meta($post->ID, "front_page_excerpt", true);?>
<a href="<?php the_permalink() ?>" title="Read the full article"> Read the full article</a>

<?php }
if($custom_summary =='') {
the_content('Read the rest of this entry &raquo;');
} ?>
</div>

</div><!-- end summary container -->	

<?php endwhile; ?>
<?php else : ?>
		<h2 class="center">Not Found</h2>
		<?php include (TEMPLATEPATH . '/searchform.php'); ?>

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

J