WordPress › Support » Grid style layout for post lists

wp-rory
Member
Posted 2 years ago #

Hi all,

I was just wondering if anybody had any idea how to go about laying out a template so that posts are displayed in a tabular, grid-style fashion on the designated posts page, and/or categories/archives/search results pages, instead of the standard vertical list fashion?

I would really like to have the posts laid out in a grid with each 'grid square' (maybe three columns and three rows of them) having the main post picture in a thumbnail and the hyperlinked title of the post underneath. Unfortunately, I don't really know enough PHP to make it a reality. So I was just wondering if anybody could offer any pointers?

Many thanks,

All the best,

Rory. :)
@mercime
Member
Posted 2 years ago #
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> 
```
- 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.
wp-rory
Member
Posted 2 years ago #

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. :)
mjshozda
Member
Posted 2 years ago #

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 http://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.
wp-rory
Member
Posted 2 years ago #

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

@mercime
Member
Posted 2 years ago #

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

wp-rory
Member
Posted 2 years ago #

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. :)
michelletripp
Member
Posted 2 years ago #

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
michelletripp
Member
Posted 2 years ago #

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!
sparklogix
Member
Posted 2 years ago #

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 :)
trickynek
Member
Posted 2 years ago #

works great...i knew there was a simple answer...thanks mercime!
in2sky
Member
Posted 2 years ago #

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: http://hypebeast.com/features/
Any tutorial on how to do it in grid style like this? thanks

hmcke
Member
Posted 2 years ago #

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.

in2sky
Member
Posted 2 years ago #

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...
in2sky
Member
Posted 2 years ago #

Here's an image link to what I'm trying to do. Hope we can join forces and break this css mystery :-)

http://yfrog.com/1ggridg
in2sky
Member
Posted 2 years ago #

and here's a website using this system in a category:
in2sky
Member
Posted 2 years ago #

http://tinyurl.com/ydlwowe
alchymyth
The Sweeper
Posted 2 years ago #

what is your code so far, and do you have an example to see?
link?
in2sky
Member
Posted 2 years ago #

here's my current code. the website however is on maintenance mode (I can't put it public now)..

I decided on a category I would like to stand out. It's "features". Therefore I copied category.php and named it category-4.php (4 being the features ID).

The code I have now is:

<?php get_header(); ?>

<div class="breadcrumb">
<?php if(function_exists('bcn_display'))
{ bcn_display(); } ?>
</div>

<?php include (TEMPLATEPATH . '/strings.php'); ?>

<div class="new-wrapper">
<?php
$values = get_post_custom_values("feat-img");
if (is_array($values)) : ?>
<?php if (file_exists($upload_path . 'timthumb.php')) { ?>
" title="<?php the_title(); ?>"><img src="<?php echo get_settings('home'); ?>/scripts/timthumb.php?src=<?php echo "$values[0]"; ?>&h=160&w=200&zc=1" alt="<?php the_title(); ?>" />
<?php } else { ?>
" title="<?php the_title(); ?>"><img src="<?php echo "$values[0]"; ?>" alt="<?php the_title(); ?>" width="200" height="160" border="0" />
<?php } ?>
<?php else: ?>
<?php if (file_exists($upload_path . 'timthumb.php')) { ?>
" title="<?php the_title(); ?>"><img src="<?php echo get_settings('home'); ?>/scripts/timthumb.php?src=<?php echo get_first_image() ?>&h=160&w=200&zc=1" alt="<?php the_title(); ?>" />
<?php } else { ?>
<img src="<?php echo get_first_image() ?>" alt="<?php the_title(); ?>" width="200" height="160" border="0" />
<?php } ?>
<?php endif; ?>
<h5>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></h5>
</div> 

<div class="clear"></div>

<?php include (TEMPLATEPATH . '/paginate.php'); ?>

<?php get_footer(); ?>
in2sky
Member
Posted 2 years ago #

As you can see I'm using timthumb to get the first image of the post into the square.

the CSS is:
.new-wrapper {background:#222; padding:0px; float: left; width: 200px; height: 200px; margin: 5px 20px 15px 0px; }
alchymyth
The Sweeper
Posted 2 years ago #

it could not recognnize the loop in your above code, or the way you display many posts this way;
also, this seems to be a css issue, and at least i personally would need a live site to work with to comment on css.

could you at least post a screenshot of what your cat-4 output looks so far?
in2sky
Member
Posted 2 years ago #

Ok thanks alot. The code I've copied here is the actual code from my category.php and it works, only it has taken the first post of the category and not the others, and no grid...
I'm posting a screenshot of what I see now:

http://img684.imageshack.us/img684/3227/screenshotcategory.png
alchymyth
The Sweeper
Posted 2 years ago #
you need to integrate the wordpress loop into your code:

put the first line of the loop:
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

before this line:
<div class="new-wrapper">

then put the end of the loop:
<?php endwhile; endif; ?>

just before this end of your code:
```
<div class="clear"></div>
<?php include (TEMPLATEPATH . '/paginate.php'); ?>
<?php get_footer(); ?>
```
that should output as many posts as you have set in your settings in admin. and the css should sort them into grid style.
good luck ;-)
in2sky
Member
Posted 2 years ago #

Thank you SO MUCH alchymyth!
Im going to try this right now then report.
Thanks again, I appreciate!
in2sky
Member
Posted 2 years ago #

Job done! It worked like a charm, thank you so much!
Now just going to play a bit with the CSS and make things look better :-)
mr orange
Member
Posted 1 year ago #

Hey guys, I was also wondering about this, but I want to add a "rollover effect" like there is here

I know how to add opacity rollover like at hypebeast but I want something with color and text.

Any advice? I know how to make it with html, but am having trouble getting it to work with php.

Thanks!
mr orange
Member
Posted 1 year ago #

How to add this to the thumbnail

Topic Closed

This topic has been closed to new replies.

WordPress.org

Forums

Grid style layout for post lists (27 posts)

Topic Closed

About this Topic

Tags

Code is Poetry