WordPress.org

Support

Support » How-To and Troubleshooting » [Resolved] Display first, second, and third posts as list item

[Resolved] Display first, second, and third posts as list item

  • juliabarry

    @juliabarry

    Heya. I’m trying to make a slider that pulls in the image uploaded to a meta box on its post. I’ve tried different combinations of get_post, query_post, offset=x arg etc. based on other forum answers and don’t know what I’m doing wrong.

    When using this code:

    <?php query_posts('category_name=featured&posts_per_page=3'); ?>
    
    			<div id="blueberryslider">
    <?php while (have_posts()) : the_post(); ?>
        <div class="blueberry clear center">
          <ul class="slides">
            <li><a href="<?php the_field('slider_url') ?>" title="<?php the_field( 'slider_video_tagline' ); ?>" rel="prettyPhoto"><img src="<?php the_field( 'slider_image' ); ?>" alt="<?php the_field( 'slider_video_title' ); ?>" width="900"></a></li>

    it shows 3 of the latest posts in one <li>, but I can’t figure how to get it to show one post per <li>, which is what I need.

    Here’s what the html has to be for the slider to work:

    <div id="blueberryslider">
        <div class="blueberry clear center">
          <ul class="slides">
            <li><a href="<?php the_field('slider_url') ?>" title="<?php the_field( 'slider_video_tagline' ); ?>" rel="prettyPhoto"><img src="<?php the_field( 'slider_image' ); ?>" alt="<?php the_field( 'slider_video_title' ); ?>" width="900"></a></li>
            <li><a href="<?php the_field('slider_url') ?>" title="<?php the_field( 'slider_video_tagline' ); ?>" rel="prettyPhoto"><img src="<?php the_field( 'slider_image' ); ?>" alt="<?php the_field( 'slider_video_title' ); ?>" width="900"></a></li>
            <li><a href="<?php the_field('slider_url') ?>" title="<?php the_field( 'slider_video_tagline' ); ?>" rel="prettyPhoto"><img src="<?php the_field( 'slider_image' ); ?>" alt="<?php the_field( 'slider_video_title' ); ?>" width="900"></a></li>
          </ul>
        </div>

    Where/how do I call the posts into each <li>? Thanks!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Michael

    @alchymyth

    Forum Moderator

    your posted code is incomplete;

    generally, pull the div and ul to before the line with while( have_posts()) and close them after the line with endwhile

    juliabarry

    @juliabarry

    Thank you! Knowing the order of ops helped me get things working like this (for anyone else who’s wondering):

    <div id="blueberryslider">
    			<div class="blueberry clear center">
          <ul class="slides">
          <?php query_posts('category_name=featured&posts_per_page=1&offset=0'); ?>
    <?php while (have_posts()) : the_post(); ?>
            <li><a href="<?php the_field('slider_url') ?>" title="<?php the_field( 'slider_video_tagline' ); ?>" rel="prettyPhoto"><img src="<?php the_field( 'slider_image' ); ?>" alt="<?php the_field( 'slider_video_title' ); ?>" width="900" height="300"></a></li>
              <?php endwhile;?>
               <?php query_posts('category_name=featured&posts_per_page=1&offset=1'); ?>
    <?php while (have_posts()) : the_post(); ?>
            <li><a href="<?php the_field('slider_url') ?>" title="<?php the_field( 'slider_video_tagline' ); ?>" rel="prettyPhoto"><img src="<?php the_field( 'slider_image' ); ?>" alt="<?php the_field( 'slider_video_title' ); ?>" width="900" height="300"></a></li>
              <?php endwhile;?>
               <?php query_posts('category_name=featured&posts_per_page=1&offset=2'); ?>
    <?php while (have_posts()) : the_post(); ?>
            <li><a href="<?php the_field('slider_url') ?>" title="<?php the_field( 'slider_video_tagline' ); ?>" rel="prettyPhoto"><img src="<?php the_field( 'slider_image' ); ?>" alt="<?php the_field( 'slider_video_title' ); ?>" width="900" height="300"></a></li>
              <?php endwhile;?>
    
          </ul>
        </div>
    </div>

    Much appreciation for your tip!!

    Michael

    @alchymyth

    Forum Moderator

    try this simplified code with only one loop:

    <div id="blueberryslider">
    			<div class="blueberry clear center">
          <ul class="slides">
          <?php query_posts('category_name=featured&posts_per_page=3'); ?>
    <?php while (have_posts()) : the_post(); ?>
            <li><a href="<?php the_field('slider_url') ?>" title="<?php the_field( 'slider_video_tagline' ); ?>" rel="prettyPhoto"><img src="<?php the_field( 'slider_image' ); ?>" alt="<?php the_field( 'slider_video_title' ); ?>" width="900" height="300"></a></li>
              <?php endwhile;?>
    
          </ul>
        </div>
    </div>
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘[Resolved] Display first, second, and third posts as list item’ is closed to new replies.
Skip to toolbar