Question

http://css-tricks.com/video-screencasts/

Try to look at this famous site which also powered by wordpress. The content in the loop is different from the single post. It use “dl” element in loop, but not main content in the single post. It something like it has a another brief summary of a post that will only display in loop.

So my trouble is how to display something(include image,article,video embedding) in the loop of multiple post but not display in single post itself, and vice versa.

Answer 1

First off, let’s start with what we know about the way this website is structured. The page that you’re looking at has either a Custom Post Type called “Video Screencasts”, or it’s using a Category of “Video Screencasts”, so the template used on the multiple post page is probably one of these:

If video-screencasts is a category

1. category-video-screencasts.php
2. category-{cat_id}.php
3. category.php

If video-screencasts is a Custom Post Type

1. archive-video-screencasts.php
2. archive.php
3. index.php (unlikely)

Ultimately, whatever template file it may be utilizing won’t make much of a difference for you. These are just the possible options for how you can organize your own website in a similar fashion.

Secondly, let’s look at the difference in structure between the multiple posts page and the single post page. The multiple post page is running a query, and returning a series of Featured Images and Excerpts based on the results of the query. The single post page is returning the actual Content of the post itself.

So now, we need to understand how we would DO something like this. So let’s start with the images:

This can be done one of two ways. When creating your theme, probably the most WordPress-friendly way you can attach a preview image to your posts is to Add Theme Support for Post Thumbnails. Another possible way would be to Add a Custom Field (perhaps name it “previewImg”) with a path to the image Thumbnail you would like to show.

As for the excerpts:

Posts and Pages have an optional Excerpt Field that you can set. To see this for yourself, navigate to your Post Editor, and look in the top right-hand corner of the page. You’ll see a button that says “Screen Options”. This will allow you to turn on various Post/Page controls that you can use to fine-tune your entries. Excerpts and Custom Fields are just two of the many options you can enable inside this area.

Every Post and Page has an Excerpt. Normally, WordPress will default to the first 50 or so words of your post’s content, but you can override this by placing HTML into your Post’s Excerpt Field. Now it’s just a matter of generating the loop:

<?php
$query = new WP_Query(array('category_name'=>'video-screencasts'));
if($query->have_posts()) : while($query->have_posts()) : $query->the_post();
?>
<div class="post_result">
    <a class="thumb" href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
    <h1 class="title"><?php the_title(); ?></h1>
    <p class="excerpt"><?php the_excerpt(); ?></p>
</div>
<?php
endwhile;endif;
?>

This is just an example that would work on a very basic level utilizing some of what I’ve described above. This is also assuming that “video-screencasts” is a category, and that theme support for Post Thumbnails has been enabled.

As for the single post template, the code itself would be minimal:

<?php
if(have_posts()) : while(have_posts()) : the_post();
?>
<h1 class="title"><?php the_title(); ?></h1>
<?php
the_content();
endwhile;endif;
?>

As mentioned, this is NOT exactly how their pages are set up and that these code examples are intended to illustrate how you can go about achieving what it is you want.

All in all, you’ll need to read up a bit on how to utilize a lot of functions to tailor everything to your needs, and get your feet wet by writing some of your own code. But overall, I think this covers everything you need to know to help get you started in the right direction.

Good luck.