Category: Blogging

This is a guest post by Amit Banerjee. If you want to guest post on this blog, check out the guidelines here.

Do you want to highlight something on your blog homepage as “Featured Article” ?
It may be some of your best content that is popular and you wish to highlight it. In some case you can show your blog contests or Your email Newsletter Service just above your latest articles(above the Fold).

A featured Section is basically an area where you want your readers to focus and “Call to Action”. Technotip.org uses a “Featured Article” section on the Homepage that showcases some of the best content published recently.

If you want to design a similar feature in your Theme then read on. I have described two Methods to Create the featured section for your theme.

Procedure A : This Method Is Simpler. It shows a particular(selected) article in your Featured section of the Homepage. But In future if you want to change and show another article, you have to manually edit your index.php file and change the ID of the post being called. This technique can be used, if you are planning to have an article permanently or for a long time in the featured section.

Procedure B : This Method is a Bit Geeky. But its actually worthwhile. This procedure is used, if you want to show a latest post from a Particular category (or tag) in your Featured section automatically. You just need to Tag your post and the postlist plugin does rest of the job for you!

Procedure A
Step 1: Create a Back Up Copy of your Template : Always create a back up copy of your original theme. If things go wrong, you can restore your Theme using the backup. Use any FTP client ( I recommend using FileZilla ) and download the current theme of your Blog to your computer. Create a copy of that Theme and work on the customizations that we are going to discuss in this article.

Step 2: Upload the WordPress plugin and activate it Download the get-a-post WordPress plugin and upload it to your wp-content/plugins directory. Activate the plugin. No customizations are required.

Step 3 : Write a new post that you want to show in Featured Section If you want to show something static in your featured section, then you need to create a new post and publish it in a back date. This will prevent your article from appearing in the homepage as a repetition[duplicate copy]. Note down the ID of the post. You will need it later on.

Hover your mouse pointer on the published post(in the wp-dashboard) and see at the bottom(status bar) for the article ID.

For example : You may wish to show a Newsletter Service or Some Freebies In your Featured section. In that case create your new article and publish it in a back date.

Step 4: Customize your index.php The index.php file is responsible for showing your Homepage. Open Index.php file in any HTML editor or Notepad and find the following code

<?php if (have_posts()) : ?>

Add The following code just Before it..

<!-- The Intro section.Start editing -->
<div class="intro">
<?php get_a_post(ID); ?> 
<!-- Replace with the Post ID that you want to show -->
<h1><?php the_title(); ?></h1>
<?php the_content(); ?>
</div>
<!--The Intro section ENDS.STOP editing here -->

See this Screenshot for Better Understanding :

Remember to replace ID, with the ID of the post that you wish to see in your featured section.

What we are doing here : We are creating a separate class called intro, that would contain your Featured section’s styling(CSS). And we are using the get_a_post plugin to call a particular post in that section. This Section will be called just before the array of posts that appear in your homepage. Its placed ahead of the Loop.

Note:
A word of caution: Here we are using the class as “intro”. Check Your template, if you are using the same class name already, then it may mess things Up. In that case Simply use a different class name.

5. Style Your Featured Section: Ok All Set. Now you Need to Style your featured section and add Width and Height parameters.
Open your Style.css file and add the following code:

.intro{
margin:0px 0px 30px 20px;
padding:10px;
border:1px solid #CCCCCC;
width:570px; /* EDIT THIS WIDTH */
height:200px; /* EDIT THIS HEIGHT */
background:#F4F7FC; /* background color of the box */
}

You have to customize the CSS of your Featured Section according to your template. It involves modifying the width and background colors, padding borders etc. Make sure to adjust the width and height of the box or else your featured section may break up.

6. Upload the New theme In Your Themes Directory and Activate it You are ready to shoot. Upload your theme and See the Difference.Your Homepage will show your featured section. Test your featured section. Change the heights, width or other parameters and make sure your featured section looks clean and neat. You may want to use Firebug(addon), its Brilliant for testing Designs.

Procedure B
Back up your Template: Please create a back up copy of your original theme, so if things go wrong you can restore your theme to its previous state.

Step 1: Download the postlists WordPress plugin and activate it.
Step 2: Log in to your WordPress admin panel and Create a unique Tag (say “Feature”). You will be Using this particular tag to show a post in the featured section. So use them only on those posts that you want it to appear in the “Featured Section”.
Step 3: Select Postlists Under The Posts Menu and Create a New List.Name It “Feature”.
Step 4: Start Editing Your List. At First Define a placeholder for your list. You will call this placeholder from your Index.php file.

Step 5: After that, you will see two boxes each for html codes before and after the list. Keep both of them blank.

Step 6: Next you will See “HTML code for each entry”. Paste the following code in the Box Provided. A typical HTML entry that shows one of your article:

<div class="post" id="post-<?php the_ID(); ?>">
<p><h2><a href="%posturl%">%posttitle%</a></h2></p>
<?php the_content(''); ?>%content%
</div>

Step 7: Select the minimum and maximum number of posts to show in your Featured section. If you want to show only 1 post then select one in both the cases.

Step 8: Select The rule “Show Only Posts of this Category”. Keep it Blank.

Step 9: Select The rule ” Show Only Posts of this Tag”. Select the Tag that you created in step 2.( In this example its Feature.)

Step 10: Select the Rule “Show only Posts With this status”. Use “published” as the option.

Step 11: Select the rule “Show only Posts With this type”. Use “Posts” as the option.

Step 12: Leave All other rules as Blank. See the screenshot below and study it carefully.

Save your list. You are done Configuring your list. Whenever your list is called, it will show a latest post of the tag that you have specified in step 2.
Step 13: Now you need to call your list in the desired area from the Homepage. Open your Index.php file and look for the Following code:

<?php if (have_posts()) : ?>

Add the following code just before it:

<div class="intro"><?php if( function_exists("pl_postlist") ) pl_postlist("Feature");?></div>

Please note that, we are calling the placeholder that we had created in Step 2. (In this example its “Feature”)

Step 14: You have to Style your Featured Section. Note that we have Kept the Featured section under a Unique Class “Intro”. Add The following code in your Style.css

.intro{
margin:0px 0px 30px 20px; 
padding:10px;
border:1px solid #CCCCCC;
width:570px; /* EDIT THIS WIDTH */
height:200px; /* EDIT THIS HEIGHT */
background:#F4F7FC; /* background color of the box */
}

Modify the Intro Style as per your need so that it blends with your theme. Please be careful: If your Template already Uses the Class “Intro” then this would override the already described class. In that case simply replace the name Intro in step 13 and 14 with some other Unique name.
Step 15: All done. Upload the new theme and activate It. Select a post from your archives and Tag it with “Feature” tag. Now browse your new theme. You will have your new featured Section ready.

Some rapid questions[FAQ]:

Q : I want some of my Best Content In the featured Intro section. How do I change the Posts ?
A : If you are Using method A Open index.php and Find < ?php get_a_post(ID); ?>.Change the ID of the post as per your need.

If you are Using Method B Tag The Post as “Feature” (or your own Customized tag).

Q : How do I show My latest post or a list of post automatically in the featured section ?
A : If you want to show your latest Post or a list of posts in the Featured section automatically, then follow procedure B.

Q : Can I Use the “Read More” excerpt in that Section ? Can I Use images or Videos ?
A : Of course you can. Treat the article just as you treat any other article of your blog.

Q: Can i show any of my pages in that section ?
A: Yes you can . But it needs Some customizations. If you are Using Method A Visit the plugin page for more Information. If you are Using Method B then Select the rule : “Show posts of this Type ” and Select “pages”

Q: My Theme has broken since i installed your code. What should I do now ?
A: You can restore your theme if you had already backed it in step 1. If not leave a comment in this article. I will help you in sorting it out.

Q: I Know very little about Coding WordPress themes. Can You help me out ?
A: Why Not. I can help you code the featured section (provided I get fewer requests). Please feel free to leave your comments in this article if you need any kind of support. I love to help fellow Bloggers and I have learnt this from the Host : Technotip.org

Guest article written by Amit Banerjee from Ampercent.com, a popular technology website with tech articles, tutorials and how-to guides related to software, computers, and internet.