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, https://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.