Highlighting Upcoming on WordPress Home Page
Let’s say you have an upcoming event, holiday, tax season alert or some other post that you want to appear differently on your WordPress home page than the other posts. Perhaps your home page looks somewhat like this, with thumbnails (you can learn more about thumbnails in this post):
Or maybe your home page looks like a list of excerpts, like so:
What if you want to make one post in particular show up on top? You could use sticky posts, but then that top sticky would like exactly like the other posts.
Here is code that I’ve used to get one or a few posts to show up on top of your regular posts. First, write one of the posts and designate it in a new category. Call your new category “special.” Look in the Categories section of your admin panel to see the number of the category. Jot down the number. Now add the following code to the top of your index.php page:
if(is_front_page()) { #just use this on the front page
/*START SPECIAL SECTION*/
global $post;
$myposts = get_posts(‘category=33′); #33 should be the number of your special category
foreach($myposts as $post):
?>
<h2><a href="<?php the_permalink(); ?>"></a></h2>
<?php endforeach; ?>
<?php /*END SPECIAL SECTION*/ ?>
…. more front page code here….
} #end just for front page
You may just need to insert the code from START SPECIAL SECTION to END SPECIAL SECTION; the key is to put it in the right place, so it just appears on the home page. The posts from the special category will now show up as clickable links on top of your home page.
Let’s say you want formatted in a more special manner, like so:
Instead of
Try this:
<!–CODE FOR THUMBNAILS HERE–>
<div style=”float:right; width: 100px;”>
<?php
if ( (function_exists(‘has_post_thumbnail’)) && (has_post_thumbnail()) ) {
the_post_thumbnail();
}
?>
</div>
<!–end of CODE FOR THUMBNAILS–>
<h2><a href="<?php the_permalink(); ?>"></h2>
<div class=”entry”>
<?php the_excerpt() ?>
</div>
</div> <!-end fancy_box –>
Then you will need to write up some CSS code to make the box stand out. You can try some of the code in this post on Fancy Boxes in CSS. Also, be sure your theme has the new thumbnail code applied – see the post on thumbnails in 2.9 for more information. An alternative to the special category is to use a custom field – you can then do a similar page layout as above with rewind_posts() or with a custom query_posts().
Themocracy