WordPress.org

Ready to get started?Download WordPress

Forums

Latest Post Styled Different Than other Posts (15 posts)

  1. Connor Crosby
    Member
    Posted 3 years ago #

    I am making a WordPress theme that has the newest (first) post listed "larger" than the rest. It will have a larger font title and display a thumbnail. How can I style and code this differently than the other posts listed. I only want to do this on the homepage for the first page. Thank you!

  2. alchymyth
    The Sweeper & Moderator
    Posted 3 years ago #

    there are many threads about this in this forum - try forum search to find them.

    one possibility is to intruduce a counter before the loop, and conditionally check for the counter value, and use different html/php for the first post:

    structure in basic loop:

    <?php
    if (have_posts()) :
    $counter = 1;
       while (have_posts()) :
          the_post();
    if( $ counter == 1 ) {
    
    /*here the code to show this first post different*/
    
    } else {
    
    /*here the code to show all other posts*/
    
    }
    $counter++;
       endwhile;
    endif;
    ?>

    http://codex.wordpress.org/The_Loop_in_Action

  3. Connor Crosby
    Member
    Posted 3 years ago #

    I tried using that however I get an error. Here is my code:

    <?php
    		if (have_posts()) :
    		$counter = 1;
    		   while (have_posts()) :
    		      the_post();
    		if( $ counter == 1 ) {
    
    		<div id="entry-featured">
    			<a href="<?php the_permalink(); ?>">
    			<div class="entry-thumb"><?php
    			if ( has_post_thumbnail() )
    				the_post_thumbnail( 'thumbnail' );
    			else
    				echo '<img src="http://connorcrosby.net/wp-content/themes/cctheme/images/default-thumb.png"/>';
    			?></div></a>
    			<h1 class="entry-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
    			<div class="entry-meta">December 12th, 2010 in <a href="#">News</a></div>
    			<div class="entry-excerpt"><?php the_content(); ?></div>
    			<div class="entry-more"><a href="#">Read More</a></div>
    			<div class="clear"></div>
    		</div> <!-- end entry-featured -->
    
    		} else {
    
    		<div class="entry">
    			<a href="<?php the_permalink(); ?>">
    			<div class="entry-thumb"><?php
    			if ( has_post_thumbnail() )
    				the_post_thumbnail( 'thumbnail' );
    			else
    				echo '<img src="http://connorcrosby.net/wp-content/themes/cctheme/images/default-thumb.png"/>';
    			?></div></a>
    			<h1 class="entry-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
    			<div class="clear"></div>
    		</div> <!-- end entry -->
    
    		}
    		$counter++;
    		   endwhile;
    		endif;
    		?>

    Thanks!

  4. Joseph
    Member
    Posted 3 years ago #

    PHP code needs to be in between <?php and ?>:

    <?php
    		if (have_posts()) :
    		$counter = 1;
    		   while (have_posts()) :
    		      the_post();
    		if( $ counter == 1 ) { ?>
    
    		<div id="entry-featured">
    			<a href="<?php the_permalink(); ?>">
    			<div class="entry-thumb"><?php
    			if ( has_post_thumbnail() )
    				the_post_thumbnail( 'thumbnail' );
    			else
    				echo '<img src="http://connorcrosby.net/wp-content/themes/cctheme/images/default-thumb.png"/>';
    			?></div></a>
    			<h1 class="entry-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
    			<div class="entry-meta">December 12th, 2010 in <a href="#">News</a></div>
    			<div class="entry-excerpt"><?php the_content(); ?></div>
    			<div class="entry-more"><a href="#">Read More</a></div>
    			<div class="clear"></div>
    		</div> <!-- end entry-featured -->
    
    		<?php } else { ?>
    
    		<div class="entry">
    			<a href="<?php the_permalink(); ?>">
    			<div class="entry-thumb"><?php
    			if ( has_post_thumbnail() )
    				the_post_thumbnail( 'thumbnail' );
    			else
    				echo '<img src="http://connorcrosby.net/wp-content/themes/cctheme/images/default-thumb.png"/>';
    			?></div></a>
    			<h1 class="entry-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
    			<div class="clear"></div>
    		</div> <!-- end entry -->
    
    		<?php }
    		$counter++;
    		   endwhile;
    		endif;
    		?>
  5. Connor Crosby
    Member
    Posted 3 years ago #

    I tried using that code both with the code for the loop added and without it and it came up with an error:
    Parse error: syntax error, unexpected T_STRING, expecting T_VARIABLE or '$' in ../ConnorCrosby.net/wp-content/themes/cctheme/index.php on line 8
    Line 8 would be the if( $counter == 1 ) { ?> line. Thanks very much!

  6. alchymyth
    The Sweeper & Moderator
    Posted 3 years ago #

    you have posted that line with en erranous space before counter:
    if( $ counter == 1 ) { ?>

    - make sure the line looks like in your latest post:
    if( $counter == 1 ) { ?>

    maybe you can repost the whole code - best, paste it into a http://wordpress.pastebin.com/ and post the link to it here.

  7. Connor Crosby
    Member
    Posted 3 years ago #

    I got it to work by fixing that code and removing the second endwhile and endif; however I need those second endwhile and endif; in order to display the navigation links and if it doesn't show up. Here is what my code is in pastebin:
    http://wordpress.pastebin.com/rXNTGkXt

  8. Connor Crosby
    Member
    Posted 3 years ago #

    Also, how can I use <?php bloginfo('template_url'); ?> inside my if statement for the thumbnail?

    When I do this, it doesn't work:

    <div class="entry-thumb"><?php
    			if ( has_post_thumbnail() )
    				the_post_thumbnail( 'thumbnail' );
    			else
    				echo '<img src="<?php bloginfo('template_url'); ?>/images/default-thumb.png"/>';
    			?></div>
  9. alchymyth
    The Sweeper & Moderator
    Posted 3 years ago #

    try to change this part of your code:

    <?php }
                    $counter++;
                    endwhile;
                    endif;
                    ?>
    
                    <?php endwhile; ?>
    
                            <?php next_posts_link('Older Entries'); ?>
                            <?php previous_posts_link('Newer Entries'); ?>
    
                    <?php else : ?>

    into this:

    <?php }
                    $counter++;
                    endwhile;
                    ?>
    
                            <?php next_posts_link('Older Entries'); ?>
                            <?php previous_posts_link('Newer Entries'); ?>
    
                    <?php else : ?>

    (basically - removed the 'endif' after the first 'endwhile'; and removed the line with the second 'endwhile')

    ref: last queston about integrating bloginfo:

    <div class="entry-thumb"><?php
    			if ( has_post_thumbnail() )
    				the_post_thumbnail( 'thumbnail' );
    			else
    				echo '<img src="' . get_bloginfo('template_url') . '/images/default-thumb.png"/>';
    			?></div>

    http://codex.wordpress.org/Function_Reference/get_bloginfo

  10. Connor Crosby
    Member
    Posted 3 years ago #

    Awesome, thank you very much! I really appreciate it :)

  11. Joseph
    Member
    Posted 3 years ago #

    Nevermind, alchymyth answered it :)

  12. Connor Crosby
    Member
    Posted 3 years ago #

    Just noticed this. When I go to a second page on the home page, it has the first post as entry-featured as well. How can I make it so only on page 1 it will do that. I think it involves the is_page element, but I am not sure how I would implement that within my code. Here is a link to my most recent code on home.php: http://wordpress.pastebin.com/YdtzwYt9 Thank you!

  13. Connor Crosby
    Member
    Posted 3 years ago #

    /* bump */

  14. Joseph
    Member
    Posted 3 years ago #

    Replace

    if( $counter == 1 )

    with

    if( $counter == 1 && !$wp_query->query_vars['paged'])
  15. Connor Crosby
    Member
    Posted 3 years ago #

    thanks!

Topic Closed

This topic has been closed to new replies.

About this Topic