• Hello and thanks in advance. I’m relatively new to WordPress so bear with me.

    Is there a way to call for the 1st and 2nd newest posts seperately? I have 2 divs horizontal to one another, and I would like the newest post to show up in one, and the second newest to show up in the one next to it (see site below). Is there a query to call for these?

    https://www.louiesolomon.com

Viewing 1 replies (of 1 total)
  • You can do this with a single query. You only need to style the post container divs with 49% width and add a float to the left.

    Code

    <div class="featured-loop clear">
    	<?php $recent = new WP_Query("cat=1&showposts=2"); while($recent->have_posts()) : $recent->the_post();?>
    		<div class="feat-post clear">
    			<div class="feat-thumb"><?php if ( has_post_thumbnail() ) the_post_thumbnail(); else { ?><a href="<?php the_permalink() ?>"><img src="<?php bloginfo('template_directory'); ?>/images/default-thumbs/thumb.jpg" alt="<?php the_title(); ?>" /></a> <?php } ?></div>
    			<div class="feat-post-content">
    				<h2 class="feat-post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
    				<span class="feat-post-meta">
    					<span class="meta-date"><?php the_time('d, M'); ?>.</span>
    					<span class="meta-comments"><?php comments_number('', '1', '%'); ?></span>
    				</span>
    				<?php the_excerpt(); ?>
    				<div class="read-more"><a href="<?php the_permalink() ?>"><img src="<?php bloginfo('template_directory'); ?>/images/read-more.gif" alt="read-more" border="0" /></a></div>
    			</div>
    		</div>
    	<?php endwhile; ?>
    </div>


    CSS:

    /* === FEAT CATEGORY BOX === */
    .featured-loop { width:100%; }
    .feat-post { padding:10px; width:49%; float:left; }
    .feat-thumb img { margin:0 8px -1px 0; display:block; float:left; }
    .feat-post-title a { color:#000; display:block; font-size:1.3em; text-decoration:none; }
    .feat-post-meta { color:#777; font-size:0.9em; }
    .read-more { float:right; margin-top:4px; }
    .read-more img { margin:0!important; padding:0!important; border:0!important; }
    /* === CLEAR === */
    .clear:after {	visibility: hidden;	display:block;	font-size:0;	content:" ";	clear:both;	height:0;	}
    * html .clear             { zoom: 1; } /* IE6 */
    *:first-child+html .clear { zoom: 1; } /* IE7 */

    This is a slightly modified version of the code given in this article.

    I takes advantage of the new in WP 2.9 Thumbnail system as well as there is added a default thumbnail feature in cases where you don’t add one.(You’ll have to make sure whether your theme supports thumbnails feature, and if not, add it.)

Viewing 1 replies (of 1 total)
  • The topic ‘Query for 1st and 2nd newest posts’ is closed to new replies.