Differentiating posts within a list.
Did you know you can display your search results differently? This not only works with search results but any list, for example posts, archive list, etc. Take a look at the image below you will notice that the first post is displayed a little differently than the rest of the posts, it stands out more.
Our goal was to make all the posts within the video category display differently.
Let’s take this step by step. So in your stylesheet you already have a class called post or something of that nature to display each post. All we are going to do here is simply create a new class called .videoPost to make all the posts within the video category look different. You can go crazy here, but we chose to only display a video icon and shift the post content a little to the right.
So onto styling our .videoPost class, the easiest way to do this is to copy your .post class and alter it.
Here is out .videoPost class
.videoPost{background:#fff url(/wp-content/uploads/images/video_icon.png) no-repeat 0 2px;padding:8px 0 15px 90px;border-bottom:1px solid #d6ebff}, we styled it a bit, assigned an image to the background and padded it a little. Once you are all done styling your new class, save your style.css and lets keep moving on to the actual fun part.
Now we have to go into our search.php (our search results page). The page that is to actually display the search result. Remember you can do this to archive.php or index.php any other page that you would like your video category posts to display differently.
Going into our search.php we look for this bit of code <?php while (have_posts()) : the_post(); ?> <div class="post"> <h3 id="post-<?php the_ID(); ?>">
In English the starting of that code means, that if there is a post do X. What we want to do here is say, if there is a post and the post is in category “Video” display it a certain way with a certain style (.videoPost class) if it is not in that certain category than display it as you would, via the .post class. And here is how its done.
<?php while (have_posts()) : the_post(); $loopcounter++; ?>
<?php if ( in_category('66') ) { ?>
<div class="videoPost">
<?php } else { ?>
<div class="post">
<?php } ?>
<h4 id="post-<?php the_ID(); ?>"></h4>
<small><?php the_time('l, F jS, Y') ?></small>
<p style="margin:5px 0 5px 0;"><?php the_content_rss('', TRUE, '', 15); ?></p>
<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?> <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?></p>
</div>
Notice the <?php if ( in_category('66') ) { ?> that this is your “category indicator” by going to the manage category tab we know that our video category is category number 66, insert you own category number here.
What have you done? You have told wordpress that if the category is 66 display it via the .videoPost class; if not than display it via the .post class.
Bonus: There’s one more thing that is done here, notice this <?php the_content_rss('', TRUE, '', 15); ?> here we use the, the_content_rss template tag, and limit the number of characters to 15; by limiting the number of characters from being displayed we made sure that each result only displays 15 characters and thus our search results look uniform.
Go head to over to http://www.autoaggr.com and do a search and give it a shot.