HOW TO: WordPress Featured Articles
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 100×100 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.
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 } ?>
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:
Edit to:
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.
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.
Nice HOWTO post :). I might not need it though but it surely goes to my bookmark. Keep up the job well done.
1 for adding this to Deviance. This along with a cookie that remembers the commenter’s info (cough-cough :) ) would be welcomed additions.
(That ought to be “ 1“, not just “1″.)
great tutorial! one of my favorite wp plugins :)
Paul: Again a brilliant tutorial - you give enough information to make it easy for real beginners as well as seasoned veterans! Keep up the good work! (Great plugin, btw)
Great Tutorial like always Paul! Is it possible to set Pages as Features aswell? Would be a nice addition.
Paul,
Thanks for the great tutorial, I’ll definitely give a try. Quick question though, http://no.oneslistening.com/ doesn’t work for me, and hasn’t for awhile - do you know what’s up?
It’s been a little iffy for me as well… try their site later I guess.
I apologize for our server’s behavior. HTTPD and SSHD are both down. It couldn’t have come at a worse time, with our traffic at an all time high.
Unfortunately the server needs a hard reboot and no one will be near the computers until this weekend. That’s one of the downsides of having your own server and not being with a group like MT.
Paul, thanks for the great write-up. This has been one of the back-burner type plugins for a while (in part, due to the work Kiwi required), but now that there seems to be sustained interest I’m bringing it back to the table and hope to have some new improvements and a nicer interface in the near future.
Enjoy the holiday weekend, all!
Olly, I liked your suggestion about pages. So much, in fact, that I added it this afternoon.
When our site comes back (hopefully soon), I’ll upload the new version.
Thanks for another supurb learning post … looks like an awesome plugin.
Yas … thanks for the plugin! Ha. Great work. Am plugging in now.
@Yas: Thank you for implementing this feature. I just added it to my weblog. Kudos to you!
I can’t get to the page to download the plugin :-(
Anyone want to shoot me a copy by e-mail?
mrapplegate@gmail.com
I will keep trying to get to the site in the mean time.
Paul
I am using WP2 and K2 Beta 2 and when I select the ‘Yes! Edit/update this post’s feature information’ but the info does not get saved and therefore does not show up on the sidebar.
Oh, WP2. I haven’t opened that can of worms yet, but thanks for the heads up, Greg.
basically I’ve hacked mine before I knew about this. On the $posts as $post loop, I grabbed the first post out of the array to feature it aside and styled it differently… well i guess it isn’t the same… but that’s what i did.
Meh, I gave up on it. I installed it and used it. It would show the available images just fine, but would not preview them in the edit post window or display on the front page when I saved the changes. I tried hacking the code to figure out why it wouldn’t work, but to no avail. I just uninstalled it and deleted all the files from my directory.
For me it works (link in my name) but it doesn’t save the name of the description so it remains the post title which is too long!
Hiya,
I don’t know if you’ll be able to help me but the feature plugin doesn’t work on my blog and the forum on n1l isn’t working for me!
I’m using a mod of the Hemingford template, and I’m trying to put it in the footer underneath the ‘recently’ section, and all its showing is the php code… where am i going wrong?
Thanks in advance,
James Doman.
Ok, the_feature plugin stacks items on top of each other for use in the sidebar, but I can’t for the life of me figure out how to get them to show up side by side for use at the top of my index page. How can I hack the code to make it do that?
It doesn’t work to me…what have I done wrong?? Snif
I installed code in sidebar which is , selected a post with picture, made sure it was in the featured post section and this was in my sidebar:
WordPress database error: [You have an error in your SQL syntax. Check the manual that corresponds to your MySQL server version for the right syntax to use near 'n' at line 1]
SELECT post_id FROM wp_postmeta LEFT OUTER JOIN wp_posts ON ID = post_id WHERE post_status != ‘draft’ AND meta_key = ‘featuretitle’ AND post_id != ‘0′ ORDER BY rand() LIMIT n
No featured posts were found.
Any help would be great/
Never mind my last post, I did not change “n” to a number.
But I would like to now how to add category to the featured posts
In response to one of the questions above:
Still being a Wordpress n00b I had a bit of difficulty getting my head around custom fields. A trap for the un-initiated is that the feature fields in the admin section do not stay populated with whatever values you have set. Rather they populate the respective custom-fields for the article further down the page. Managing featured articles once they are set are as simple as adding, deleting and modifying custom fields.
any idea on how to change the default image size? 10 by 100 is just too small for me. thanks
Thank u for the great plugin, and, if u can help me, i will be happy. (sorry about my english)
i copy your plugin to the correct folder and when i go to active i get this message “Plugin could not be activated because it triggered a fatal error.”
i’m using Canvas 1.2.1 and the theme is Kiwi Canvas Edition 2.0.
In my write page, already have a button something like “make this a feature”
but when i mark it and click on save, nothing happens, and the posts does not apear on the Featured Posts.
Do u know whats going on?
Paul, I have a quick question about the post order. I understand that by default it is set to randomize the posts displayed.
How would I lay out the code if I want as an example, The last 3 Featured Posts listed chronologically?
I have replaced the “random” with “false” and it still returned it in random order.
Thanks for the heads up.
hi, i have loaded up the plugin etc, but when I select the ‘Yes! Edit/update this post’s feature information’ but the info does not get saved and therefore does not show up on the sidebar
really dont understand the above answer
Does this work with the latest version of WP 2.3.1?
I get this error
WordPress database error: [You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'n' at line 1]
SELECT post_id FROM wpclients_postmeta LEFT OUTER JOIN wpclients_posts ON ID = post_id WHERE post_status != ‘draft’ AND meta_key = ‘featuretitle’ AND post_id != ‘0′ ORDER BY rand() LIMIT n
Thanks
Well, 3 days ago I set up my first ever blog using wordpress. Not knowing a thing about it, I now have a cool customised theme, fullly integrated adsense, featured posts and popular posts displayed. Many thanks for your article, this guide saved my life, no other guide lines to installing featured posts plugin actually worked. Thank you!
is there anyway to get the featured posts to be in two different columns?
download link not working