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 :)

up vote 0 down vote accepted

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)

  • Both versions give me a complete blank home page ;( – Caro Jan 29 '15 at 21:21
  • What you posted up wasn't valid code ... and so I just posted up fragments of what you would need. If you update your question to include the entire page template, someone could possibly provide full working code instead of a snippet. – Privateer Jan 29 '15 at 21:23
  • I included the entire post formats and index php's now. does it make it clearer? – Caro Jan 29 '15 at 21:29
  • Yep, looks like you just need a one line edit now that I can see the code. – Privateer Jan 29 '15 at 21:57
  • just one line? ok, which code should i put where? – Caro Jan 29 '15 at 22:07

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.

  • I want the title and meta attributes to look different on the home page in the different formats, I can't do that with the css – Caro Jan 29 '15 at 20:53
  • Why not? Do you meant the titles of the posts? They are in the article. If you can upload the html for one of the articles I could probably show exactly how to do it. – Privateer Jan 29 '15 at 20:55
  • I want the post format "status" to be displayed as excerpts but the other format I use "quote" to be styled like in the content-quote.php – Caro Jan 29 '15 at 21:00
  • Oh, so you want different content drawn based on the post format. You might update your question to make that clearer. I'll note how to do that in a moment. – Privateer Jan 29 '15 at 21:06
  • Sorry, I didnt make that clearer. I'm new to Wordpress and its kinda hard to explain what I mean haha – Caro Jan 29 '15 at 21:07

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.