Two different styles for blog posts on frontpage

First, you should set up a Child Theme so that your customizations are not wiped out by the next Twenty Ten update.

Then, you can modify loop.php by adding a counter to change the post class:

<?php /* How to display all other posts. */ ?>

	<?php else : ?>
		<?php $class = (++$post_count > 3) ? 'older-post' : 'newer-post'; ?>
		<div id="post-<?php the_ID(); ?>" <?php post_class($class); ?>>

Use new CSS selectors for these classes to style the posts differently.

Thank you very much for your help. Seems to be what I need. Where exactly in the loop.php shall I place this code?

Out of interest how would I go about editing TwentyTen so that it doesn’t wipe out my changes when it updates. i.e. not using a child theme just making my own adult theme? I have changed the Theme name in the CSS files. Not sure if that is enough?

Change this:

<?php /* How to display all other posts. */ ?>

	<?php else : ?>
		<div id="post-<?php the_ID(); ?>" <?php post_class($class); ?>>

to this:

<?php /* How to display all other posts. */ ?>

	<?php else : ?>
		<?php $class = (++$post_count > 3) ? 'older-post' : 'newer-post'; ?>
		<div id="post-<?php the_ID(); ?>" <?php post_class($class); ?>>

I have not made a new theme like this, but I think all you have done all you need to do.

Works perfectly. Thank you very much for your help.

Okay the initial problem has now been resolved. And indeed the new CSS classes seem to be working well.

My next question however, is how do I now go about altering the layouts of the newly created CSS classes? I am assuming I need some PHP IF function in the loop.php e.g.

IF post = newer-post (display like this)
IF post = older-post (display a different way.

Obviously the formatting I can now change in style.css but I’m just looking at sorting out the layout.

If you just want to list titles for the older-post class on the front page, you need to put in an if-test and an endif. Try changing this:

<div class="entry-meta">
				<?php twentyten_posted_on(); ?>
			</div><!-- .entry-meta -->

	<?php if ( is_archive() || is_search() ) : // Only display excerpts for archives and search. ?>
			<div class="entry-summary">

to this:

<?php if ($class == 'newer-post' || !is_front_page()) : ?>
			<div class="entry-meta">
				<?php twentyten_posted_on(); ?>
			</div><!-- .entry-meta -->

	<?php if ( is_archive() || is_search() ) : // Only display excerpts for archives and search. ?>
			<div class="entry-summary">

And this:

</div><!-- .entry-utility -->

to this:

<?php endif; ?>
			</div><!-- .entry-utility -->

Thanks for your help again. It’s not 100% what I want but certainly in the right direction.

How do I now change the CSS to allow me to format ‘newer-post’ and ‘older-post’ differently? I mean I want everything from the date publish, post title, comments etc… to be displayed differently depending on whether they are a newer post or older post.

OK – the last bit of code was meant to only display the titles of older posts. If you want to display everything for them but style it differently, throw out that code.

Then, you must add the new class to all the places that you want to appear differently. For example, for the title, you would change this:

<h2 class="entry-title">

to this:

<h2 class="entry-title <?php echo $class; ?>">

Do that wherever ‘class=something’ is found. Then, use the newer-post and older-post classes as selectors, along with the original class, to style the element.

One last question I hope. Assuming I follow your instructions and apply the <?php echo $class;?>”> to every class I find. Can you just give me an example of the code I would use in the CSS if I wanted the following:

Newerposts: Post title : red & right-aligned
Post body: white

Olderposts: Post title: blue
Post body: bold

For the title, the colors are applied to the link’s a tag, like this:

#content .entry-title.newer-posts a { color: red; }

The alignment is applied to the containing div, like this:

#content .entry-title.newer-posts { float: right; }

For the content, you want something like this:

#content .entry-content.older-posts { font-weight: bold;}

Your best bet is to use Firefox with Firebug so you can play with the CSS without having to edit the style.css file for each test.

Doesn’t seem to work. So far I have this in the loop.php

<?php /* How to display all other posts. */ ?>

<?php else : ?>
<?php $class = (++$post_count > 3) ? ‘older-post’ : ‘newer-post’; ?>
<div id=”post-<?php the_ID(); ?>” <?php post_class($class); ?>>
<h2 class=”entry-title <?php echo $class; ?>”>” title=”<?php printf( esc_attr__( ‘Permalink to %s’, ‘twentyten’ ), the_title_attribute( ‘echo=0’ ) ); ?>” rel=”bookmark”><?php the_title(); ?></h2>

<div class=”entry-meta”>
<?php twentyten_posted_on(); ?>
</div><!– .entry-meta –>

And have entered the suggested CSS lines above but I see no difference. Am I missing something in the loop.php or do I have to put the CSS lines in particular place in the CSS.

The CSS should go at the end of the file so it overrides any other rules that are defined for those elements.

I really can’t debug this without being able to look at your site.

My site is at https://www.the-dutch-touch.com

As I say at the moment there is simply test data there. Aside from changing the nav menu I have barely touched anything. Would you also need to see the loop.php / style.css?

You have your work cut out for you.

1. You have deleted a closing brace at the end of the original style.css. Start with a fresh copy.
2. You made the name of the new class ‘newer-posts‘, but in the CSS, you used ‘newer-post’. These must be identical.
3. You specified a color as ‘123456’. Color numbers must be preceded by a pound sign: ‘#123456’

D’oh. Even for my skill level I’ve made some basic errors there.

I have completed the 3 steps, but still I don’t see any changes in the newer / older post stylings.