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!
Latest Post Styled Different Than other Posts (15 posts)
-
-
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; ?> -
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!
-
PHP code needs to be in between
<?phpand?>:
<?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; ?> -
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 theif( $counter == 1 ) { ?>line. Thanks very much! -
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.
-
I got it to work by fixing that code and removing the second
endwhileandendif;however I need those secondendwhileandendif;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 -
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> -
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> -
Awesome, thank you very much! I really appreciate it :)
-
Nevermind, alchymyth answered it :)
-
Just noticed this. When I go to a second page on the home page, it has the first post as
entry-featuredas well. How can I make it so only on page 1 it will do that. I think it involves theis_pageelement, but I am not sure how I would implement that within my code. Here is a link to my most recent code onhome.php: http://wordpress.pastebin.com/YdtzwYt9 Thank you! -
/* bump */
-
Replace
if( $counter == 1 )with
if( $counter == 1 && !$wp_query->query_vars['paged']) -
thanks!
Topic Closed
This topic has been closed to new replies.
