Wordpress posts side by side...by side...by side

[tobefirst ⚽️]

Strange request, I know, but bear with me. I'm really just a print designer masquerading as an online presence.

I'm looking for a way to make Wordpress display each post to the left of the one preceding it, so that the posts get older as you scroll to the right. I'd like to be able to specify the number of the posts that show up just like I always would, through the Wordpress dashboard. Does that make sense?

I've seen themes with two posts side by side, like Japanese Cherry Blossom, but I don't know how to make it do more than two. I'm currently using a modified White as Milk, so that would be where I'm starting from.

Would someone be able to look at the code and point me in the right direction or help me figure it out? What more information should I post to help you help me? Thank you so much.

 

[tominated]

in the css, you could change the float property of the post divs to float left or something

 

[Winterfell]

I agree with Tominated in that using CSS layouts would probably be the best way to accomplish what you're looking for.

There are some great CSS sites out there. A favorite of mine is Glish ... at the very least it will get you pointed in the right direction, and some of the multi-column layouts should be helpful in accomplishing what you want to accomplish.

 

[tobefirst ⚽️]

Thanks guys. I'm pretty sure I understand that it will be done through CSS, along with editing the PHP file. I'm just not sure where to start attacking. Here is what I think is the relevant code from the Japanese Cherry Blossom stylesheet:

#primary.onecol-stories .primary{
	float:left;
	width:50%;
}
#primary.onecol-stories .secondary{
	float:right;
	width:40%;
	margin:0 0 0 50%;
}

and the PHP code from the index.php:

// Here is the call to only make two posts show up on the homepage REGARDLESS of your options in the control panel
				query_posts('showposts=2');
			?>
			<?php if (have_posts()) : ?>
				<?php $first = true; ?>
				<?php while (have_posts()) : the_post(); ?>
					<div class="story<?php if($first == true) echo " first" ?>">
						<h3><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h3>
						<?php the_excerpt() ?>
						<div class="details">
							Posted at <?php the_time('ga \o\n n/j/y') ?> | <?php comments_popup_link('no comments;', '1 comment', '% comments'); ?> | Filed Under: <?php the_category(', ') ?> | <span class="read-on"><a href="<?php the_permalink() ?>">read on</a></span>
						</div>
					</div>
					<?php $first = false; ?>
				<?php endwhile; ?>
			<?php else : ?>

What should I be changing to make it display however many posts I put in my Dashboard? And how can I change the CSS file to allow the width of the page to be as wide as 10 posts, or 8 posts, or 6 posts if that's what I choose in the dashboard? Would I need to have a #primary.onecol-stories .tertiary, #primary.onecol-stories .whatevercomesaftertertiary, etc.?

 

[tobefirst ⚽️]

Back from vacation...

Can anyone point me in the right direction? Not looking for a complete handout, just a push in the right direction. Thanks.

 

[jng]

// Here is the call to only make two posts show up on the homepage REGARDLESS of your options in the control panel
				query_posts('showposts=2');
			?>
			<?php if (have_posts()) : ?>
				<?php $first = true; ?>
				<?php while (have_posts()) : the_post(); ?>
<div class="FLOATLEFT">/*****start****/
					<div class="story<?php if($first == true) echo " first" ?>">
						<h3><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h3>
						<?php the_excerpt() ?>
						<div class="details">
							Posted at <?php the_time('ga \o\n n/j/y') ?> | <?php comments_popup_link('no comments;', '1 comment', '% comments'); ?> | Filed Under: <?php the_category(', ') ?> | <span class="read-on"><a href="<?php the_permalink() ?>">read on</a></span>
						</div>
					</div>
					<?php $first = false; ?>
</div>/***end****/
				<?php endwhile; ?>
			<?php else : ?>
/*****clear*****/<br style="clear: both;" />

I commented so you can see where I put the code. I wasn't sure you wanted to float left or right, so I just cleared both sides.

Make a class called "FLOATLEFT" and just have "float: left;" if you want or something similar. This should get your started, but you'll probably need tweaking.

 

[dunc85]

Please don't do this, horizontal scrolling is nasty, and a usability catastrophe.

 

[Macnoviz]

Please don't do this, horizontal scrolling is nasty, and a usability catastrophe.

I agree, vertical scrolling is more natural, looks better and is easier to do (not all people have a mighty mouse).

 

[tobefirst ⚽️]

I commented so you can see where I put the code. I wasn't sure you wanted to float left or right, so I just cleared both sides.

Make a class called "FLOATLEFT" and just have "float: left;" if you want or something similar. This should get your started, but you'll probably need tweaking.

Thanks. I'll give that a try in the coming days and post with how it works out.

Please don't do this, horizontal scrolling is nasty, and a usability catastrophe.

I'll concede that it is less than natural. But catastrophic? I have thought about why I want to go horizontal though, and think that it is an adequate solution for my blog. I do appreciate the advice, though.

 

[72930]

I agree, vertical scrolling is more natural, looks better and is easier to do (not all people have a mighty mouse).

Or a trackpad with two-finger scroll

 

[dunc85]

Check this out: http://www.useit.com/alertbox/20050711.html

Nielson is The Daddy for online usability