Build Featured Posts Area without Plugin in WordPress

How to build featured posts area without plugin in wordpress in 6 simple easy to follow steps. Many of my friends have asked me on how to make a custom featured posts area on post page and home page which can showcase the featured posts on a site.

If you are on a wordpress platform there are numerous plugins available for getting a featured posts slider on homepage such as the nivo slider, slidedeck and the latest one, soliloquy.

Majority of them are premium plugins which costs at least 30-40 bucks for a single license, so most people adopt to go for free plugins which contains many lines of code making it heavy on resources, and the plugin developers offer very less updates.

Another alternative is to go for premium themes from Mythemeshop which contains a built in widget for setting up your featured posts, but then again you have got to spend a few bucks.

So that’s why i thought why not give my readers free code snippet with which they can setup a featured posts area on their blog without the use of any plugins and customise it according to their liking.

What we are trying to Build:

How Featured Posts will look like on Home Page

build featured posts area without plugin in wordpress homepage screenshot Build Featured Posts Area without Plugin in Wordpress

How Featured Posts will look like on Posts Page

build featured posts area without plugin in wordpress posts page screenshot Build Featured Posts Area without Plugin in Wordpress

Build Featured Posts Area without Plugin in WordPress:

Here are the code snippets with which you can get a fully working featured posts area for your blog. Just follow the steps below.

Step 1: Things you need to download:

  1. A transparent image for displaying featured post (Link)
  2. A transparent image for displaying featured post titles (Link)

After downloading those two images, copy and paste it in this folder: (http://www.yourblogname.com/wp-content/themes/yourthemefolder/images/)

You can use an FTP client like Filezilla or use your hosting‘s cpanel account for performing the copy operation.

Step 2: Paste the below code in your stylesheet (style.css) file:

/* -------------------------------
Featured Posts Start
----------------------------------*/
.revthatup-recentpostblock { width: 990px; }
.revthatup-recentpost-1 { float: left; margin: 15px 0 10px 9px; position: relative; width: 482px; }
.revthatup-content-heading { background: url("../sensational/images/revthatup-top-transparent.png") repeat-x scroll 0 0 transparent; height: 61px; left: 0; margin: 0; padding: 0 5px; position: absolute; top: 144px; width: 465px; }
.revthatup-content-heading font a { color: #FFFFFF; font-family: "Segoe UI",helvetica,Tahoma,Arial,sans-serif; font-size: 20px; font-weight: bold; line-height: 24px; text-decoration: none; }
.revthatup-content-comment { height: 25px; margin: 0; padding: 5px 0 0; position: absolute; right: 19px; top: 8px; }
.revthatup-recentpostblock-footer { height: 125px; margin-bottom: 7px; margin-top: 10px; }
.revthatup-recentpostblock-2 { width: 990px; }
.revthatup-recentpost-2 { float: left; margin: 15px 10px 15px 5px; position: relative; width: 315px; }
.revthatup-content-heading-2 { background: url("../sensational/images/revthatup-small-transparent.png") repeat-x scroll 0 0 transparent; height: 40px; left: 0; margin: 0; padding: 0 5px; position: absolute; top: 80px; width: 305px; }
.revthatup-content-heading-2 font a { color: #FFFFFF; font-family: "Segoe UI",helvetica,Tahoma,Arial,sans-serif; font-size: 14px; font-weight: bold; line-height: 26px; text-decoration: none; }
.revthatup-content-comment-2 { float: right; height: 25px; margin: 0; padding: 5px 0 0; position: absolute; right: 11px; top: 8px; }
.revthatup-recentpost-1:hover .revthatup-content-comment a, .revthatup-recentpost-2:hover .revthatup-content-comment-2 a { background: #0D7EBE; background-image:-moz-linear-gradient(top,#66E4FC,#0D7EBE); background-image:-webkit-gradient(linear,left top,left bottom,from(#66E4FC),to(#0D7EBE)); filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#ebebeb); outline:0;-moz-box-shadow:0 0 3px #999; -webkit-box-shadow:0 0 3px #999; box-shadow:0 0 3px #999; background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#66E4FC),color-stop(1,#0D7EBE)); background:-moz-linear-gradient(center top,#66E4FC 0,#0D7EBE 100%); -pie-background:linear-gradient(270deg,#66E4FC,#0D7EBE); border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; border:1px solid #0D6FB4; color:#FFFFFF; text-shadow:#0D87C6 1px 1px 0;}
.revthatup-recentpost-1:hover .revthatup-content-heading, .revthatup-recentpost-2:hover .revthatup-content-heading-2 { background: none repeat scroll 0 0 #029CE5; }
.revthatup-content-comment a, .revthatup-content-comment-2 a { background: -moz-linear-gradient(center top,#0BAAF4 0,#0D7EBE 100%); background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#0BAAF4),color-stop(1,#0D7EBE)); background: -moz-linear-gradient(center top,#0BAAF4 0,#0D7EBE 100%); -pie-background: linear-gradient(270deg,#0BAAF4,#0D7EBE); font-family: "Arial","Helvetica",sans-serif; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; border:1px solid #0D6FB4; color:white; text-shadow:#0D87C6 1px 1px 0; padding:2px 14px; margin-left:3px; font-weight:bold; font-size:12px; cursor:pointer; border-image: initial;}

In the above code, replace the word sensational with your theme folder name. You can adjust the width, height and other values according to your theme.

Step 3: Paste the below code in your homepage (index.php) file just after the starting php tag:

<!-- Begin Featured Posts on Home Page -->
<?php if(is_home() && !is_paged()): ?>
    <!-- Show x Posts from Featured -->  
<?php $my_query = new WP_Query('category_name=Featured&showposts=2');
  while ($my_query->have_posts()) : $my_query->the_post();
  $do_not_duplicate = $post->ID; ?>
<div class="revthatup-recentpostblock">    
 <div class="revthatup-recentpost-1">
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><img src="<?php echo get_post_meta($post->ID, 'featured-home-475x205',true) ?>" alt="Post Image" class="postimg" /></a>  
        <div class="revthatup-content-comment">  
        <a href="<?php the_permalink() ?>#comments" title="View Comments">  
        <span><?php comments_number('0','1','%'); ?></span></a>  
        </div> 
         <div class="revthatup-content-heading"><font><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></font></div>
     </div>
    </div>
   <?php endwhile; ?> 
<?php endif;?>
<!-- End Featured Posts on Home Page -->

The above code will enable the featured posts on the homepage and display the 2 most recent posts from the Featured Category. It will also create a custom field called as ‘featured-home-475×205‘ in your post editor page which can be used to get the image of the featured post.

Step 4: Paste the below code in your posts (single.php) file just after the starting php tag:

<!-- Begin Featured Posts on Post Page -->
<?php if(is_single() && !is_paged()): ?>
    <!-- Show x Posts from Featured -->  
<?php $my_query = new WP_Query('category_name=Featured&showposts=3');
  while ($my_query->have_posts()) : $my_query->the_post();
  $do_not_duplicate = $post->ID; ?>
<div class="revthatup-recentpostblock-2">        
   <div class="revthatup-recentpost-2">  
 <a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><img src="<?php echo get_post_meta($post->ID, 'featured-post-315x120',true) ?>" alt="Post Image" class="postimg" /></a>  
        <div class="revthatup-content-comment-2">  
        <a href="<?php the_permalink() ?>#comments" title="View Comments">  
        <span><?php comments_number('0','1','%'); ?></span></a>  
        </div> 
         <div class="revthatup-content-heading-2"><font><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></font></div>
     </div>
    </div>
 <?php endwhile; ?> 
     <?php endif;?>
<!-- End Featured Posts on Post Page -->

The above code will enable Featured Posts area on Posts page and display the 3 most recent posts from the Featured Category. It will also create a custom field called as ‘featured-post-315×120‘ in your post editor page which can be used to get the image of the featured post.

Step 5: Add the below code in your functions.php file to enable the support for Featured Posts Thumbnails:

add_image_size( 'featured', 315, 120, true ); //For Featured Posts on Single Page
add_image_size( 'featured-2', 475, 205, true ); //For Featured Posts on Home Page

Step 6: Setting up Featured Posts:

  • Create a new Parent Category and name it ‘Featured‘.
  • Add 3-4 posts into this category. Now edit one of the posts.
  • Upload 2 images that you want to show in the featured posts area (one for homepage of dimension 475×205 and one for post page of dimension 315×120).
  • Scroll down below till you find the Custom Fields box. Here add new custom fields namely ‘featured-home-475×205‘ and ‘featured-post-315×120‘. In the values field, insert the url of the images that you uploaded above.
  • Finally update the post.

build featured posts area without plugin in wordpress add custom fields Build Featured Posts Area without Plugin in Wordpress

That’s it! Clear your browser cache and revisit your blog. Voila, there you have your very own Featured Posts for your site.

NOTE: Please note the code has been optimised by minifying and compressing it. We have removed unnecessary blank spaces and spacing to make it faster to download.

You just have to try changing values in the css snippet and adjust the featured posts block. It will take a couple of tries to get it right. I recommend the Firebug or Chrome Inspector tool if you are thinking to edit the css. Use Firebug’s Live Edit to see your changes as you make them. If you hit a bump, do comment and i will get back to you as soon as i can.

If you liked this post about how to build featured posts area without plugin in wordpress, subscribe to our newsletter now to never miss a single wordpress guide again!

Subscribe to our Weekly Newsletter

I take your privacy very seriously

Comments

  1. Thien Tran Reply

    Thanks, That’s what i’m looking for a long time!
    I really like that featured posts style with title and the title’s background in bottom of the picture,
    but i can’t find any plugin can do the same.
    if you know any plugin like that, please tell me, i really need it for my website.
    After all, I’m so sorry for my rudeness and my poor English.
    Thank you! :)

    • Gautam Doddamani Reply

      hi thien there are many featured post plugins in the wordpress repository, to name some of the top few you can go for nextgen, slidedeck, nivo slider or a new one such as soliloquy slider, they all are equally good.

Leave a Reply

Your email address will not be published. Required fields are marked *

Notify me of followup comments via e-mail.