Support » Fixing WordPress » How to Create this Loop

  • Hey Everyone!

    So I’m trying to get into more advanced Theme design but struggling a bit already. If you view my page, http://www.pztalks.com, you can see what I’m trying to accomplish.

    I’d like the latest post to appear as the Featured Article with the big Panoramic image along the right, then the next 3 posts after that to each appear below in the different color boxes.

    Right now the images are pulled from a folder on the server but will be pulled via Custom Fields once I get everything working. I have all the basic stuff down… the article title, read more, custom fields, etc.

    I just need a hand getting the posts to display as I explained above. Any assistance or links to something similar that I could learn from would be greatly appreciated.

    Thanks!

Viewing 1 replies (of 1 total)
  • Thread Starter PZ5413

    (@pz5413)

    So I’m really not sure if this is the best way to do it, but here’s how I managed to get it to work…

    <?php query_posts('posts_per_page=1'); ?>
        <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    
    	<div id="featured-content">
    	    <a href="<?php the_permalink(); ?>">
    		<h2><?php the_title(); ?></h2></a>
    		<p><?php the_excerpt(); ?></p>
    	</div>
    	<div id="featured-image"><img src="<?php echo get_post_meta($post->ID, 'panoramic', true); ?>" /></div>
    
    	<?php endwhile; ?>
    
    	<?php wp_reset_query(); ?>
    
    	<?php query_posts('posts_per_page=1&offset=1'); ?>
        <?php while (have_posts()) : the_post(); ?>
    
    	<div id="article-green">
      		<h3><?php the_title(); ?></h3>
      		<img src="<?php bloginfo('template_directory') ?>/img/ArticlesSmall/fruit.jpg" alt="Fruit" />
      		<div class="readmore"><a href="#">Continue to Article &raquo;</a></div>
      	</div>
    
      	<?php endwhile; ?>
    
      	<?php wp_reset_query(); ?>
    
      	<?php query_posts('posts_per_page=1&offset=2'); ?>
        <?php while (have_posts()) : the_post(); ?>
    
      	<div id="article-red">
      		<h3><?php the_title(); ?></h3>
      		<img src="<?php bloginfo('template_directory') ?>/img/ArticlesSmall/asiancouple.jpg" alt="Asian Couple" />
      		<div class="readmore"><a href="#">Continue to Article &raquo;</a></div>
      	</div>
    
      	<?php endwhile; ?>
    
      	<?php wp_reset_query(); ?>
    
      	<?php query_posts('posts_per_page=1&offset=3'); ?>
        <?php while (have_posts()) : the_post(); ?>
    
      	<div id="article-orange">
      		<h3><?php the_title(); ?></h3>
      		<img src="<?php bloginfo('template_directory') ?>/img/ArticlesSmall/whitecouple.jpg" alt="White Couple" />
      		<div class="readmore"><a href="#">Continue to Article &raquo;</a></div>
      	</div>
    
        <?php endwhile; ?>
    
        <?php endif; ?>
Viewing 1 replies (of 1 total)
  • The topic ‘How to Create this Loop’ is closed to new replies.