archive page standard blog list format

or if i could even change the 2×2 layout into a 3×3 layout?

<?php $i = 0; echo '<div class="post-row first-post">'; while ( have_posts() ): the_post(); ?>

.post-row.first-post .post {
width: 100%;
}`

I assume it has something to do with LouALee’s post at this post but i’m not sure how to edit it to my site.

Hi clem81.

I am bad at coding.

Well, here ya go; you can get some practice ??

1. In your category page, find this block of code:

<div class="post-list group">
	<?php $i = 1; echo '<div class="post-row">'; while ( have_posts() ): the_post(); ?>
	<?php get_template_part('content'); ?>
	<?php if($i % 2 == 0) { echo '</div><div class="post-row">'; } $i++; endwhile; echo '</div>'; ?>
</div><!--/.post-list-->

2. Replace that block with this block of code:

<div class="post-list group">
	<?php
	$i = 1;
	echo '<div class="post-row">';
	while ( have_posts() ):
		the_post();
		// if past the first 4 post, use standard post layout with post title only
		if ( $i > 4 ) { ?>
			<article id="post-<?php the_ID(); ?>" <?php post_class('group post-standard'); ?> >
			<div class="post-inner post-hover my-custom-post">
				<div class="post-content">
				<h2 class="post-title">
				<a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a>
				</h2><!--/.post-title-->
				</div><!--/.post-content-->
			</div><!--/.post-inner-->
			</article><!--/.post-->
			</div><div class="post-row">
		<?php } else {
			// still wihtin the first 4 posts, use default post layout
			get_template_part('content');
			if( $i % 2 == 0 ) {
				echo '</div><div class="post-row">';
			}
		}
		$i++;
		endwhile;
		echo '</div>';
		?>
</div><!--/.post-list-->

3. Then add this to your child theme style.css file:

/* standard posts full width; remove space below*/
.archive .post-standard {
  width: 100%;
  margin-bottom: 0;
}
/* remove space below post row */
.archive .post-list .post-row {
  margin-bottom: 0;
}
/* move left and remove space below */
.archive .post-standard .my-custom-post {
  padding-left: 0;
  padding-bottom: 0;
}
/* standard post title smaller font */
.archive .post-standard .my-custom-post .post-title {
  font-size: 16px;
}

That should get you started.

Thanks bdbrown.
I kinda understand what you did there and that should be more than enough to get me going. Will get back on here once i get it working.

If you have questions feel free to ask.

That script is working really well except i have run into problems which are better explaind by pictures. Ok so , in picture one this is what i have.

while in picture 2 is what i want written in orange.

I kind of want to:
1. add a short sentence between the 2×2 layout and the post-list
2. add categories and the title on the same line.

I thought it was easy but i cant seem to get it done without getting point #1 repeated thooughtout the post-list

The code I posted didn’t include the categories so someone must have modified it. If you can post a link to your site I can take a look at it.

Here’s an update. Replace what I posted above with the followig:

New page code block

<div class="post-list group">
	<?php
	$i = 1;
	echo '<div class="post-row">';
	while ( have_posts() ):
		the_post();
		// if past the first 4 posts, use standard post layout with post category and title only
		if ( $i > 4 ) { ?>
			<article id="post-<?php the_ID(); ?>" <?php post_class('group post-standard'); ?> >
			<div class="post-inner post-hover my-custom-post">
				<div class="post-content">
				<p class="post-category"><?php the_category(' / '); ?>
				<span class="post-title"><a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></span>
				</p>
				</div><!--/.post-content-->
			</div><!--/.post-inner-->
			</article><!--/.post-->
			</div><div class="post-row">
		<?php } else {
			// still within the first 4 posts, use default post layout
			get_template_part('content');
			if( $i % 2 == 0 ) {
				echo '</div>';
				// if the 4th post, display custom box
				if ( $i == 4 ) {
					echo '<div class="my-box"><p>This is some box content</p></div>';
				}
			echo '<div class="post-row">';
			}
		}
		$i++;
		endwhile;
		echo '</div>';
		?>
</div><!--/.post-list-->

New css:

/* remove space below post row */
.archive .post-list .post-row {
  margin-bottom: 0;
}
/* standard posts full width; remove space below*/
.archive .post-standard {
  width: 100%;
  margin-bottom: 0;
}
/* increase spacing above and below custom posts */
.archive .post-standard .my-custom-post {
  padding: 10px 0;
}
/* standard post title smaller font */
.archive .post-standard .my-custom-post .post-title {
  padding-left: 20px;
  font-size: 16px;
}
/* my custom box */
.archive .my-box {
  font-size: 20px;
  border: 1px solid #000;
  margin-bottom: 20px;
  padding: 5px;
  display: inline-block;
}
.archive .my-box p {
  text-transform: uppercase;
}

Let me know how that looks.

I modified it myself. rather poorly though. I’ll give yours a go later.

thats absolutely perfect.
Thanks bdbrown.

i’ll resolve this topic now.