I would like to have different styles for my posts based on the content of each post

Question

Here is my wordpress theme to check out(its not completely finished): http://benlevywebdesign.com/wordpress/

This is my first time working with php/wordpress and making themes so keep that in mind. I have an index.php, css, and a 960.css file and don't know about the other files that you can include.

In my theme I would like to have different styles for my posts based on the content of each post like for images and video links or audio links.

I want to first focus on a photo style where the photo will be big and large and not the size of a thumbnail or regular post image.

Once I learn how to have different styles I can add more on my own because that is just the css!

---

Here is my current loop code:

    <!-- ***** Post **** -->
    <div class="grid_2 alpha">
        <div class="date_banner">
            <div class="d"><!-- sidebar 1 --><?php the_time('d'); ?></div>
            <div class="m"><!-- sidebar 1 --><?php the_time('M'); ?></div>
            <div class="y"><!-- sidebar 1 --><?php the_time('Y'); ?></div>
        </div>
        <div class="commentsnumber">
            <?php comments_number('No comment', '1 comment', '% comments'); ?>
        </div>
    </div>

    <div class="grid_10 omega">

      <div class="post">
        <div class="titlepostauthorimage">
            <div class="post-title">
                <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
            </div>
            <div class="post-author-image">

            </div>
            <div class="post-author">
                 <?php the_author_posts_link(); ?>
            </div>
            <div class="post-image">
                <?php the_post_thumbnail( $size, $attr ); ?> 
            </div>
        </div>

        <div class="post-body">
            <?php the_content(); ?>
        </div>
        <div class="post-meta">
            <?php the_category(', '); ?>
            <!-- post tags -->
        </div>
    </div>
    <div class="commentsarrow"> <?php wp_list_comments(); ?> </div>

    </div>
        <!-- ***** END post ***** -->
    <?php endwhile; else: ?>
        <!-- In case no posts were found -->
            <div class="post-cf">Hmmm? Can't. Find. Post.
            </div>
    <?php endif; ?>

---

Here is an example blog theme that is doing what I want(3rd post from the bottom) http://demo.kreativethemes.com/evolution/

---

I read about using the post_class() function and that I would need to create another php file for the post type, or that I could just code the mark up right into the loop if that's more what I prefer on this question CSS for Custom Post Types (and understood what they are doing but don't know how to actually do it)

I think I want to go with putting it right into the loop if that's not too complicated as I said earlier I don't know much about other files you can include.

Answer 1

Depending on which 'types' you need, you might be looking for the Post Format functionality. It allows you to set posts as standard, quotes, galleries, etc (sort of like Tumblr). To activate it, simply toss this into your theme (probably functions.php):

add_theme_support( 'post-formats', array( 'aside', 'gallery', 'quote' ) );

Then, in your templates, you've got some options. You can either use conditionals to go wild in single.php, or you can make PHP files for each post format. Inside single.php, you'd want something like this:

get_template_part( 'content', get_post_format() );

Which will check for the post format and load the appropriate file. That way, a gallery formatted post can easily have something like:

do_shortcode('[gallery]')

already inserted. The templates will just know when a gallery is being displayed and automatically show images.

Is that what you're after?

Answer 2

Use custom post formats. Would pretty much do exactly what you want!

http://codex.wordpress.org/Post_Formats

Sorry, I forgot to add that this would be a better practice to do. You could keep the divs with the grid classes in the loop, but then use get_template_part('content', get_post_format()); within that div.

That will load the template file 'content-video.php' if the post format was a video. In there it's business as usual with markup and php.

In the 'content-video.php' or whatever post type it is, you can load your CSS classes like usual.

Here's some more detail:

In functions.php file:

add_theme_support( 'post-formats', array( 'video', 'gallery' ) );

Then in your index.php file (the one with the loop), you could do this:

`while ( have_posts() ) : the_post(); get_template_part('content', get_post_format());`

That will get you the right content file, ie; content.php or content-video.php, etc.

Then in content-video.php, if you're displaying a youtube video for example:

`do_shortcode('youtube');`

With this in mind, you would have the following files:

functions.php - you'll need this sooner or later so it won't hurt to create it

content.php - this will have the markup specific to the content of a post. This is the generic one.

content-video.php - this is where you would put code that is different from all other content. Or in other words, specific to video.php

The index.php more or less just sets up the loop Hope this helps!