7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
  1. Code
  2. WordPress

Build a Featured Posts Section for WordPress

Read Time: 11 mins

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.


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:

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:

3.1 - Opening

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

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

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?

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:

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

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

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.

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:

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 200x200 to 50x50.

4.2 - Closing the page

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

4.3 - Footer.php

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

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:

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.

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!


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.

Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.