• Hi –
    I’m trying to intergrate WordPress into my site using The Loop, but I’ve come unstuck. Here is a ‘perfect’ representation of how I’d like the site to appear (this is just me using HTML to represent the WordPress entries) :

    http://endofradio.preservationsociety.net/test/index.php

    So you can see that the title / meta data appears in the black div (css id: statbar) at the top, then the content is contained within the green box underneath (css id: content2, though that is inside #border) and the whole thing is contained in the div #contenttable. Ideally what I’d like is for each new post to be contained in one of these boxes, running vertically down the page.

    However, I’ve tried dozens of combinations of using the WordPress code in the page, and every time I’m coming up with something that looks like this:

    http://endofradio.preservationsociety.net/journal/index.php

    (believe me, this was the best looking structure of the bunch).

    The problem seems to be that it’s putting all the entries into the content2 div, and seems to be disregarding the Statbar CSS. Here’s a txt file containing the relevant code – I’m sorry if it’s very amateurish, but it’s the first time I’ve done a tableless site:

    http://endofradio.preservationsociety.net/journal/wordpresserror.txt

    I hope someone can help, it would be hugely appreciated. Thanks!

Viewing 2 replies - 1 through 2 (of 2 total)
  • Moderator Samuel Wood (Otto)

    (@otto42)

    WordPress.org Admin

    Few problems with your code…

    1. ID’s have to be unique. That is, if you have a <div id='statbar'..., it must be the only “statbar” on the page. If you want to have more than one, then it should be a CLASS instead. So anything inside the loop needs to be a CLASS, not an ID. The only thing this really changes is that instead of using #statbar in your CSS file, you use .statbar instead.

    2. Your “loop” begins at the “while” statement and ends at the “endwhile” statement. Any DIVs that you open in the loop MUST be closed in that loop as well. So your border and content2 DIVs need to be closed before the endwhile line.

    3. The “else” block is solely for what happens when there are no posts to display at all. Anything between the “else” and the “endif” needs to be self contained. If you open a div, you close it in that same block.

    4. Finally, anything you open outside the loop needs to be closed outside the loop.

    That’s really your main problem. You’re not understanding where the loop is running, exactly. It’s not your fault, I find the “endwhile” and “endif” terminology confusing as well. I always write my loops using more sensible {} marks.

    Try something more like this:
    <div id="contenttable">
    <?php if (have_posts()) { ?>
    <?php while (have_posts()) {
    the_post();
    ?>
    <div class="topbar"></div>
    <div class="statbar><?php the_ID(); ?>">
    <span class="storytitle">
    <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">
    <?php the_title(); ?>
    </a>
    </span>
    <?php the_time('F jS, Y') ?> by <?php the_author() ?>
    </div>
    <div class="border">
    <div class="content2">
    <?php the_content('Read the rest of this entry &raquo;'); ?>
    </div>
    </div>
    <?php } // end while loop ?>
    <p align="center">
    <?php next_posts_link('&laquo; Previous Entries') ?> <?php previous_posts_link('Next Entries &raquo;') ?>
    </p>
    <?php } // end if statement
    else // begin the else block
    {
    ?>
    <h2 align="center">Not Found</h2>
    <p align="center">Sorry, but you are looking for something that isn't here.</p>
    <?php } // end the else block ?>
    </div>

    I did change your loop ID’s to classes, so you’ll want to make some minor CSS mods to make those work.

    Thread Starter endofradio

    (@endofradio)

    Ah thank you so much, you’re a lifesaver.

    Cheers again!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Surrounding Box For Each Post’ is closed to new replies.