Grid style layout for post lists

That would involve more of HTML/CSS than PHP. You should add a div wrap around the results and style them to float left and add right and bottom margins. e.g.
– in archive.php, right after start of loop (if have post stuff)

<div class="new-wrapper">
<h2><a href="the permalink stuff do not copy this"><?php the_title(); ?></a>
//etc etc
</div> <!-- closing div of new-wrapper -->

– in your theme’s style.css, you add the following declaration
.new-wrapper { float: left; width: 200px; height: 200px; margin: 0px 20px 20px 0px; }
change width, height, margin values as you like.

Hi mercime,

Thanks a lot for your suggestion. It all looks good and surprisingly simple! My only question is do I have to declare individual post permalinks in the a href= section you put there? Is there any way to have WordPress simply display all posts in the category, the relevant search results, most recent or whatever (is this what’s called the WordPress loop?). I didn’t want to have to manually declare the indidvidual posts I want displayed.

Many thanks again,

Rory. ??

Check out a theme called Magazine Basic. It has a grid format. You could probably hack his style sheet to figure out how it’s done.

Check out my site at https://www.desertdogjournal.com for an example. There is also an option for three across.

Template shows the first image as a thumbnail, title is hyperlink, and includes an excerpt or first part of the text. Sounds like just what you want. Template has php files for each option so you just need to find where the call out is in the CSS and copy that into your template.

Hi mjshozda,

Thanks very much for your suggestion. I will try it out.

I would still like to hear from mercime if still there…

Many thanks,

Rory. ??

Hi wp-rory, the general format for this grid depending on the markup – this is an example, add markups in your template file and add declarations in style.css as you want it

<div class="new-wrapper">
<h3><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h3>
<p>By <?php the_author_posts_link(); ?>, <?php the_time('F j, Y'); ?></p>
<p><?php the_excerpt(); ?></p>
<?php comments_popup_link('Post a comment', 'One comment', '% comments', '', 'Comments off'); ?>
</div> <!-- closing div of new-wrapper -->

mercime, it works a treat!

Thanks so much!

My next task is to put a picture in, but I should be able to do that now things are set up.

Thanks again and all the best,

Rory. ??

Hi mercime,

I’m amazed at your simple explanation. It worked perfectly the first time around. I wish everyone would answer questions so clearly and not assume readers already know where the code belongs.

Any chance you can help me with the code (and specific placement in relation to your previous code) to create a colored box in my style sheet to go under the post that’s now sitting in the new wrapper you showed us how to create? Also, any extra code you could provide that shows how to set padding in the colored box around the post (and how to make the color of that specific post text white) would be AWESOME.

Thanks!!

Michelle

Mercime,

I just figured out the background code. For anyone who’s curious, I added: background:#000000; padding:20px; in front of the style sheet code Mercime originally provided. It looks like this now:

\\
.new-wrapper {background:#424242; padding:20px; float: left; width: 600px; height: 323px; margin: 0px 20px 20px 0px; }
\\

Can I get help to the next level? I’m trying to figure out the code (and specific placement in relation to Mercime’s previous code) to create a three-column section (for three side-by-side posts) within the body of the page that sits below the wrapper you just showed us how to create? I want the category name in red at the top of each column, with a small photo sitting above each of the three post excerpts (with “read more” at the bottom of each. Does this involve both the style sheet and the index.php? If you can show how to do that, it would be AWESOME.

If you have the extra time and can also show how to call a specific category for each of those columns, that would be cool, too. You do such a great job of explaining!

mjshozda,

I have been scouring the internet for a week looking for exactly the 3-column format on your site! Thank you so much for posting that link. I’m borrowing your HTML and CSS and modifying it for my site, but I’m 90% clueless when it comes to PHP. Any help on that front? Thanks ??

works great…i knew there was a simple answer…thanks mercime!

I’m exactly trying to do the same.
Taking one category from my blog and call it “features” with a grid layout that you can see here: https://hypebeast.com/features/
Any tutorial on how to do it in grid style like this? thanks

I would also love to do this but am having trouble..

my default archives.php is as follows:

<?php get_header(); ?>

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

	<div class="grid_12 title">
	<?php $post = $posts[0]; // Hack. Set $post so that the_date() works. ?>
	<?php /* If this is a category archive */ if (is_category()) { ?>
		<h1 class="description">Archive for the ‘<?php single_cat_title(); ?>’ Category</h1>
	<?php /* If this is a tag archive */ } elseif( is_tag() ) { ?>
		<h1 class="description">Posts Tagged ‘<?php single_tag_title(); ?>’</h1>
	<?php /* If this is a daily archive */ } elseif (is_day()) { ?>
		<h1 class="description">Archive for <?php the_time('F jS, Y'); ?></h1>
	<?php /* If this is a monthly archive */ } elseif (is_month()) { ?>
		<h1 class="description">Archive for <?php the_time('F, Y'); ?></h1>
	<?php /* If this is a yearly archive */ } elseif (is_year()) { ?>
		<h1 class="description">Archive for <?php the_time('Y'); ?></h1>
	<?php /* If this is an author archive */ } elseif (is_author()) { ?>
		<h1 class="description">Author Archive</h1>
	<?php /* If this is a paged archive */ } elseif (isset($_GET['paged']) && !empty($_GET['paged'])) { ?>
		<h1 class="description">Blog Archives</h1>
	<?php } ?>
	</div>

	<div class="grid_12 content">

		<div class="grid_1 alpha">
			&nbsp;
		</div>
		<!-- end .grid_1 -->

		<div class="grid_8">

			<?php while (have_posts()) : the_post(); ?>
			<div class="post rounded">
				<h3 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>						

				<p class="postmetadata">
					<?php the_time('F jS Y') ?><br />
					<?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?>
				</p>

			</div>

			<?php endwhile; ?>

			<div class="navigation">
				<div class="alignleft"><?php next_posts_link('← Older Entries') ?></div>
				<div class="alignright"><?php previous_posts_link('Newer Entries →') ?></div>
			</div>

			<?php else : ?>

			<h1 class="center">Not Found</h1>
			<?php include (TEMPLATEPATH . '/searchform.php'); ?>

			<?php endif; ?>

		</div>
		<!-- end .grid_8 -->

		<div class="grid_3 omega">
			<?php get_sidebar(); ?>
		</div>
		<!-- end .grid_3 -->

	</div>
	<!-- end .grid_12 -->
	<div class="clear">&nbsp;</div>

<?php get_footer(); ?>

But I cant for the life of me work out where to put the code as mentioned above.

Any help would be much appreciated.

I’ve been trying to work something out with the code above from mercime into a category layout, and modified the css as well. It actually builds the square that could be layed out as a grid, but it looks like every square is vertically displayed, not in grid…
I am a bit confused right now…

Here’s an image link to what I’m trying to do. Hope we can join forces and break this css mystery ??

https://yfrog.com/1ggridg

and here’s a website using this system in a category: