Adding Featured Articles To A WordPress Page
Jan 30th, 2009
Many of my recent projects have been conversions of old, static websites into modern, content-managed sites built on WordPress. WordPress has an option to set the homepage of the site to a static page instead of the index of posts in reverse chronological order that usually characterize a blog.
Some of my clients were motivated to make the upgrade because they wanted to blog (verb) but were not sure they wanted a blog (noun.) The easiest thing to do is start with the old site and recreate its structure in WordPress pages, mapping pages of the old site to the new. A sidebar widget can be used display the titles of the most recent posts.
Okay, but one of my recent clients wanted some more flexibility and asked for some way to attach post listings to selected pages. For example, a list of featured articles on her home page. Hmm, that’s exactly what I’d like for my homepage, too. It would have the following benefits:
- Make the home page more interesting to humans and robots
- Highlight the important posts separating them from all the other stuff I publish
- Encourage me to write more posts that people will actually read
The technique I developed should work in most WordPress themes, I started out with MistyLook by Sadish Bala. Nothing is guaranteed, of course, so make sure you have reliable backups before you change anything. Most of the code for the feature will reside in a separate php file, named page_posts.php, which will be included into the default page template, page.php.
Start by uploading an empty file, named: page_posts.php to your theme directory. Edit page.php inserting the following line right after the endwhile statement at the bottom of “The Loop”.
<?php include(TEMPLATEPATH . '/page_posts.php'); ?>
It will pull in the contents of page_posts.php. Since that file is empty, nothing changed on any page. If anything goes wrong with this or after any of the next steps, just delete the above line of code from page.php and re-save it.
Here’s the code for page_posts.php
It does the following:
- Looks for a custom field called ‘post-category’; it’s value is a category name
- Writes a section title using that category name
- Getsall posts in that category
- Loops through the posts displaying the permalinked title and excerpt for each.
Now that the code is in place, pick an existing category or create a new category to associate with some page, for example, Featured Articles for the home page. Edit your posts and add the ‘Featured Articles’ category to whichever are appropriate. Edit the home page and add a custom field with the key = post-category, and value = Featured Articles. Save the page. Check the home page. It should now have a heading with the category name followed by a list of posts.
Each post in the list is in a division with the css class, post-item. On my site, I added the following rules to the site’s stylesheet:
#content .post-item {
border: 1px #dde solid;
padding: 4px 8px; margin-top: 6px;
}
#content .post-item .post-info {
background: none;padding:0;
}
The first rule puts a light thin border around each post and spaces them nicely. The second rule resets the styling my theme normally uses on the author line.
Further information can be found in the WordPress documentation. If you try this and it works for you, drop a comment on this post with your URL.
– Larry
