Style post formats differently on the home page

Question

I was wondering how I can style different post formats differently on the home page.

I set up all the formats and grabbed this code from a tutorial website, that displays all the different formats on the page:

index.php

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

            <?php while ( have_posts() ) : the_post(); ?>

                <?php get_template_part( 'content', get_post_format() ); ?>

            <?php endwhile; ?>



        <?php else : ?>

            <article id="post-0" class="post no-results not-found">
                <section>
                    <h3><a href="#">Oops!</a></h3>

                    <p>
                        Sorry No Content here!
                    </p>
                <section>
            </article><!-- #post-0 -->

        <?php endif; ?>
        <div id='postNavi'>
            <div class='older'><?php next_posts_link('Older Entries &raquo;');?></div>
            <div class='newer'><?php previous_posts_link('&laquo; Newer Entries');?>    </div>
        </div>
<?php
    get_footer();
?>

The two formats I use are: content-aside.php

<article id="post-<?php the_ID(); ?>" <?php post_class();?> >
            <h1>
                <?php if(is_single()) {?>
                <?php the_title();?>
                <?php } else { ?>
                <a href="<?php the_permalink();?>"><?php the_title();?></a>
                <?php }?>
            </h1>
            <div class='postMeta2'>
                <a href="<?php the_permalink();?>"><?php the_time('j. F Y') ; ?> </a>
            </div>

   <section class='multi-column'>
                <?php
                    the_content('Weiterlesen');
                ?>
            </section>
            <div class='postInfo'>

<div class='postCategories'>
                    Bereich: <br> <?php the_category(', ') ?>
                </div>              
            </div>
        </article>

and content-quote.php

<article id="post-<?php the_ID(); ?>" <?php post_class();?> >
            <center><h11>
                <?php if(is_single()) {?>
                <?php the_title();?>
                <?php } else { ?>
                <a href="<?php the_permalink();?>"><?php the_title();?></a>
                <?php }?>
            </h11></center>

            <div class='postMeta'>
                <a href="<?php the_permalink();?>"><?php the_time('j. F Y') ; ?></a>
            </div>
            <section>
                <blockquote>
                <?php
                    the_content('read the rest');
                ?>
                </blockquote>
            </section>
            <div class='postInfo'>


                <div class='postCategories'>
                    posted under: <?php the_category(', ') ?>
                </div>
            </div>
        </article>

I want the the post format "quote" to stay this way, but i want to have the "content-aside" posts as excerpts (without setting up a custom excerpt for every post). Right now it displays the entire post of the format "aside".

I'm fairly new to Wordpress and I hope you can help me.

Thanks in advance :)

Answer 1

Ok, your theme is already set up to use different post formats, so in your case you would just need to do the following:

Change the line in content-aside.php that reads

the_content('Weiterlesen');

To read

the_excerpt();

Change just that one line, save your changes, and it should work how you want.

• the_content() echos the post content
• the_excerpt() echos the excerpt

By changing the_content() to the_excerpt() in the content-aside.php file, you will make your aside posts just display the excerpt.

(removed the long explanation now that we can see what you have to work with)

Since it uses that loop on both, try the following instead

<article id="post-<?php the_ID(); ?>" <?php post_class();?> >
        <h1>
            <?php if(is_single()) {?>
            <?php the_title();?>
            <?php } else { ?>
            <a href="<?php the_permalink();?>"><?php the_title();?></a>
            <?php }?>
        </h1>
        <div class='postMeta2'>
            <a href="<?php the_permalink();?>"><?php the_time('j. F Y') ; ?> </a>
        </div>
        <section class='multi-column'>
            <?php
                if ( is_home() ) {
                    the_excerpt();
                } else {
                    the_content('Weiterlesen');
                }
            ?>
        </section>
        <div class='postInfo'>
            <div class='postCategories'>
                Bereich: <br> <?php the_category(', ') ?>
            </div>              
        </div>
    </article>

That should do the trick (just adds a check to only do the_excerpt() on the home page)

Answer 2

You should be able to use css like the following

.home article.format-<name> { background: #F00; }

Where is the format you want to modify the post for.

You can view the page source and look at the classes added to each article to be sure of the exact names to target.

In the above

• .home should exist in the body of the page (most themes include these properly)
• .format- should be a class in each article shown on the page

To reach the title

.home article.format-<name> h1 { custom styling here for title }
.home article.format-<name> .postMeta2 { custom styling here for meta }

And I think the example code you put up is broken ... there seems to be a while { } else { } statement in there unless I'm seeing it wrong.