Get $500+ of the best After Effects files, video templates and music for only $20!

Build a Featured Posts Section for WordPress

WordPress is awesome. Even more awesome is the fact that it can be customized to power any type of site you like! Here, we’ll be learning how to create a featured and “latest posts” section – easily a ‘must-have’ for all good News/Magazine themes. We’ll also go over using the ‘Custom Fields’ to their fullest potential.

Introduction

This tutorial covers process of creating the index page of a magazine/news theme for WordPress. The main features of this page will be:

  • Featured Posts.
  • Latest Posts.
  • Using PHP Variables for easy customisation of the above for users of your theme not familiar with PHP/WordPress.
  • Retrieving a post image from the ‘Custom Fields’ section of a post.

Step 1 – Preparation

From your WordPress installation directory, browse through ‘wp-content/themes’ and create a new folder. Name it how you wish (I’m using ‘WordPress Times’). Next, create 5 new files:

  • index.php
  • header.php
  • footer.php
  • style.css

This is the basic layout we’ll be going for:

So a 940px document, with two sections:
Content at 600px & Sidebar at 300px – leaving 40px margin between the two.

Step 2 – Header

Open your header.php file, and insert the following:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head>
	<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
	<meta name="description" content="<?php bloginfo('description'); ?>" />
	<meta name="keywords" content="<?php bloginfo('name'); ?>" />
	<meta name="author" content="<?php bloginfo('name'); ?>" />
	<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
	<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen, projection" />
	<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
	<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
	<title><?php bloginfo('name'); ?> <?php wp_title('-'); ?></title>
    <?php wp_head(); ?>
</head>
<body>
<div class="container">
    	<h1 id="header"><?php bloginfo('name'); ?></h1>

Running through this, we first define the DOCType as XHTML 1.0 Transitional. In the head section we then set all the meta tags, stylesheet and page titles to be retrieved from WordPress; and we include our 3 JavaScript files.
Finally, we open a ‘container’ division, and insert our blog’s name as a header title.

Step 3 – ‘Breaking News’ Posts

We will be including a user-defined number of posts from a ‘Breaking News’ category at the top of our page. Open index.php and type the following, don’t worry, I’ll explain it all below:

<?php get_header(); ?>
<div id="content">

<?php global $more;
$more = 0; ?>

<?php

/* ID of your 'Breaking News' Category */
$breaking_cat = "83"; 

/* How many posts from above category to display? Default = 3 */
$breaking_num = "3"; 

/* Number of recent posts to display under the Breaking News */
$latest_num = "4";

/* IDs of any cats you dont want to include in Recent posts.
Start each ID with a 'minus' symbol Seperate by a comma.
EG: $latest_ignore = "7,-6,-8,-1";
Posts from the 'Breaking' category are automatically excluded. */
$latest_ignore = "-1";
?>

	<!-- Show x Posts from Breaking News -->
	<?php query_posts('showposts='.$breaking_num.'&cat='.$breaking_cat.'');
	  while (have_posts()) : the_post();
	?>

    <div class="breaking">

    	<img src="<?php echo get_post_meta($post->ID, 'thumbnail',true) ?>" alt="Post Image" class="postimg" />
    	<h2><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
    	<p class="datetime"><?php the_time('l, F j, Y G:i'); ?></p>
    	<?php the_content('Continue...'); ?>
    	<div class="postmeta">
            <p><?php the_category(', '); ?> - <a href="<?php the_permalink() ?>#commenting" title="View Comments">
	    <span class="comm"><?php comments_number('0 Comments','1 Comment','% Comments'); ?></span></a></p>
        </div><!--/postmeta-->

    </div><!--/breaking-->

    <?php endwhile; ?>

3.1 – Opening

<?php get_header(); ?>
<div id="content">

The first line is a simple WordPress PHP function to include our header.php file first. Below that, we open our ‘Content’ div to wrap all the posts together. I have included a HTML comment at the closing of every div tag stating which div it is closing. I highly recommend that you start doing this in your own projects if you don’t already, as it helps keep your code as organized as possible.

3.2 – The $more tag

<?php global $more;
$more = 0; ?>

This code allows us to only include part of each post up to where the author has included the <–more–> tag – this stops all the text in long posts from displaying on the homepage.

3.3 – Category IDs

$breaking_cat = "83";
$breaking_num = "3"; 

$latest_num = "4";
$latest_ignore = "-1";

In order to make customizing the theme easier, we include any options here. Each line is commented to further. We do this so that if someone else uses your theme – instead of having to crawl through all your code to find where to put their category IDs – they are all easily accessible at the top of the file. Throughout this tutorial, we will be using these variables in the WordPress loop.

3.4 – Do we have Posts?

<?php query_posts('showposts='.$breaking_num.'&cat='.$breaking_cat.'');
  while (have_posts()) : the_post();
?>

This is a variation of the WordPress loop that outputs our posts from the database. As you can see, we are using the first two of our variables from the section above. The variables substitute themselves with the string associated with them. For example, using the default code, the line would automatically become:

query_posts('showposts=3&cat=83')

The second line then says, if we have the posts then insert them into the page in the format outlined below.

3.5 – Post Content

<img src="<?php echo get_post_meta($post->ID, 'thumbnail',true) ?>" alt="Post Image" class="postimg" />

<h2><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>

<p class="datetime"><?php the_time('l, F j, Y G:i'); ?></p>

<?php the_content('Continue...'); ?>

This isn’t as scary as it looks, trust me.

  • Image – On our homepage preview, you will notice that each post has its own image. This is included using WordPress’ “Custom Fields” section when writing a post. Simply set the ‘key’ to thumbnail then insert the link to the image:

    The code essentially says “Take the data from the post’s custom field named ‘thumbnail’ and stick it into an img tag.”

  • Title – This inserts our post title as a link in between h2 tags. the_permalink() gets the post’s link, and the_title() retrieves the title. Pretty simple, huh?
  • Date & Time – Here, we get the time the post was made, in the format of: l, F j, Y G:i – or in English: Day, Date, Year Time (eg. Saturday, August 2, 2008 14:27).
  • Content – Retrieves the post’s content up to the (thanks to the code we included earlier). ‘Continue…’ is the text displayed at the end of the post. Customise this however you like.

3.6 – Post Meta

<div class="postmeta">

<p><?php the_category(', '); ?> - <a href="<?php the_permalink() ?>#commenting" title="View Comments">

<span class="comm"><?php comments_number('0 Comments','1 Comment','% Comments'); ?></span></a></p>

</div>

This retrieves the category(s) the post is from. If there’s more than one, they will be separated by commas. A link to the comments section, and the number of comments in the article is then retrieved.

</div> <!-- /breaking -->
<?php endwhile; ?>

This simply closes the “div.breaking” that our post was in; and then closes the loop once it is done.

Step 4 – Latest Posts

Below our three ‘Breaking News’ posts, we will include a user-specified number of latest posts, while ignoring any posts from the ‘Breaking’ category, and any of the other user-specified categories to ignore. We’ll add the following to the bottom of our current code:

<!-- Show x Latest Posts -->
<?php query_posts('showposts='.$latest_num.'&cat=-'.$breaking_cat.','.$latest_ignore.''); ?>
<?php while (have_posts()) : the_post(); ?>

<div class="recent">

    <img src="<?php echo get_post_meta($post->ID, 'thumbnail',true) ?>" alt="Post Image" class="postimg-s" />
    <h3><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h3>
    <p class="datetime"><?php the_time('l, F j, Y G:i'); ?></p>
    <div class="postmeta">
        <p><?php the_category(', '); ?> - <a href="<?php the_permalink() ?>#commenting" title="View Comments">
	<span class="comm"><?php comments_number('0 Comments','1 Comment','% Comments'); ?></span></a></p>
    </div>

</div>

<?php endwhile; ?>

4.1 – The Loop

  • showposts=’.$latest_num.’ – Tells the loop to only display the number of recent posts the user has specified in the ‘$latest_num’ variable.
  • cat=-’.$breaking_cat.’,’.$latest_ignore.’ – This instructs the loop to ignore (note the ‘minus’ symbol we require the user to use in the variables) posts which are in the ‘Breaking’ category so as not to duplicate any posts; and also to ignore posts from any of the categories which the user specifies in the ‘$latest_ignore’ variable.

The rest of it is self-explanatory and the same as the Breaking News feature. A few differences are the lack of the ‘content’ section from each post, and also the post image is given the class of ‘postimg-s’ instead. This will allow us to only require one thumbnail image – which we will then size down in our CSS from 200×200 to 50×50.

4.2 – Closing the page

In order to end the current page, we need to close the div#content and include our footer:

</div><!--/content-->
<?php get_footer(); ?>

4.3 – Footer.php

In this file, simply close the #container, body and html tags:

</div><!--/container-->
</body>
</html>

Step 5 – CSS Styling

Right now, if you’ve created some posts, your design should look something like this:

Pretty ugly, eh? Well not for much longer.

5.1 – Necessities

Open up your style.css file and paste in the following code:

/*------------------------------------------------------------------------
Theme Name:    WordPress Times
Theme URI:     http://www.vivawp.com/
Description:   A tutorial for NETTUTS.com by Dan Harper
Version:       1.00
Author:        Dan Harper
Author URI:    http://danharper.me
------------------------------------------------------------------------*/

This is required at the top of this file, as it gives the Theme Manager in WordPress some information about your theme. Fill in the sections in it as you like.

5.2 – Styling

Below is all the CSS code used for styling the document. It is documented below.

* {margin:0;padding:0;}

body {
background-color: #faf9f5;
color: #3d3d3d;
font-size:75%;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#container {
width: 940px;
margin: 15px auto;
}

h1, h2, h3, h4, h5, h6 {
font-family: Georgia, "Times New Roman", Times, serif;
}

/* BLUEPRINT CSS TYPOGRAPHY */
h1, h2, h3, h4, h5, h6 {font-weight:normal;color:#111;}
h1 {font-size:3em;line-height:1;margin-bottom:0.5em;}
h2 {font-size:2em;margin-bottom:0.75em;}
h3 {font-size:1.5em;line-height:1;margin-bottom:1em;}
h4 {font-size:1.2em;line-height:1.25;margin-bottom:1.25em;height:1.25em;}
h5 {font-size:1em;font-weight:bold;margin-bottom:1.5em;}
h6 {font-size:1em;font-weight:bold;}
h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {margin:0;}
p {margin:0 0 1.5em;}
li ul, li ol {margin:0 1.5em;}
ul, ol {margin:0 1.5em 1.5em 1.5em;}
/* /BLUEPRINT CSS TYPOGRAPHY */

h1#header {
margin-bottom: 20px;
}

#content {
width: 600px;
float: left;
}

.breaking, .recent {
padding: 10px;
border: 1px solid #3d3d3d;
margin-bottom: 15px;
}

.postimg {
float: right;
width: 200px;
height: 200px;
padding-bottom: 10px;
}

.postimg-s {
float: right;
width: 50px;
height: 50px;
padding-bottom: 10px;
}

.breaking h2 {
font-size: 2.5em;
line-height: 1em;
margin-bottom: 0px;
}

    .breaking h2 a, .recent h3 a {
    text-decoration: none;
    color: #3d3d3d;
    }

    .breaking h2 a:hover, .recent h3 a:hover {
    text-decoration: underline;
    }

p.datetime {
font-style: italic;
font-size: 0.9em;
}

/* POST META */
.postmeta {
margin: -10px;
padding: 4px;
background-color: #dedbd1;
clear: both;
}

    .postmeta p {
    margin: 0;
    padding-left: 6px;
    text-transform: uppercase;
    font-weight: bold;
    }

    .postmeta span.comm {
    font-weight: normal;
    }

    .postmeta a:link, .postmeta a:visited {
    color: #3d3d3d;
    text-decoration: none;
    }

    .postmeta a:hover, .postmeta a:active {
    text-decoration: underline;
    }

#sidebar {
width: 300px;
margin-left: 620px;
}

5.3 – Examining the CSS

  • * – Removes un-wanted margins and paddings from all elements that browsers insert themselves.
  • body – Basic page styling of colours and fonts.
  • #container – Sets the page width to 940px. 15px margin at the top & bottom, and centres it in the window.
  • h1, h2, h3, h4, h5, h6 – Heading fonts to Georgia, Times New Roman, Times or any serif font.
  • Between Blueprint comments tags – Basic typography styling from the Blueprint CSS Framework. Saves a lot of hassle with getting text to look nice.
  • h1#header – Adds a bit of separation from the Blog name, and the rest of the document.
  • #content – All our content is wrapped in 600px on the left. The remaining space can be used as a sidebar.
  • .breaking, .recent – Includes Breaking and Recent posts in a box with 10px padding. 15px gap between each one.
  • .postimg – Formats the Post’s Image for Breaking articles. Image size limited to 200px and floated right.
  • .postimg-s – Same as above, but for Latest articles and the image is resized to 50px.
  • .breaking h2 – Makes title of Breaking articles smaller, with no bottom margin.
  • .breaking h2 a, .recent h3 a – Basic styling for titles of articles, hiding the default link style.
  • .breaking h2 a:hover, .recent h3 a:hover – Adds an underline to title link when hovered over to show the user it is in-fact a link.
  • p.datetime – Date & Time string for articles made slightly smaller, and in italics.
  • .postmeta – Creates box to include the Post Meta details (categories & comments). margin -10px ensures it fills the whole of the posts box.
  • .postmeta p – Text in postmeta div is made uppercase and bold.
  • .postmeta span.comm – Removes the bold styling for the “x Comments” text.
  • .postmeta a – Link styling to remove default link colour.
  • .postmeta a:hover – Adds underline to links on hover.
  • #sidebar – Creates an area for a sidebar down the right side of the page.

The page will now look like this. Much cleaner!

Conclusion

Congrats. You have successfully created the basics for the front page of a news theme for WordPress, complete with a Featured post area – a ‘must-have’ when it comes to News themes. You can also stay ahead of the competition with your easy customisation options using the PHP variables.

Look out for the launch of vivaWP – a new family of Premium WordPress themes coming mid-August. Our first theme, CocoaNews, shares some of the basic code shown throughout this tutorial.

Dan Harper is danharper on Themeforest
Tags: Wordpress
Add Comment

Discussion 102 Comments

Comment Page 2 of 2 1 2
  1. Definatly worth a “digg” amazing what springs up when using google, all i did was type in “featured post for wordpress” and up popped this monster, its now in my favourites..thanks

  2. mthing says:

    Testing gravatar. Oh and working on featured posts!! Thanks!

  3. Ted says:

    i’m using 2.7 and the text from my posts aren’t showing up. i’m getting everything else though. ideas?

    • SIA says:

      Hi i am using latest wordpress version. Please use the “SLUG” instead of id e.g

      instead of $breaking_cat = “83″;

      use

      $breaking_cat = “slug”;

      You have to define slug in wordpress admin categories section.

  4. V.C says:

    I found your topic when I was looking for some ways to add feature in wordpress blog.
    It’s seem to be hard to do.
    Anyway, I’ll try my best.
    Thank for your post.

  5. doollaacice says:

    Super site. i will come back again:D

  6. плoxaя says:

    Любопытно, а продолжение будет?

  7. нeвecтa says:

    Сенкс:) Классная тема, пишите чаше – у вас отлично получается :)

  8. Saffsam says:

    hi there I came across your tutorial in my hunt for a featured list post plugin.

    This is the only thing that is vaguely similar:
    http://www.pcworld.com/article/123719/top_10_pointandshoot_cameras.html

    Instead of it being printers I want it to be top 10 list of photos
    I’m trying to have a table with 3 columns
    column 1 – contains the image which links to my post
    column 2 – contains my post extrac which links to my post
    column 3 – contains the link which credit links to the original photo
    Any ideas on how to go about doing this?
    would really be grateful for any help
    Saff

  9. This does not seem to work in Wp 2.7 and later.

  10. ben says:

    glad to see some php tuts around tx

  11. Roy88 says:

    I started to suck a little less anyway. ,

  12. Barbara38 says:

    For many staff, this can be an eye- opening experience. ,

  13. SIku says:

    I haven’t tried this yet but looks cool. Will be very helpful in my new blog design. Thanks for the super cool post.

  14. jurug says:

    wowww.. interesting.. thanks I have bookmarks

  15. yunne says:

    Thanks!! It was very useful your tutorial!!

  16. fx says:

    thanks I have bookmarks!

  17. wnoukzkakfey says:

    http://mipagina.univision.com/wnoukzkakfey flagyl what type of antibiotic | flagyl what type of antibiotic
    http://mipagina.univision.com/hjomessbinmh fosamax and leg pain | fosamax and leg pain
    http://mipagina.univision.com/oeksxraehdlo flomax and rash | flomax and rash
    http://mipagina.univision.com/hvvtqrnohwcs evista de mulheres | evista de mulheres
    http://mipagina.univision.com/zqbqpzgjdosm flomax cataract surgery | flomax cataract surgery
    http://mipagina.univision.com/pnzcktysymgn cipro birth control | cipro birth control
    http://mipagina.univision.com/wopuqblezmoj clonidine rx for sleeping | clonidine rx for sleeping
    http://mipagina.univision.com/agbnqunpdmcz clomid 100mg with regular periods | clomid 100mg with regular periods
    http://mipagina.univision.com/hiriikwbqwoc overdosage information cozaar contraindications losartan | overdosage information cozaar contraindications losartan
    http://mipagina.univision.com/sdzviuafntas clonidine type of drug | clonidine type of drug
    http://mipagina.univision.com/zfvonadzualj types of imitrex | types of imitrex
    http://mipagina.univision.com/ipqomlzvbybd best source information about cialis | best source information about cialis
    http://mipagina.univision.com/ojhrbqqdwmha cipro cystic fibrosis | cipro cystic fibrosis
    http://mipagina.univision.com/ozrlezfkfdns online clomiphene | online clomiphene
    http://mipagina.univision.com/cpwpzkliupfo anthrax cipro | anthrax cipro
    http://mipagina.univision.com/mzwvpjjmwxik crestor precautions | crestor precautions
    http://mipagina.univision.com/frmkrszkvwjp crestor savings card | crestor savings card
    http://mipagina.univision.com/ffffmjeztsmw crestor muscle cramping weight gain fatigue | crestor muscle cramping weight gain fatigue
    http://mipagina.univision.com/olgtvxwrbgib hoodia gordonii hoodia diet | hoodia gordonii hoodia diet
    http://mipagina.univision.com/mnolevuypkbo celexa am or pm | celexa am or pm
    http://mipagina.univision.com/duyngplsfcuc promethazine codeine script | promethazine codeine script
    http://mipagina.univision.com/xxupcuhnwmie coumadin therapy prosthetic valve | coumadin therapy prosthetic valve
    http://mipagina.univision.com/cdxhcetgqmbi ephedrine and drug screening | ephedrine and drug screening
    http://mipagina.univision.com/nmxrvkwzehvw celexa and high blood pressure | celexa and high blood pressure
    http://mipagina.univision.com/znfnrmjmrjdq pharmacokinetic of clonidine | pharmacokinetic of clonidine
    http://mipagina.univision.com/ujvvifxszaux imitrex death | imitrex death
    http://mipagina.univision.com/rbtfmnhueguh weight gain hydroxyzine | weight gain hydroxyzine
    http://mipagina.univision.com/lzwfgfpoisxo cuba gooding cialis | cuba gooding cialis
    http://mipagina.univision.com/dtpntfdduzwi celexa side effects | celexa side effects
    http://mipagina.univision.com/ymbrhtykrfkg glucophage clomid and pcos | glucophage clomid and pcos

  18. Damn, that sound’s so easy if you think about it.

  19. ColdFire says:

    Hello, i think this is a often problem on the wordpress themes. If anyone can help. I want to ask something about the wordpress theme chronicle. I have a problem with it and maybe you had the same one. It worked ok for a while but today the latest news feature on the top stoped working. It only shows 1 article for the x category instead of 1-20. Do you have any ideea how can i fix this? I’ve disabled all plugins, tried renaming articles, deleting them, using excerpt, deleting the pics in articles and much more. I have the latest wp 2.9.2 Please answser if you see this. E-mail me at eu123tu at yahoo dot com because i don’t know if i will find this site again :) Thank you.

  20. i newbie want to learning about themes of wordpress :)

    its great tutorial for custom themes i was get broo

    thankz

  21. Kristian says:

    This is a great tutorial.
    I do have a question though,
    The section with popular post this month and related post used on this site, is that from a plugin or is it hardcoded?

    Could there be a future tutorial on how to do this?

    Thanks again,
    kristian

  22. Kelvin Lee says:

    Came accross your monster post while searching for feature post plugin. God if I had time I will definitely tryout your method and make the best out of it!

    Thanks for the great post! Saved it for future readings :D

  23. thankz and its great tutorial for me..

    to develop wordpress

    i’m came back :D

    2 fisit in this post

  24. Amanda says:

    Do you know how you could create two featured sections and have them both set to the same category w/o pulling in duplications of each other’s posts?

  25. Nice code but it has problem to show page navigation at the bottom

  26. max says:

    it works but when I go to page 2 it still shows the featured header. I just want to show this on the first page only.

  27. WebVeins says:

    really wonderful.
    thanks for sharing..

  28. Matt says:

    This is a great tut and I thank you for putting it up. Also, I have to admit I was a little disappointed that the zombie sheep story didn’t go anywhere. It seemed interesting to me.

  29. I tried this and although I have no idea of PHP it worked for me! Very useful, thank you!

  30. james says:

    Thanks for this tutorial it saved my life.

    …and if you want to add the breaking news in the header and the latest posts in another page, just add all the variables as globals at the top in the header:

    This means the global variable value can jump between the header and another page. If you don’t declare the variables as global, you can only use this tutorial in one page.

    That’s what I found anyway, correct me nicely if I am wrong.

    Thanks again for the tutorial Dan.

  31. james says:

    Actually, on second look, when you click a post in the recent posts, the breaking story always gets shown, no matter which recent post is clicked. It’s like the breaking story post id is being stored and used for every post on the page. really annoying. Anywayone know why this is?

    thanks

  32. James again says:

    I worked it out:

    If you are having trouble where every post shows the breaking story when clicked (no matter what post you click in the recent posts list),

    you need to add a loop breaker at the end of your endwhile in the header.php or where ever you put the first loop: (like in the step 3 breaking news posts above)

  33. Very nice tutorial, will add this one to my favorites and will use it on some new blog :)

  34. Sebastian says:

    Very nice tutorial, but what if we want to call the archives and we want all the images to appear.

    We got:

    <img src="ID, ‘thumbnail’, true) ?>” alt=”Post Image” class=”img_catfeat” />

    But this only shows the thumbnail how do we call the Featured and the thumbail images??

  35. Kim says:

    Very nice, this was exactly what i was looking for.

    Thanks

    //K

  36. My Friend Harper thank you very much. You don’t know I am searching for this kinda tutorial from many days. And finally reached at the right place. You describe very amazingly. Appreciating.

  37. Jeff Porter says:

    Great post. Created an empty(ish) front page template, added your code, added a ‘Featured’ category. changed the IDs in your code and in about 15mins I had a featured section for my front page.

    I’m new to PHP, but after trialling a number of plugins that should have done the same job, this was much easier. As a bonus, you’ve added classes, etc., where appropriate to make styling the page easy.

    As an aside, I also added the ‘Reveal IDs’ plugin to make life easier.

    My URL only shows a landing page at the moment, but that should change soon.

  38. Jared says:

    Will this still work in 3.1 ?

  39. Ahmed Abbouh says:

    Amazing how easy was this, i was wondering how to code this in my next theme.

    thank you so much for this detailed tutorial :)

  40. Hoc Bong says:

    Do these codes work well with WP 3.1, Dan ?

  41. SoNo says:

    I am using this code on my local server. When i save all the work on there and refresh my home page the thumbnail of the post dont show i m try to give this in my theme but its still getting an error.

    Any one idea how can i fix it.?

    Thanks its awEsome site and i want to learn more from here..:)

  42. Nick says:

    Is this tutorial showing people how to create a completely new theme that includes a featured post section?

    If so then its useless to me and probably most other people like me. We just want to know how to MODIFY our current theme to include a featured post section on the front page.

    • Jeff says:

      I completely agree with Nick. I have the Genesis theme on my site and am trying to make my homepage look like the example, but the above does me no good. Anyone out there know how to modify our theme to give us the above look?

  43. akik says:

    Very Informative Post and Very Helpful. Thanks For Sharing

  44. Praveen says:

    My blog looks cool with this Featured post widget ;)

  45. Blake says:

    This is an amazing tutorial, I have only just started wordpress theming, and currently working on my second theme. I have the featured post bit implemented. However one massive problem is the Pagination doesn’t work, using my own custom code or wordpress’ very own post_nav_link. Which is a major set back! :(

  46. Byteat.com says:

    Thanks for you Post but i think ther is plugin for the same issue.
    http://wordpress.org/extend/plugins/query-posts

  47. Zielercrm says:

    hello, i am eking, love you!

Comment Page 2 of 2 1 2

Add a Comment

To add a code snippet to your comment, please wrap your code like so: <pre name="code" class="html">YOUR CODE</pre>. You can replace the class name with "js," "css," "sql," or "php." If there are any "<" or ">" within your code, please search and replace them with: &lt; and &gt; respectively.