WordPress.org

Ready to get started?Download WordPress

Forums

How to style latest post AND recent posts differently? (15 posts)

  1. greg9885
    Member
    Posted 6 years ago #

    I would like to style the latest post and then the most recent posts differently than the rest of the posts in the regular loop. I'm kind of new to wordpress themes (I figure I'd throw that out there). I would like to use the more tag in there as well. Here is a link to an image to help describe what I'm trying to accomplish.

    Here is the code that I have already:

    <?php
    /*
    Template Name: Home
    */
    ?>

    <?php get_header(); ?>

    <div id="main"><div id="main-1">

    <?php if (have_posts()) : ?>
    <?php query_posts("showposts=5"); ?>
    <?php while (have_posts()) : the_post();

    $postclass = ($post == $posts[0]) ? 'entry-1' : 'entry'; ?>

    <div class="post<?php echo $postclass; ?>" id="post-<?php the_ID(); ?>">
    <h2 class="clear">" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></h2>

    <div class="entry clear">
    <?php the_content('Read More'); ?>

    </div>

    </div> <!-- /post -->

    <?php endwhile; ?>

    <?php endif; ?>

    </div></div>

    <?php get_sidebar(); ?>

    <?php get_footer(); ?>

    Any help that I can get with this would be awesome...

    Thanks in advance :)

  2. greg9885
    Member
    Posted 6 years ago #

    No one has any idea how to do this? The code above is partially from a different post. I just can't figure out why it isn't working.

  3. mdi
    Member
    Posted 6 years ago #

    <?php get_header(); ?>
    
        <div id="x">
    
    	<?php if (have_posts()) : ?>
    		<!-- you want to show 5 posts per page... -->
        <?php query_posts("showposts=5"); ?>
    	<?php while (have_posts()) : the_post(); ?>
    		<!-- ...so your blog will have many pages. but only the first post on page 1 should use a different class  -->
    			<?php if (is_paged()) : ?>
    				<?php $postclass = ('other entries'); ?>
    			<?php else : ?>
    				<?php $postclass = ($post == $posts[0]) ? 'first entry' : 'other entries'; ?>
    			<?php endif; ?>
    
    	<!-- let's go -->
    
    	<div class="<?php echo $postclass; ?>">
    
    		<h1><a href="<?php the_permalink() ?>" rel="bookmark" title=""><?php the_title(); ?></a></h1>
    		<?php the_content(''); ?>
    
    	</div>
    
        <?php endwhile; ?>
    
    	<?php else : ?>
    
    	<!-- what if there are no posts? -->
    
        <?php endif; ?>
    
        </div>
    
        <?php get_sidebar(); ?>
    
        <?php get_footer(); ?>
  4. Sridhar Katakam
    Member
    Posted 6 years ago #

    Perhaps you can try using:

    if ($wp_query->current_post < 1)

    the above will match the first post on the index page.

  5. greg9885
    Member
    Posted 6 years ago #

    What do you mean try using: if ($wp_query->current_post < 1) srikat?

    Won't this only allow me to style the latest/newest post?

  6. greg9885
    Member
    Posted 6 years ago #

    @mdi: This script seems to only give me different classes for all 5 post on the page. I would like to have a different class for the most recent post AND then the 4 latest posts after that. Any suggestions?

  7. greg9885
    Member
    Posted 6 years ago #

    i'm still a little confused

  8. mdi
    Member
    Posted 6 years ago #

    so am i. ;o)

    - you want to show 5 posts per page
    - you want one class/style for the first (the most recent) post
    - you want a different class/style for posts 2-5

    - AND you want another different class/style for any other/older posts?

    if that's the case, you can simply change:

    <?php if (is_paged()) : ?>
    				<?php $postclass = ('other entries'); ?>
    			<?php else : ?>
    				<?php $postclass = ($post == $posts[0]) ? 'first entry' : 'other entries'; ?>
    			<?php endif; ?>

    to:

    <?php if (is_paged()) : ?>
    				<?php $postclass = ('class 3'); ?>
    			<?php else : ?>
    				<?php $postclass = ($post == $posts[0]) ? 'class 1' : 'class 2'; ?>
    			<?php endif; ?>

    in your css-file you need 3 classes. class 1 for the first post, class 2 for posts 2-5, class 3 for the older posts.

  9. greg9885
    Member
    Posted 6 years ago #

    Hmmm... that seems to only give me one class called "class 2." Do I have to use multiple loops for this maybe? Let me try to break it down a little more for you.

    This template is only for the homepage.

    I have already styled the other posts which are in single.php(and various other places).

    So on the home page there will be...

    1st: MOST RECENT POST (styled differently than the other posts)

    2nd: THE NEXT 4 MOST RECENT POSTS AFTER THAT (also styled differently) - located below the most recent post.

    --- THAT'S IT FOR THE HOMEPAGE ---

    ****** I'm not sure if I still need another class to define the "normal looking posts" (in places like single.php)******

    Hopefully this helps a little.

  10. Khairil Zhafri
    Member
    Posted 6 years ago #

    I was trying to do something similar and discovered something pretty simple. You may try the following:

    <?php if (have_posts()) : ?>
     <?php query_posts("showposts=1"); // show one latest post only ?>
      <?php while (have_posts()) : the_post(); ?>
       <!-- the latest post here -->
      <?php endwhile; ?>
     <?php query_posts("showposts=4&offset=1"); // show 4 latests posts excluding the latest ?>
      <?php while (have_posts()) : the_post(); ?>
       <!-- the subsequent posts here -->
     <?php endwhile; ?>
    <?php else: ?>
     <!-- Error message when no post published -->
    <?php endif; ?>

    Hope it helps. :)

  11. chedonline
    Member
    Posted 6 years ago #

    Wow, poppacket, great solution, and very simple. Using 'offset' is a great tip. Thanks.

  12. milascisolo
    Member
    Posted 6 years ago #

    poppacket, thank you very much, as chedonline said great solution.

    <div id="rightcol">
    
        <?php
    
    // this is where you enter the IDs of which categories you want to display
    
    $display_categories = array(5,6,7);
    
    foreach ($display_categories as $category) { ?>
    
        <div class="clearfloat">
    
          <?php query_posts("showposts=1&cat=$category");
    
    	    $wp_query->is_category = false;
    
    		$wp_query->is_archive = false;
    
    		$wp_query->is_home = true;
    
    		 ?>
    
          <h3><a href="<?php echo get_category_link($category);?>"><?php 
    
    	// this is where the name of each category gets printed	  
    
    	  single_cat_title(); ?></a></h3>
    
          <?php while (have_posts()) : the_post(); ?>
    
          <?php
    
    // this grabs the image filename
    
    	$values = get_post_custom_values("Image");
    
    // this checks to see if an image file exists
    
    	if (isset($values[0])) {						
    
    ?>
    
          <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><img src="<?php bloginfo('template_url'); ?>/images/<?php $values = get_post_custom_values("Image"); echo $values[0]; ?>" alt="" /></a>
    
          <?php } ?>
    
          <a href="<?php the_permalink() ?>" rel="bookmark" class="title"><?php 
    
    // this is where title of the article gets printed	  
    
    	  the_title(); ?>&raquo;</a>
    
          <?php the_excerpt(); ?>
    
          <?php endwhile; ?>
    
        </div>
    
        <?php } ?>
    
      </div><!--END RIGHTCOL-->

    but i still have a problem. as i am not so into wp, i couldn't port it to this code.

    i know this will be too much but can you help?

    thanks :$

    edit:
    I'm trying to solve this problem but getting a T_ELSE error on line 65 which is
    <?php else: ?>

    Here is the code i'm trying to replace the old right column with yours

    <div id="rightcol">
    <div class="clearfloat">
    <?php query_posts("showposts=4&offset=1"); // show 4 latests posts excluding the latest ?>
          <h3><a href="<?php echo get_category_link($category);?>"><?php 
    
    	// this is where the name of each category gets printed	  
    
    	  single_cat_title(); ?></a></h3>
      <?php while (have_posts()) : the_post(); ?>
          <?php
    
    // this grabs the image filename
    
    	$values = get_post_custom_values("Image");
    
    // this checks to see if an image file exists
    
    	if (isset($values[0])) {						
    
    ?>
    
          <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><img src="<?php bloginfo('template_url'); ?>/images/<?php $values = get_post_custom_values("Image"); echo $values[0]; ?>" alt="" /></a>
    
          <?php } ?>
    
          <a href="<?php the_permalink() ?>" rel="bookmark" class="title"><?php 
    
    // this is where title of the article gets printed	  
    
    	  the_title(); ?>&raquo;</a>
    
          <?php the_excerpt(); ?>
    
     <?php endwhile; ?>
    <?php else: ?>
     <!-- Error message when no post published -->
    <?php endif; ?>
    </div>
        <?php } ?>
    </div>

    I still couldn't make it to show the category name and title.

  13. Khairil Zhafri
    Member
    Posted 6 years ago #

    I see stars. What is in line 65? It's too messy. Sorry. :)

    Usually when I get such error, I try to count how many if and endif. Then edit accordingly. You might wanna start there.

  14. Doodlebug
    Member
    Posted 5 years ago #

    Hi, I'm currently using poppacket's code from this very thread above (http://wordpress.org/support/topic/153039?replies=11#post-686564).

    But it's overkill, and also, when you have many posts spread over several pages, the second page is displayed exactly as the first (eg. latest posts). This is because there is no if (!(is_paged()) { in the code. I'm not sure how to implement this if/else in php though.

    Any ideas how I can simplify this code and have multiple pages work again?

    Here's my site btw: http://doodlebug.josephlavington.com

  15. pshero
    Member
    Posted 5 years ago #

    I've broken this script down and made it perfectly simple to use here http://wordpress.org/support/topic/212494

Topic Closed

This topic has been closed to new replies.

About this Topic