logo
Ask your WordPress questions! Pay money and get answers fast! (more info)

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 want to have my home page look like the image I've attached.

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.

attachment image View Attachment

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.

  • avatar
    Last edited:
    08/13/10
    10:04pm
    Pippin 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).

  • avatar
    Last edited:
    08/13/10
    8:20pm
    David 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.