Featured articles gives the wordpress blog admin the possibility to display posts in a slick n cool way on the home page, just above the first post from the loop. It’s developed for Wordpress 2.7.1 with the help of MooTools 1.2, probably the best JavaScript framework around ( please don’t try to argue on this on the comments ).
From the available plugin options I’ll mention the possibility to display any number of posts you feel comfortable with, the order in which they will appear ( newest, oldest or random ) and thumbnail display. Since I remembered the thumbnail, some explaining on it. The thumbnail represents the first image encountered in each separate post. If none available, none displayed.
For further settings on display options, there’s the JavaScript class. The script itself resides inside the script folder of the plugin directory. For this you can set timings between slides, whether to show numbered paging or not, how the slides will slide ( left or top ) and other.
Installation
To install this plugin, download and extract it somewhere on your computer and upload the whole wp_featured_articles folder on your Wordpress blog plugin folder ( path_to_blog/wp_content/plugins/ ). After that, in your wp admin panel, go to Plugins and activate it. That’s all there is to it.
Configuring the plugin
If you want to change the default settings, go to your admin page and find Settings menu. In it, you should have a link called Featured Articles. It’s the link pointing to the plugin settings page. In this page, you can set the following:
- Set title for the section. The title will appear above the slides
- Display the title you set above ( maybe you change you mind, who knows )
- Truncate descriptions with thumbnail to a number of characters
- Truncate descriptions without thumbnail to a different number of characters; this setting will apply if you choose not to display thumbnails at all
- Number of articles to be displayed
- Display order ( newest, oldest or random )
- Display thumbnail if any is found
- Thumbnail max size – this setting works in conjunction with thumbnails you set using post’s custom fields ( more on this below )
- Unload MooTools framework – you have the option to make this script not to unload the MooTools framework needed for functioning. You would normally do this if there’s another plugin using mootools and it loads the framework before this one does.
- Display posts from categorie(s) – this setting allows you to display only posts from specific categories
- Display on – you can choose to display the plugin only on certain pages or category pages
Further more, there is an extra option available when you edit a post. For displaying images for featured articles, this plugin does one of the two things ( in the order below ):
1. it searches to see if a custom field named fa_image has been set OR
2. it searches an image into the post content
Second option is pretty straight forward. If there is an image inside your post, it will display that one. If more than one image is set inside your post content, the first one will be displayed.
For the first option, to make it simpler to set a custom field without having to type anything, when you edit a post, you should see an icon looking like this 
above the editor. If you click that icon, a modal window will open displaying all images you have in your Media Library and by simply clicking one of them, the custom field will be automatically set.
Regarding this option, in plugin’s settings page, you can set the thumbnail maximum size ( width and height ) for these custom field thumbnails for the slider to display.
Change behavior
Behavior is managed by JavaScript. To change, for example, the number of seconds to display a certain article before the next one comes or the entry point ( it can slide it from top or from left ), you need to edit a file.
To do that, simply open the file containing the script with an editor and change the values of the class instance located at the bottom of the file to the ones you need. Complete path to this file is: your_wp_blog_path/wp-content/plugins/wp_featured_articles/scripts/FeaturedArticles.js.
The class instance inside the JavaScript file is the one below:
142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 | window.addEvent('domready', function(){ new FeaturedArticles({ container: 'FA_featured_articles', slides: '.FA_article', slideDuration:5000, effectDuration:1000, fadeDist:600, fadePosition:'left', stopSlideOnClick: false, autoSlide: true, infoContainers: '.FA_info', visibleInfo: false, navigationHeight: 21, navigationNums: false }); }) |
As you can see there are a number of parameters that you can play with in here. Here’s a brief explanation for each one:
- container: this is the id of the div containing the slides with the articles content
- slides: CSS class for the slides ( add it as .someClass if you change the CSS class )
- slideDuration: timing between slides in milliseconds
- effectDuration: slide fade effect duration
- fadeDist: the top/left distance to which the slides will fade to. To have the slides only fade without moving, set this to 0
- fadePosition: this can be left or top
- stopSlideOnClick: when you click on the navigation links below the slides, you have the possibility to stop the auto slide feature
- autoSlide: on page load, the slides will auto slide or not according to this variabile
- infoContainers: inside each slide, there’s a div containing info about the post ( comments, permalink, date posted ). Pass the CSS class to this parameter so that it can create the effect
- visibleInfo: by default, the info inside infoContainers is set to invisible. When you put your mouse over the slide, the info appears. This parameter gives the possibility to display that info on page load so that the user can see it’s there
- navigationHeight: the navigation div below the slides gets added by JavaScript. Inside the stylesheet you have the possibility to style the div containing the links and you should give it a height. That height needs to be added as a parameter. Please note that this parameter does not control the height of the div containing the navigation links.
- navigationNums: navigation links can be displayed in a numeric fashion ( 1..2…6 ). If you don’t need that, set it to false.
It this interests you, here are the MooTools components used by this plugin:
MooTools Core
- Core – all
- Native – all
- Class – all
- Element – all
- Utilities – Selectors, DomReady
- Fx – Fx, Fx.CSS, Fx.Morph
Change appearance
Appearance is managed by CSS. To change the way the Featured Articles slider looks, you need to open with an editor the file located at: your_wp_blog_path/wp-content/plugins/wp_featured_articles/styles/stylesheet.css
In here, you’ll find a number of CSS declarations. I’ll try to detail a bit how to change the slider size.
On line 26 in stylesheet.css, is the #FA_featured_articles container. A bit lower, on line 35, the slides are styled. Basically, both the container ( #FA_featured_articles container ) and the slides should have the same size because of overflow:hidden set on #FA_featured_articles.
I really hope you enjoy this plugin. Let me know in the comments if there are any bugs left. Don’t forget, for JavaScript bugs to mention the browser you encountered the bug in and the browser version.
Updates
August 13th 2009 – new admin options
- new option that allows choosing the categories to display articles from ( thanks to Martin Granger for suggesting this )
- new option that allows plugin display in multiple pages and/or categories and front page. Remember to go to your wp admin->Settings->Featured articles and set these new options.
January 20th 2010 – custom fields thumbnail
- new option that allows for each post featured to set other image than the one in post by using custom fields. Key for custom field is fa_image. You can set this custom field in 2 ways:
- manual, by adding as value for the custom fields an image URL located remotely
- by setting a media gallery image. When editing a post that’s featured, you’ll notice a new icon ( ) above the editor. When you click this, it will open a page displaying all images from your media library and you can choose the image to use as custom field. Also, for this, in plugin setup page ( Settings->Featured Articles ) there’s the possibility to set the image size you want to use. WP will closely match the size and return the image. As a suggestion, upload the exact size you want to use and set the size to that one.
- new option to enable/disable MooTools framework script inclusion in head. This helps troubleshooting any script conflicts or in case another plugins adds the framework before this one.
March 17th 2010
- updated MooTools to version 1.2.4 and only the components needed by this plugin ( see above what MooTools libs get used by the script )
After updating the plugin, remember to go to wp-admin->Settings->Featured Articles and update your options.
Related posts
Was this useful? Show your support.
212 comments
Hi again:)
I used it in my site…but I have a problem with the carousel…I hope you can have a look http://www.arnavutkoyden.com/
You just need to style it. If you look inside the stylesheet at #FA_featured_articles .FA_article you’ll see it has a width set on it. Change that to your own value. In fact, change everything to what you want/need it to look like. All styles are external, inside the stylesheet.
thank you..but as I said my problem with carousel in my template…when I activated featured articles plugin the carousel doesn’t work : just shows 3 article…so I think there is a crash…any idea?
I see, you wanted to say that my plugin works but other doesn’t. Well, after looking to your page, it looks like you use jquery. They don’t quite mix very well. Try using the jQuery.noConflict( ). This should solve your problem.
I couldn’t use it :( but I’ll try again. I’ll write tomorrow … see you.
You only need to add into the head section of your blog the jQuery.noConflict();
That’s all there is to it. Here’s a tutorial: jQuery.noConflict()
Thanks so much, it’s perfect!
Only problem is that mootools is interferring with a jquery gallery I had on a couple pages. :( oh well, my friend is working on a different gallery that is more compatible.
Omgsh, it’s beautiful! http://www.handheldnow.info/
Thanks so much :)!
<script type=”text/javascript” src=”/scripts/jquery-latest.pack.js”>
<script type=”text/javascript” src=”/scripts/jcarousellite_1.0.1c4.js”>
jQuery.noConflict();
ı did in header.php.but same problem here.
Also ı have a problem with login to admin panel.When ı try to login to my wordpress admin there is a blank page …and when ı delete the plugin ı can login…
ı really thank you for your all effort for me and the plugin.
Oh, sorry, Must have double posted without thinking. I fixed the jquery gallery, so everything works now :).
Jordon how did you fix it?
Well.. I didn’t really fix the conflicts, I just separated them. Instead of having the jquery gallery on the page that the mootools was on, I separated them, so I didn’t include the jquery on all pages in the wordpress header, only select pages that didn’t have mootools on it, i.e. the front page.
Hey, thanks so much for the plugin, but Im having a bit of trouble calling to it.
could you give me the code that will pull it?
Thanks!
@ Erin
What exactly do you need? All the code is inside the plugin’s files. Please be a little more specific.
Is it possible to use this plugin multiple times in one installation of WordPress? Does it have to be run from index.php or can it be run from a template? I’m having difficulty getting the plugin to work in the way that I want it to, but I’m not sure I fully understand how it is activated.
Hi Mike,
This plugin displays only on index page above the articles listing. To set it up go to Setting->Featured articles in your WP admin area and put the values you want in there.
Great job ! congratulations…
But I have just 2 questions :
I tried to delete the add_action loop line in order to insert this one tag directly in my template :
Is that correct ? I’m not really sure ?
So just in case, your script doesn’t work server. At the beginning I thought that was a jquery conflict, so I fixed it….but nothing, no slide….is it possible that because my plugins calls 2 mootools library ?
Thx in advance….
Great job ! congratulations…
But I have just 2 questions :
I tried to delete the add_action loop line in order to insert this one tag directly in my template :
Sorry, the tag in php form didn’t sent to you in this message :
That was :
php if(function_exists(“wp_featured_articles”)) wp_featured_articles();
Is that correct ? I’m not really sure ?
Can you please point me to where you installed the plugin? I’m not really sure I understand what exactly you’re asking. The php tag should work but again, not really sure what you’re trying to do. Sorry for the delay, I’ve been kinda busy.
Is there a way of placing the features article scroller elsewhere? I am working on a site (www.truescale.co.uk) where the blog/posts page is called ‘news’, and I want the featured articles to appear on the ‘Homepage’ instead of in the news page.
Also,
How can I select a category for it to display?
Hi Martin,
q1: line 36 in wp_featured_articles.php ( if(!is_home() || $FA_displayed > 0) return ; ) controls where the plugin displays the slider ( !is_home() ). For placement on another page, please see Conditional Tags.
q2 similar to first answer, but you could try using if(!is_category(‘cat_id’) || $FA_displayed > 0 ) return; on the same line ( 36 in wp_featured_articles.php )
I really dont have great php skills!!
I have managed to get it to the correct page, but how can I have a specific page AND category? I just don’t know the syntax for having two items?
C’mon guys! A little help would be great!
As I say my PHP is zero, but I am trying. What I am trying to do is this, but it isn’t working:
function wp_featured_articles(){
global $FA_default, $FA_displayed;
if(!is_front_page() and (!is_category(’newscat’) > 0)) return ;
It still displays all articles.
Someone must be able to point me on this?!?
No bad guys here :) I’m helping. Try this:
if(!is_front_page() && !is_category(’some_category’) || $FA_displayed > 0) return ;
This should do it. Let me know.
Thanks for the help Constantin.
Still no joy with the code you suggested! The plugin still funtions fine, but all categorys are being displayed in it. Boo.
Any other ideas?
Cmon, behave, no BOO’s :)
Let me see if I get this right. You want the plugin to display on certain page and category, but also you want it to pick posts from the categories you suggest. Is this correct?
I want the plugin to display on my homepage (which incidentaly doesn’t have any posts as such, it is pretty much static) and I want it to only show posts that are in the category ‘newscat’ (newscat is the categorys slug).
You can see the site here: http://www.truescale.co.uk
I really want to get this working as it is such an awesome plugin.
All clear now, here’s what you have to do:
Line 36, the if thing, if you want it to display only on homepage, make it look like this:
if(!is_front_page() || $FA_displayed > 0) return ;
To select posts only from one category, on line 50 you find this:
$args = array(‘numberposts’ => $options['num_articles'],
‘orderby’=> $options['display_order'] == 3 ? ‘rand’:”,
‘order’=> $order);
Change this array to something like this:
$args = array(‘numberposts’ => $options['num_articles'],
‘orderby’=> $options['display_order'] == 3 ? ‘rand’:”,
‘order’=> $order,
‘category’=>DB id for the category you want to display posts from);
That should be it. I’ll try and extend the plugin so that you can select this directly from admin but meanwhile, this should work for what you need. Let me know. Oh, and thanks for the “awesome plugin” speech :)
You are THE MAN! :D works like a charm.
This would be a great feature for others if it was an option within the admin page.
If you had a ‘donate’ button I would ;)
Working on it right now. About the other problem, scroll the page up, before comments :) Thanks for your suggestion, it’s a great idea.
Cheers dude for all the help, and of course the awesome plugin!
Donation made :)
Thanks for the help. Check back later today, I will update the plugin and post the new files with your suggestion available directly from admin area. Have a great day man.