Sounds like you want the first (latest) post to be full width with the 4 below it in a row with only the image and an excerpt.
If that is the case, you can use a counter in the loop to set the proper divs to arrange the posts like that.
The code should look something like this:
<?php if (have_posts()) :
while (have_posts()) : the_post();
if (++$c == 1) {
echo '<div class="fullwidth">';
} elseif (($c -1 ) % 4 == 1) {
echo '<div class="newrow">';
echo "<div class='$postclass'>";
} else {
echo "<div class='$postclass'>";
}
// Code here to display a post
echo '</div><!-- End of post -->';
if ($c > 1 && ($c - 1) % 4 == 0) {
echo '</div><!-- End of row -->';
}
endwhile;
if ($c > 1 && ($c - 1) % 4 != 0) {
echo '</div><!-- End of row -->';
}
else :
// Code here for no posts found
endif;
?>
Then, set up the CSS for fullwidth, newrow, and postclass.
Hello thanks for replying, I tried using the code you gave me customising it a bit and so on. However I have tried numerous times to get this to work and I just can’t seem to get it to. Is there no other way of doing this? I wanted it to look something like this :
Click Here
Thanks again.
The code I gave works to set up the div’s. You can see where I tested it in this screen shot (after I changed the posts per row to 3 per your sample).
The code and CSS:
<style>
.fullwidth { width: 98%; border: 2px solid black; }
.newrow { width: 98%; }
.postclass {width: 30%; float: left; margin: 4px; border: 2px solid green; }
</style>
<?php
// This code shows how to use a counter to show the first post full width
// with the remaining ones 3 to a row.
echo '<h2>Testing rows</h2>';
$postclass = 'postclass';
for ($i=1;$i<12;++$i) {
if (++$c == 1) {
echo '<div class="fullwidth">';
} elseif (($c -1 ) % 3 == 1) {
echo '<div class="newrow">';
echo "<div class='$postclass'>";
} else {
echo "<div class='$postclass'>";
}
echo "A post goes here. c is $c";
echo '</div><!-- End of post -->';
if ($c > 1 && ($c - 1) % 3 == 0) {
echo '</div><!-- End of row -->';
}
}
if ($c > 1 && ($c - 1) % 4 != 0) {
echo '</div><!-- End of row -->';
}
?>
Perhaps I am getting this wrong, where exactly must this code be placed. I have tried it both in the loop.php file along with the page.php file.
Thanks for the code though, I am sure it will be much useful when i get it working. 🙂
The part of code within my loop file that gets the results is this:
<?php ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php?>
<?php else : ?>
<div id="maincontent">
<br>
<div id="posttitle">
<a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a>
</div>
<div id="postdate">
<?php twentyten_posted_on(); ?>
</div>
<?php if ( is_archive() || is_search() ) : ?>
<?php the_excerpt(); ?>
<?php else : ?>
<?php the_content( __( 'Continue reading →', 'twentyten' ) ); ?>
<?php wp_link_pages( array( 'before' => '' . __( 'Pages:', 'twentyten' ), 'after' => '' ) ); ?>
<?php endif; ?>
</div>
<?php if ( count( get_the_category() ) ) : ?>
<?php endif; ?>
<?php
$tags_list = get_the_tag_list( '', ', ' );
if ( $tags_list ):
?>
<?php printf( __( 'Tagged %2$s', 'twentyten' ), 'entry-utility-prep entry-utility-prep-tag-links', $tags_list ); ?>
<?php endif; ?>
<?php comments_template( '', true ); ?>
<?php endif; ?>
<?php endwhile; ?>
Whilst my page.php file consists of:
<?php
get_header(); ?>
<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
<style>
<?php if ( is_front_page() ) { ?>
<h2><?php the_title(); ?></h2>
<?php } else { ?>
<h1><?php the_title(); ?></h1>
<?php } ?>
<?php the_content(); ?>
<?php endwhile; ?>
<?php get_footer(); ?>
I probably should have stuck to normal web design 😛
The twentyten theme is not the easiest to modify for that. You might be better off starting with a theme that uses a ‘Featured Post’, but here goes. Back up loop.php and change as follows.
Change this:
<?php /* How to display all other posts. */ ?>
<?php else : ?>
?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
to this:
<?php /* How to display all other posts. */ ?>
<?php else : ?>
<?php // Code to have wide first post, then rows under it.
$posts_per_row = 3; // The number of posts on rows after first.
if (++$c == 1) {
echo '<div class="fullwidth">';
} elseif (($c - 1) % $posts_per_row == 1) {
echo '<div class="newrow">';
echo '<div class="narrowpost">';
} else {
echo '<div class="narrowpost">';
}
?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
Change this;
</div><!-- .entry-utility -->
</div><!-- #post-## -->
<?php comments_template( '', true ); ?>
to this:
</div><!-- .entry-utility -->
</div><!-- #post-## -->
</div><!-- End fullwidth or narrowpost -->
<?php if ($c > 1 && ($c - 1) % $posts_per_row == 0) {
echo '</div><!-- End of row -->';
} ?>
<?php comments_template( '', true ); ?>
Change this:
<?php endwhile; // End the loop. Whew. ?>
<?php /* Display navigation to next/previous pages when applicable */ ?>
to this:
<?php endwhile; // End the loop. Whew. ?>
<?php
if ($c > 1 && ($c - 1) % 4 != 0) {
echo '</div><!-- End of row -->';
} ?>
<?php /* Display navigation to next/previous pages when applicable */ ?>
And use CSS similar to this:
.fullwidth {
width: 98%;
border: 2px solid black;
}
.newrow {
width: 98%;
}
.narrowpost {
width: 30%;
float: left;
margin: 4px;
border: 2px solid green;
}
I think I am going to have to take a different approach to doing this, because it’s really not working for me, I might just start again or build on top of another theme. The code looks right to me, and I can see you got it working yourself.
Thanks for your help though vtxyzzy, seriously I appreciate it a lot.
I have found a theme now, which im just going to use the foundations of and strip away the rest of the stuff.
So like I said, thank you very much for all your help and trying to help me. 🙂
You are welcome. Glad you found something that works.
