How to Display Featured Post with Thumbnails Without Plugin in Homepage

On home page, we generally show a fixed number of recent posts with summary. Although, WordPress provides Sticky Posts functionality but not so useful when number of featured posts are more. So I decided to implement this without any plugin.

1. Display featured post with thumbnail.
2. Title will be placed below the thumbnail.
3. Featured posts will be randomly selected and must show default thumbnail if no thumbnail is defined for the post.
4. All selected posts must appear together, no slider to navigate.
5. It must not use any script(Not good for SEO) or plugin.

1. To implement this, First, You need to create a category (say featuredcategory) and add featured posts in the category.
2. Write following code in function.php of your WordPress theme.

<?php

function getFeaturePosts(){

 ?>             

                <ul class="related-posts">

                <?php

                $default_thumbnail = 'http://img.techbrij.com/techbrij%20logo.gif';

                $the_query = new WP_Query('showposts=5&orderby=rand&category_name=featuredcategory');

                while ($the_query->have_posts()) : $the_query->the_post(); ?>

                        <li>

                             <div class="related_thumbnail">

            <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>">                           

                            <?php

                            if (has_post_thumbnail()):

                             the_post_thumbnail();

                            else:

                            ?>

                            <img src="<?php echo $default_thumbnail; ?>" alt="<?php the_title(); ?>" />

                            <?php endif; ?>

                            </a>

        </div>

        <div style="clear:both;"></div>

            <div class="related_permalink">

            <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a>      

        </div>

                             

                        </li>            

 

                <?php endwhile; ?>

                <?php wp_reset_query(); ?>

                </ul>

<?php

}

 ?>




In the above code, you need to define $default_thumbnail parameter and assign default thumbnail link. If there is no thumbnail then defined $default_thumbnail link will be displayed.
Following line is the most important line.
$the_query = new WP_Query(‘showposts=5&orderby=rand&category_name=featuredcategory’);
showposts=5: define number of posts to be displayed
orderby=rand: posts are randomly selected
category_name=featuredcategory: define category of featured posts.
3. Add following styles in your css file:

?

/* Related OR Feature Posts */ .related-posts {     list-style:none;     margin:0;     padding:0;           }    .related-posts li {     display:block;     text-align:center;     float:left;     margin:0 auto;     padding-left:3px 10px 3px 0px;        width:150px;     height:175px; } .related-posts li :hover{   } .related_permalink{       text-align:center;     padding-top:5px;        padding-bottom:5px; margin-bottom:2px;    }  .related_permalink a{ color:black; font-weight:bold;  text-decoration:none;  }  .related_permalink a:hover{  text-decoration:underline;  } .related_thumbnail{      text-align:center; } .related_thumbnail img { border-width:0px; width:100px; float:none; margin:0 auto; } /* Related Posts End */

you can change thumbnail size by defining height and width in .related_thumbnail img style.
4. Now call method where you want to display featured posts.

?

<?php  getFeaturePosts(); ?>

See following sample display of featured posts: