Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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,

share|improve this question
add comment

2 Answers

up vote 1 down vote accepted

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.

share|improve this answer
    
I was hoping to use the featured images –  Nsokyi Sep 26 '11 at 14:23
1  
By "hoping to use" featured images: does that mean you are using featured images, or want to know how to use featured images? –  Chip Bennett Sep 26 '11 at 14:28
    
Also: see edited answer, incorporating featured images. –  Chip Bennett Sep 26 '11 at 14:32
    
Thanks Chip, now using the featured image function from the functions.php file but not sure how to make the slide images into links that take the user to the featured post? –  Nsokyi Sep 26 '11 at 14:36
    
You just need to wrap the call to the_post_thumbnail() in anchor tags with the_permalink() as the href. See edited answer. –  Chip Bennett Sep 26 '11 at 14:43
show 1 more comment

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>
share|improve this answer
    
Thanks Peter, that's done the trick! –  Nsokyi Sep 26 '11 at 14:20
    
This method does not incorporate featured images. It assumes that you have images stored in example.com/images/slide1.jpg (etc.). –  Chip Bennett Sep 26 '11 at 14:35
    
@Chip Bennett: there was no question about featured images. –  petermolnar Sep 26 '11 at 14:38
    
@petermolnar see the comments below my answer. –  Chip Bennett Sep 26 '11 at 14:41
    
OK, you did discussed it after I posted this solution, so I upvoted yours, which now includes featured images as well. –  petermolnar Sep 26 '11 at 14:47
show 1 more comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.