Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.
If the asker does not get an answer then they have 10 days to request a refund.
$5
Loop to show new posts on home page
I have everything sorted except the way the latest posts are shown, with the date on the left and the text to the right of that.
My loop is currently nothing but the norm:
<div class="column-left"><!-- Begin Post column -->
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<small><?php the_time('F jS, Y') ?> by <?php the_author_posts_link() ?></small>
<?php the_content(); ?>
<?php endwhile; ?>
<?php endif ?>
</div>How would I change this to make it look like the attached image?
This question has been answered.
Joe Jenkins | 08/13/10 at 8:11pm
Edit
(2) Possible Answers Submitted...
See a chronological view of answers?
Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.
-

Last edited:
08/13/10
10:04pmPippin Williamson says:We need a link to see what it looks like currently.
- 08/13/10 8:19pm
Joe Jenkins says:Sorry, here is the temp link:
http://joe.gs
- 08/13/10 8:25pm
Pippin Williamson says:I'll give you approximates, then you just play around with the css until it looks just right:
<div class="column-left"><!-- Begin Post column -->
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="post-date"><?php the_time('F jS, Y') ?> by <?php the_author_posts_link() ?></div>
<div class="post-content">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<?php the_content(); ?>
</div>
<?php endwhile; ?>
<?php endif ?>
</div>
and your CSS
.column-left {
width: 500px; /*set this width to exactly what you need*/
}
.post-date {
width: 80px;
height: 80px;
background: #666;
float: left;
}
.post-content {
width: 400px;
float: right;
}
That should get you on the right track. - 08/13/10 8:44pm
Joe Jenkins says:The wifgets have been pushed down through sizing, but that's only because I'm doing estimates, I can sort that out.
The problem I'm having is that the dates are staying together, not moving down to the next post.
I've put an image in there to make it clearer when looking at it. - 08/13/10 8:47pm
Pippin Williamson says:Do it like this then:
<div class="column-left"><!-- Begin Post column -->
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="post-body" clearfix>
<div class="post-date"><?php the_time('F jS, Y') ?> by <?php the_author_posts_link() ?></div>
<div class="post-content">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<?php the_content(); ?>
</div>
</div>
<?php endwhile; ?>
<?php endif ?>
</div>
and add this to your css:
.clearfix:after {
display: block;
visibility: hidden;
content: ".";
clear: both;
}
- 08/13/10 8:48pm
Joe Jenkins says:Ignore that last comment, I put in a width command in CSS and it sorted it out.
Is there a way to ensure that the month and day are on seperate lines? - 08/13/10 8:52pm
Pippin Williamson says:The best way that I know of is to use css widths: the month name will always be longer than the month name, so if you set the widths just right, things will work fine.
- 08/13/10 9:22pm
Joe Jenkins says:I've been trying to sort out these sizes, and there should be enough room for the widgets on the right. I've made the background of the left text a different colour so I can see where it ends, and there is plenty of room there, so not sure what is causing them to move down.
Another problem, is that sorting the margins only looked like it had sorted the dates from sticking together, it is back to the same. I tried your second bit of code, but that doesn't change it.
The final thing, is how do I cause margins for the text only? What I did was a bit of a hack, using simple commands in the home.php file, but it would work better in the CSS, but post date section just moves the image too.
Thanks for the help, I feel like I am actually gettign somewhere with this theme now :o/ - 08/13/10 9:30pm
Pippin Williamson says:
.column-left {
float: left;
}
.column-right {
float: right;
}
if that doesn't immediately fix it, then shrink your widths down. - 08/13/10 9:39pm
Joe Jenkins says:That's sorted out the sidebar.
Thanks - 08/13/10 9:47pm
Pippin Williamson says:Unless you can put the month in a separate element than the day, you will not be able to change the sizes independently. Your solution should work perfectly fine.
- 08/13/10 9:50pm
Joe Jenkins says:I'll stick with that for now then, thanks.
The final thing is just to get this date to go next to the post, instead of just going below the previous date. - 08/13/10 9:51pm
Pippin Williamson says:I already gave you that solution in my answer at 08/13/10 8:47pm, look up above.
- 08/13/10 9:56pm
Joe Jenkins says:I've just tried that again, but it still doesn't do it.
- 08/13/10 9:59pm
Pippin Williamson says:Sorry, I had a typo.
This line:
<div class="post-body" clearfix>
should be:
<div class="post-body clearfix">
- 08/13/10 10:04pm
Joe Jenkins says:Thanks for that, it now works perfectly. Those little things do tend to cause problems.
Thank you for the help, I'm glad we could sort it out before I collapsed (just gone 3am here).
- 08/13/10 8:19pm
-

Last edited:
08/13/10
8:20pmDavid Navarrete says:you should try with this.
$last_posts = new WP_Query(array('category_name' => 'category', 'showposts' => x, 'orde' => 'DESC', 'orderby' => 'modified'));
and y the loop like this
<?php if ($last_posts->have_posts()) : ?>
<?php while ($last_posts->have_posts()) : $last_posts->the_post(); ?>
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<small><?php the_time('F jS, Y') ?> by <?php the_author_posts_link() ?></small>
<?php the_content(); ?>
<?php endwhile; ?>
<?php endif ?>
cya
This question has expired.
Current status of this question: Completed
Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.
If the asker does not get an answer then they have 10 days to request a refund.
