Wordpress Loop Help

[sundayx Veteran]

As a premise I need to mention that I'm not a programmer or developer, so my technical knowledge of getting it working is fairly limited. That being said, I've been looking around to get the right type of code (with some tweaking) to get it to work, but no dice.

I think the problem is better understood with the attached diagram of what I'm trying to achieve. There's also a screenshot to show exactly what it looks like (you can see how the post is repeated already).

The majority of the problem I have seems to be that there are 3 different post layouts that I'm trying to integrate into the loop: 1) the feature carousel at the top, 2) the middle section with the posts being vertical, and 3) the rest of the posts in horizontal below.

• Posts can't appear twice on the page
  
• The following pages will be a different layout (only the homepage to appear in this layout)
  

If anyone can help me on this it'll be much appreciated, and I'll try and treat you to a nice lunch via. PayPal.

The existing code (if it helps, but it's all wrong) as a starting point:

<div id="feature">
  <ul id="slider1">
	<?php $first_query = new WP_Query('posts_per_page=3&tag=starred'); while($first_query->have_posts()) : $first_query->the_post(); ?>
	<li>
	  <div class="feature_image"><a href="<?php echo get_permalink(); ?>">
		<?php the_post_thumbnail('single-post-thumbnail',array('title' => "")); ?>
		</a></div>
	  <div class="feature_content">
		<h1><a href="<?php the_permalink() ?>">
		  <?php the_title(); ?>
		  </a></h1>
		<span class="p1">
		<?php the_time('F j, Y') ?>
		·
		<?php comments_popup_link('0 Comments ', '1 Comment', '% Comments'); ?>
		</span><?php echo excerpt(390); ?>
	  </div>
	  <?php endwhile; ?>
	  <?php wp_reset_postdata(); ?>
	</li>
  </ul>
</div>
<div id="vertical">
  <?php $second_query = new WP_Query('posts_per_page=4'); while($second_query->have_posts()) : $second_query->the_post(); ?>
  <div class="vertical_box">
	<div class="content_image"><a href="<?php echo get_permalink(); ?>">
	  <?php the_post_thumbnail('post-thumbnail',array('title' => "")); ?>
	  </a></div>
	<div class="content_content">
	  <h2><a href="<?php the_permalink() ?>">
		<?php the_title(); ?>
		</a></h2>
	  <span class="p1">
	  <?php the_time('F j, Y') ?>
	  ·
	  <?php comments_popup_link('0 Comments ', '1 Comment', '% Comments'); ?>
	  </span> <?php echo excerpt(185); ?></div>
  </div>
  <?php endwhile; ?>
  <?php wp_reset_postdata(); ?>
</div>
<div class="horizontal">
  <?php $third_query = new WP_Query('posts_per_page=6'); while($third_query->have_posts()) : $third_query->the_post(); ?>
  <div class="horizontal_horizontal">
	<div class="content_image"><a href="<?php echo get_permalink(); ?>">
	  <?php the_post_thumbnail('post-thumbnail',array('title' => "")); ?>
	  </a></div>
	<div class="horizontal_content">
	  <h2> <a href="<?php the_permalink() ?>">
		<?php the_title(); ?>
		</a></h2>
	  <span class="p1">
	  <?php the_time('F j, Y') ?>
	  ·
	  <?php comments_popup_link('0 Comments ', '1 Comment', '% Comments'); ?>
	  </span> <?php echo excerpt(175); ?></div>
  </div>
  <?php endwhile; ?>
  <?php wp_reset_postdata(); ?>
  <div id="content_vertical">
	<div class="content_vertical_title"><a href="<?php echo get_tag_link(8); ?>">Featured Posts</a></div>
	<ul>
	  <?php
			$args = array( 'numberposts' => 5, 'tag_id' => '8' );
			$postslist = get_posts( $args );
			foreach ($postslist as $post) :  setup_postdata($post); ?>
	  <li>
		<div>
		  <div class="content_vertical_image"><a href="<?php echo get_permalink(); ?>">
			<?php the_post_thumbnail('post-thumbnail',array('title' => "",'class' => "content_vertical_image_size")); ?>
			</a></div>
		  <div class="content_vertical_content">
			<div class="content_vertical_post_title"><a href="<?php the_permalink() ?>">
			  <?php the_title(); ?>
			  </a></div>
			<span class="p1">
			<?php the_time('F j, Y') ?>
			</span></div>
		</div>
	  </li>
	  <?php endforeach; ?>
	</ul>
	<div class="content_vertical_title">Categories</div>
	<?php wp_list_categories('title_li='); ?>
  </div>
</div>
<div class="horizontal">
  <div class="horizontal_prev_link">
	<?php previous_posts_link('Previous Page') ?>
  </div>
  <div class="horizontal_next_link">
	<?php next_posts_link('Next Page') ?>
  </div>
</div>[/CODE]

[sundayx Veteran]

One day bump.

[mollick2]

I think what you need is a custom loop in the functions.php file and a home.php file.

Try something like this in the functions file, instead of outputting the articles from the loop put them into variables and call the variables in the home file.

function custom_loop(){
if ( have_posts() ) :
$i = 1;

$slider = '';
$vertical = '';
$horizontal = '';

while ( have_posts() ) : the_post(); $i++;

if ($i == 3 || 7 || 8) :
//HTML for sliders
$html = '<li>
 <div class="feature_image"><a href="'.get_permalink().'">
'.get_the_post_thumbnail("single-post-thumbnail",array("title" => "")).'
</a></div>
 <div class="feature_content">
<h1><a href="'.get_permalink().'">
 '.get_the_title().'
 </a></h1>
<span class="p1">
'.the_time("F j, Y").'
·
'.comments_popup_link("0 Comments ", "1 Comment", "% Comments").'
</span>'.excerpt(390).'
 </div>
</li>';
$slider .= $html;
elseif ($i == 1 || 2 || 4 ||5):
//HTML for vertical
$html ='<div class="vertical_box">
<div class="content_image"><a href="'.get_permalink().'">
 '.get_the_post_thumbnail("post-thumbnail",array("title" => "")).'
 </a></div>
<div class="content_content">
 <h2><a href="'.get_the_permalink().'">
'.get_the_title().'
</a></h2>
 <span class="p1">
 '.get_the_time("F j, Y").'
 ·
 '.comments_popup_link("0 Comments ", "1 Comment", "% Comments").'
 </span> '.excerpt(185).'</div>
 </div>';

$vertical .= $html;
else:
//HTML for horizontal
$html = '<div class="horizontal_horizontal">
<div class="content_image"><a href="'.get_permalink().'">
 '.get_the_post_thumbnail("post-thumbnail",array("title" => "")).'
 </a></div>
<div class="horizontal_content">
 <h2> <a href="'.get_permalink().'">
'.get_the_title().'
</a></h2>
 <span class="p1">
 '.the_time("F j, Y").'
 ·
 '.comments_popup_link("0 Comments ", "1 Comment", "% Comments").'
 </span> '.excerpt(185).'</div>
 </div>';

$horizontal .= $html;
endif;
unset($html);
endwhile;
endif;
}

Something like this in the home.php file.

<div id="feature">
  <ul id="slider1">
        <?php echo $slider;?>
  </ul>
</div>
<div id="vertical">
<?php echo $vertical;?>
</div>
<div class="horizontal">
  <?php echo $horizontal;?>
</div>

Not sure if will work 100% as is, I'm not an WP expert by any means.

[threetonesun]

<?php $second_query = new WP_Query('posts_per_page=4'); while($second_query->have_posts()) : $second_query->the_post(); ?>[/CODE]

You need to do something here to exclude the posts that are tagged "starred". As it is, this query just returns the four latest posts.

This example should help you sort it out: http://www.jepson.no/how-to-exclude-specific-tag-from-query_posts/

[Seahorsepip Veteran]

One day bump.

I thought bumping was not allowed in the forums lol, I maybe mistake :p

[-Alex-]

I thought bumping was not allowed in the forums lol, I maybe mistake :p

1 bump per day is permitted.

[Seahorsepip Veteran]

1 bump per day is permitted.

ah ok, thanks for clearing that up :D

[Calculator]

I'd run two queries, one to get 3 sticky posts for the slideshow and one to get 10 non-sticky posts for the horizontal and vertical layout.

For the sticky posts, run a new query with query_posts. This allows you to use all common the_* and get_the_* functions.

<?php
query_posts(array(
	  'posts_per_page' => 3, // Get three posts
	  'post__in' => get_option( 'sticky_posts' ), // Only query for sticky posts
	  'ignore_sticky_posts' => 1
));
while(have_posts()) : the_post();
// Output slideshow here
endwhile;

// Important: restore the original query when slideshow query is no longer needed
// Otherwise, you'll break the rest of the page which relies on the main query
wp_reset_query();

For the non-sticky posts, it may be a better idea to simply modify the main query. Instead of making a new query and ignore the results from the (expensive) default query, it's better to modify this default query to exclude the sticky posts right away. This way, you'll keep all goodness WordPress does with the main query, such as pagination. Even if you're not going to use any of these, it's a good practice to not waste a whole query result. :)

function main_query_exclude_sticky( $q ) {
	   // Only apply on the main query on the home page
	   if (!is_admin() && is_home() && $q->is_main_query()) {
			  // Exclude sticky posts from query
			  $q->set( 'post__not_in', get_option( 'sticky_posts' ) );
	   }
	   return $q;
}
add_filter('parse_query', 'main_query_exclude_sticky');

Now you can simply work with the normal loop, do a for-loop for the horizontally placed posts and then output the remaining posts vertically.

for($i = 1; $i <= 4 && have_posts(); ++$i) {
	the_post();
	// Output horizontally
}

while(have_posts()) : the_post();
// Output vertically
endwhile;

I understand that this is a bit more complicated, but in the end it'll be worth it. ;)