How to Create a Featured Intro section in WordPress Blog homepage

A Featured Intro Section  may be very useful if you wish to showcase Some Posts on your Blog Homepage.You can Use the Featured section to show Posts ,a Custom Message, Your photos ,video or anything you want to highlight to your Readers.

Ampercent Reader Chukwudi Writes

I want to have a Featured section In My blog Homepage.I want to show The latest Post Of a Category in that Section or some HTML text as an announcement .What code or Plugin I need to use to achieve this ?

What is The Featured Section and What Purpose does it Solves ?

A featured Section is a Special Space on your Blog (Usually on your Homepage).You can Use this Featured Section in a variety of ways.Some of the Most popular Use of Featured sections are :

1.To show  your best Content and to attract the Readers.

2.To announce something Important to your readers.

3.To show Your podcasts,Videos or other Resources.

The Purpose of the Featured Section is to Differentiate Some of the Content from the rest of your Blog.

Where should I place the featured Intro Section In My Homepage ?

You can place the Featured column anywhere You want.But ideally the featured column is placed Just above the series of posts in the homepage and above the Fold. You can place the Intro section in your Sidebar or Footer but Keeping it above the fold is a good practice.

What code I need to Use in order to Design the featured Section ? What Files I need to Modify ?

If you wish to show the Featured section On your Homepage then You need to edit your Index.php file.If you Want to Show the Featured section In your Single post pages then You have to edit the Single.php File.

Generally The featured sections are used On the Homepage and I will discuss the technique to Show the Featured section in The Homepage Only.However You can Apply This for Your Single Post pages or Archive pages too.

How to Call the Intro page from your Index.php file

Step 1: Create a New page called Intro.php

Open Notepad and paste the following code

<div class=”intro”>Intro page code</div>.

Save the file as intro.php and Upload it your WordPress installation directory.You need to keep the File in the same Directory Where your Index.php File resides.

Step 2 : Call The Intro page From your Index.php file

Case A : I want to show the featured section Just above My posts in the homepage

Open your Index.php file and look for the following code :

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>

Paste the Following code Directly above it :

<?php if (!is_paged()) include_once(TEMPLATEPATH.’/intro.php’); ?>

So after adding The above line Your Index.php file will look something like this :

call-intro-file

Case B : If you want to show The featured section anywhere else

In that case open your index.php file and call the Intro page using the above code from appropriate place.It actually depends on how your theme is coded and may vary for Different themes.

How to code and Style your Intro.php page

Once you have successfully called your Intro page from Index.php file Open Intro.php file for editing.

Case A : If you want to show a Notice or announcement In the Intro section and want to stick it to the homepage

In that case Simply paste your Announcement within a unique class.Also include the required styling in your Style.css file For example :

<div class=”intropage”>Your Intro text or announcement </div>

and the required style may be

.intropage{width:500px;height:100px;background:#454545;

Case B : You want to Show The latest post of  a particular category in the Intro featured Section under discussion .

You may have an Interesting Weekly Post that you want to highlight in your Blog’s Homepage.For example : We have an Interview Series in our Blog where we Interview popular Bloggers.You can see our Interview Section In The Homepage.(The Interview Section Shows the latest Interview from the Blogger Interview Category.)

In that case You have to create a Custom list using the Postlist WordPress plugin.Select your category and Select How many Posts you wish to show on your list.If you  wish to show Only the latest Post of a Category then you have to select the number of posts as 1.You can Completely Set rules on your List and let it update automatically  acording to the Rules set by you.

Once your list Is ready Just call your list in the intro section .Here is the sample code :

<?php if( function_exists(“pl_postlist”) ) pl_postlist(“Your category name”);?>

The above code will be generated By the post list WordPress Plugin and You need to paste this code on the Intro page.This will Show and Update the latest post of a particular category or Tag In your Featured Section.

Please let us Know Whether you liked the Idea of Creating an Intro Section in your Blog Homepage with the Methods described above.Did this Work For you ? If you have any Other Idea or Need help Please leave Your valuable comments.

Email this article

Written by on Monday, April 20th, 2009

  1. Reader Comments

  2. Chukwudi From CPA Marketing

    Sorry I didn’t reply earlier on. Too much work coupled with the fact that I’ve been trying to implement your guide above to absolutely no avail. I guess the theme I’m using at the moment isn’t in love with your idea. I’ll try other themes and see what happens. Hope you’re okay?
    How did the exams go?
    Cheers

    April 27th, 2009
    • Amit Banerjee

      @chukwudi : My exams are going fine. Sorry to hear that the method didnt worked.Can You tell me the exact Problem that You are having ? I can assist you In Coding Your Index.phpif you want …Thank You

      May 2nd, 2009
  3. Chukwudi@CPA Marketing

    Thanks for helping fix my theme. Everything is working fine now. You might consider rewriting this post as the method you used in helping me out is quite different from this one.
    Cheers

    May 19th, 2009
  4. Amit Banerjee

    Yes chukwudi. I am writing another article based on the method that worked for you. I will be publishing the article on technotip.org as a Guest Post. Stay Tuned !

    May 19th, 2009
  5. Gabriel-Edelgard

    I cannot believe this will work!

    July 30th, 2009
    • Amit Banerjee

      @gabriel : Yes it works. Have you tried it ?

      July 30th, 2009
  6. Ravi

    Very Good Article.

    Thanks
    JeevanSAthi

    April 4th, 2011

Add Your Comment

All Comments are Moderated.

YOUR COMMENT

About This Site

Ampercent is a technology blog on computer tutorials, software guides, how to tricks and web tools. The blog is updated daily and written by two computer science students from India. Read More »

Tip Us »

Have a great tip which you want to share with fellow readers? Send in your ideas to tips@ampercent.com