Want to drive some traffic to your great articles that have already aged off your homepage? No worries, now you can feature articles with The Feature WordPress plugin from No One's Listening. This plugin lets you specify articles you wish to feature as well as up to a 100 x 100 pixel picture to accompany the article title. This guide will show you the basics of getting The Feature up and running as well as adding some basic styling.
I have been considering including this in the next release of Deviance, but I would like to get some feedback before I delve any deeper. When the feature plugin is installed you can call it with a simple PHP call and display as many featured articles as you want, randomly as well, anywhere on your blog. I recommend the sidebar.
Installation
Head over to this page and download the latest version of The Feature. Installation is just like anyother plugin; drag the contents of the archived file to your WordPress plugins folder. Also, active the plugin via the plugins page in the WordPress admin panel.
Selecting a Featured Article
Just to test it out, I went back to my archives and found a few of my favorites to mark as featured articles. When you find a few that you want to select, click the edit button aside the title if you are navigating in the Manage table in the admin panel. You will need to scroll down, before the edit box, to where you see Make This Post a Feature. In this area you check the first check box marked Yes! Edit/update this post's feature information.
Below you will see an area for you to select the accompanying image. Find the image you wish to use, and downsize to 100x100 or smaller if necessary and upload to your server in the wp-content/plugins/the_feature/featurepics/ directory. You will have to do this part before the stuff in the admin panel, or refresh the edit page so you can see the image you just uploaded. Back in the admin panel, click on the image you just uploaded to select it. Now just type a brief description of the article and scroll back up and click on Save.
Inserting the PHP Call
For the featured article to actually display you will need to place the following line of code where you want it displayed.
<?php the_feature(n, random); ?>
Replace n with the number of featured articles you want displayed at a time and replace random with true or false. By default random is true and will randomly display any of the articles you have marked as featured. I recommend inserting this code into the sidebar, as the size of the features (100 x 160 pixels) is suitable for this environment. Particulary if you are running the K2 theme, you simply add that line where ever you want in sidebar.php. I placed it under my links, where you can find under these two lines:
<?php get_links_list(); ?>
<?php } ?>
Save the file and keep on reading.
Styling
By now you should at least see your featured articles in your sidebar. They are likely displayed in a hideous fashion, as they have no styling. The Feature automatically puts a number in the top left corner of every featured article, which I feed to be worthless especially when you are displaying the posts randomly. The number does not denote when the article was published or whether it's more popular; it simply serves to tell the user that it is on top, which is already quite obvious. I decided to get rid of that by editing the_feature.php in wp-content/plugins/the_feature. Find line 37 or if you don't know how to navigate by lines in your text editor, find the following line:
echo '<div class="featureItem">'.image.'<strong>'.(i+1).'.<br/>'.title.'</strong></div>';
Edit to:
echo '<div class="featureItem">'.image.'<div class="featureText">'.title.'</div></div>';
Save the_feature.php.
Now that we have that little annoyance out of the way, we can get to adding a few CSS entries in your stylesheet. Find your active stylesheet (for K2 users, it will be the one you have set as K2 Scheme in the K2 Options in the admin panel) and add the following entries anywhere within. Take heed that the following code is a work in progress and may look radically different in various browsers. This is just some skeleton code that you should tweak with.
.featureItem {
background: #fff url('/path/to/featureitem.png') top left no-repeat;
width: 160px;
height: 100px;
padding: 5px;
margin-bottom: 5px;
padding-left: 5px;
border-left: 0px solid #eee;}
.featureText {
border-left: 10px solid transparent; /* Doesn't work in IE yet, Sorry */
padding-top: 20px;
text-align: center;
font-weight: 100;
font-size: 0.9em; /* Looked fine at 1em, but it went over the border in IE */}
.featureItem img {
float: right;
margin-left: 5px;
padding: 15px;
border: 0px;}
Save your CSS file. Before you try to look at your featured articles you are going to need to create a background image for your featured posts, upload it, and change the background CSS attribute in .featureItem. Once you create a background image, save it as any file type you want, but do not forget to change the according CSS as mentioned before. Now you can bask in the glory of your very own featured articles section. This way no one will ever forget your favorite articles and newcomers to your site will be come instant dedicated readers. Please leave some feedback on your way out.
