How to wrap posts into divs?

Question

Does anyone know how I can turn this:

<div id="mySlides">

    <?php query_posts('showposts=4&cat=11'); ?>
    <?php if (have_posts()) : ?>

        <?php while (have_posts()) : the_post(); ?>

        <div>

            <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="< ?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
    <?php the_excerpt(); ?>

        <?php endwhile; ?>
    <?php endif; ?>

</div>

<div id="myController">
    <span class="jFlowControl">1</span>
    <span class="jFlowControl">2</span>
    <span class="jFlowControl">3</span>
    <span class="jFlowControl">4</span>
</div>

<span class="jFlowPrev">Prev</span>
<span class="jFlowNext">Next</span>

<div class="clear">

Into:

<div id="mySlides">
<div id="slide1"><img src="images/slide1.jpg" alt="Slide 1 jFlow Plus" />
 <span><h2>Welcome to the First Slide!</h2><p>We hope you enjoy the jFlow Plus Slider - a light-weight slider for your web design needs. <a href="#" title="Coolness" class="readmore">Read More!</a></p></span>
</div>
<div id="slide2"><img src="images/slide2.jpg" alt="Slide 2 jFlow Plus" />
 <span><h2>Hey you made it to the Second Slide!</h2><p>We Know you enjoy this plugin... it's not too hard to implement, right? <a href="#" title="Coolness" class="readmore">Read More!</a></p></span>
</div>
<div id="slide3"><img src="images/slide3.jpg" alt="Slide 3 jFlow Plus" />
 <span><h2>Woah You're on the Third Slide</h2><p>You've completed quiet the journey! All the way from slide 1 to slide 3... congratulations! <a href="#" title="Coolness" class="readmore">Read More!</a></p></span>
 </div>
 </div>  

<div id="myController">
   <span class="jFlowControl"></span>
   <span class="jFlowControl"></span>
   <span class="jFlowControl"></span>
</div>

I need to wrap each post preview in to divs so jFlow can then organise them into slides like http://dre.im/how-to-create-a-jquery-carousel-with-wordpress-posts/

Thanks,

Answer 1

I think this is probably a more-involved question, but I'll try to answer it as-is. The following code will wrap each post's content in a <div>:

<?php if (have_posts()) : ?>

    <?php while (have_posts()) : the_post(); ?>

        <div id="slide<?php the_ID(); ?>>

            // Post content - i.e. your slider image - goes here

        </div>

    <?php endwhile; ?>
<?php endif; ?>

Now, the inherent problem here is: where is your slide content, and how are the slide images added to that content? Are you using a custom post type? Are you using featured images? Are you using custom post meta?

We'll need considerably more information in order to specify exactly how to output your specific content using the Loop.

EDIT

Following up on your comment, this code will use the featured image as the slider image (and assumes you have created a custom image size, slider-image, to use in the slider), and the Post Title as the slider title, and the Post Excerpt as the slider text:

EDIT 2

Now including a post permalink around the slider image:

<?php if (have_posts()) : ?>

    <?php while (have_posts()) : the_post(); ?>

        <div id="slide<?php the_ID(); ?>>

            <a href="<?php the_permalink(); ?>">
                <?php the_post_thumbnail( 'slider-image' ); ?>
            </a>
            <h2><?php the_title(); ?></h2>
            <?php the_excerpt(); ?>

        </div>

    <?php endwhile; ?>
<?php endif; ?>

That should give you a reasonable approximation of your example markup.

Answer 2

You are missing an ending div tag before <?php endwhile; ?>.

So:

<div id="mySlides">

    <?php query_posts('showposts=4&cat=11'); ?>
    <?php if (have_posts()) : ?>
        <?php $counter = 1; ?>
        <?php while (have_posts()) : the_post(); ?>
            <div id="slide<?php echo $counter; ?>"><img src="images/slide<?php echo $counter; ?>.jpg" alt="Slide <?php echo $counter; ?> jFlow Plus" />
                <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="< ?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
                <?php the_excerpt(); ?>
            </div>
            <?php $counter++; ?>
        <?php endwhile; ?>
    <?php endif; ?>
</div>