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.
As I said before, the plugin gives you some options to set up. Here’s the complete list of those options:
- Set title for the section. The title will appear above the slides
- Display title ( 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 )
- And finally, thumbnail display
To set the JavaScript, 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
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.
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.
141 comments
THANKS – Great Job! Works fine with WP 2.8!
The plugin works very well
Just what I was searching for, and easy to configure !
Many thanks
what if you want to directly insert the call into a theme? Meaning, I don’t fancy the default placement…how can one explicitly include it in the theme?
Currently that’s not possible. In a future update I’ll try to implement that too. Can’t say for sure when that update will come. Sorry for this.
About James’s comment: I’ve got this new theme that just won’t let the plugin show up. I’m talking about the Design Disease free tipz.com theme. I installed the plugin, but it just won’t appear anywhere. If i change the theme the plugin works. So there’s no possible way of fixing this?
Hi Ariel,
Sorry for leaving you like this for so long. I haven’t had the time to look at the issues regarding this plugin and the theme you mentioned. I’ll do my best to do that but can’t tell for sure when that will happen. Meanwhile, if you figure it out, please let us know so other people would be aware of this. Thanks.
Later edit
The plugin uses as hook wp’s loop_start. For some reason this doesn’t work with this theme but I managed to output the slider’s content by using the function directly in header.php. So try adding < ?php wp_featured_articles();?> in your header.php file and it should work. Please note that I haven’t tested this very well, so first test locally and see what happens.
Hello Constantin,
I really like your Scripts but am not using WP.
Is it possible, that you release the pure JS with a small example so I can use it on my pages and maybe create an extension for the WebCMS TYPOlight to use it there?
Thanx,
Felix
BTW: Happy X-mas
Happy Christmas to you too Felix
Yes, it’s possible, I’ll try to do that one of these days.
Later edit
Try this: WP Featured Articles js only
Hi Constantin,
thanx for that, great script.
So if you don’t mind, I would create an extension for TYPOlight. I’ll mention, where I got the script, so you get your credit.
Bye, Felix
No problem Felix, as long as you keep the credit info in js and mention the source, everything’s fine. I would really love to see the result when you’re done.
[...] article with all sources is here. Have fun. [...]
You said “Complete path to this file is: your_wp_blog_path/wp-content/plugins/wp_featured_articles/scripts/FeaturedArticles.js. ”
Now how will I get that path in the plugins directory.Do I need to create a new folder named wp_featured_articles/scripts or do I need to upload some thing else from somewhere.Can you make it a bit more clear to the new bies
Hi John,
After you install the plugin ( download the zip file, extract it and upload the folder wp_featured_articles to your blog plugin directory and activate the plugin ), you can set 2 things:
1. In wp-admin->Settings->Featured Articles you can set a number of options
2. If you want to change the way the JavaScript works, there are a number of parameters you can set. This file is located in wp_featured_artiles/script/FeaturedArticles.js. If you open this file, at the bottom you’ll notice the class instance. Change any parameters you need, hit save and see the changes.
So to answer your question: no, there’s no need to create any new folder or anything. Everything is inside the plugin archive that you can download above. The path to your plugins directory is wp-content/plugins. For more info on installing wp plugins, see this: Managing Plugins.
Hi,
very intersting plugin BUT i want to ask you:
you said
“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”.
So i can use it in my static front page to show featured posts/ articles?
Many thanks and compliments for the plugin
Hi Carlo,
Yes, it’s possible to use it that way. Actually, there are other options too. You can display it on pages and categories of your choice too. Try it and let me know if everything is OK.
Hi Constanti,
i’m gonna to try.
So I installed the plugin and now it is installed on my front page.
I have to ask you two things:
1st: to change featured post dimension i have to check the div to set in CSS of plugin?
2nd: in 4th featured posts listed you can see see that also the [caption setting] of image published in the post is written on featured post.
Does the plugin help in google ranking of site?
best regards
1. any CSS modification can be made directly in CSS file ( it’s inside the plugin directory ) so yes, you’re correct.
2. about the captions code, try this:
– open wp_featured_articles.php
– go to line 172 ( this one: $string = strip_tags($string); )
– after line 172, add the following code: $string = preg_replace( ‘|\[(.+?)\](.+?\[/\\1\])?|s’, ”, $string );
– save changes and see if it works
About plugin helping in Google ranking, I don’t think so but it helps your users see the latest news on your blog.
I love this plugin but I switched templates and it no longer works. Can you tell me where it is the templatre should be calling mootools from?
Thank you
I don’t think I really understand the question but here goes. MooTools files, including FeaturedArticles.js are located inside the plugin folder ( wp_featured_articles ). To check if the files get included in head, search for the plugin folder. If you still have trouble using the plugin please give me more details regarding this.
Hi Constantine,
adding the php code:
$string = preg_replace( ‘|\[(.+?)\](.+?\[/\\1\])?|s’, ”, $string );
after line 172
next error occurs
Parse error: syntax error, unexpected ‘[‘ in /home/web/www.ilbigliettaio.it/www/wp-content/plugins/wp_featured_articles/wp_featured_articles.php on line 173
Paste the code into your page and after you do that, replace all quotes by hand with single quotes and everything should be fine.
Hi Constantine and thanks for your patience,
do you want to mean:
to replace whole quote inside wp_featured_articles.php with single quotes
OR
to replacer quote inside single code do you suggested me with single quotes?
thanks
Just in the code I suggested. What inside the plugin works just fine.
Hi Costantin,
i find others next faults:
some slide are faster than others (?);
in some slide the FA_info bar stays over the article (?)
i tryied to customizee CSS:
#FA_featured_articles: { height:325px
#FA_featured_articles .FA_article .image_container {height:325px
BUT
How to pull down the FA_info bar?
and how to set FA_info bar width?
many thanks
BUT
how to pull down the FA_info bar ???
and how to set FA_info width ?
Put height 325px on :
1. #FA_featured_articles
2. #FA_featured_articles .FA_article
This will “pull down” FA_info bar.
Now, to set the width on info bar, change width on:
1. #FA_featured_articles .FA_article .FA_info
2. .FA_info .written, .FA_info .comments, .FA_info .readon ( this one is optional if you want the inner links to cover the whole width )
Hope this makes sense. Let me know.
Hi Constantine,
and thankyou :
i could pull down the info bar.
About info bar width it could be interesting understand how to determinate its lenght: i.e.
thumbanail width+ etc etc
anyway even i could not setting info bar width ( i add to 300px -thumbnail width) there is no problem.
Yours plugin in look fine!
You are a great preson “Emperor Constantine ”
best regards
(ps anyway IF you think we can trying anymore to setting the info bar width you are welcome !)
Hi Constantine,
i tryied to add the following code after 172 line in wp_featured_articles.php
$string = preg_replace( ‘|\[(.+?)\](.+?\[/\\1\])?|s’,’, $string );
and an next error occurs:
Parse error: syntax error, unexpected ‘[‘ in /home/web/www.ilbigliettaio.it/www/wp-content/plugins/wp_featured_articles/wp_featured_articles.php on line 173
and i tryied also with other different quote setting but nothing happened.
many thanks ans sorry for trouble
Hello
Plugin works well. Though, I’d like to place the box exactly where I want.
I’ve been looking at the Wordpress loops and so on, but I cannot find the code.
Isn’t there somewhere a given PHP instruction that your extension inserts in the main files (index.php etc) and that i could copy/paste at will ?
Inside wp_featured_artiles.php, all hooks are defined between lines 415-419. The one adding the slider is this one:
add_action(‘loop_start’, ‘wp_featured_articles’,1);
To display the slider in your theme, try calling the function wp_featured_articles(). It’s not fully tested but try it and see what happens.
Hi there, I’m using this mootools library as a standalone version (without WP), but there’s a problem which I cannot solve. It works perfectly with mootools 1.2, but is it possible to make it work with 1.1 version? I am also using some other mootools libraries that are incompatible with mootools 1.2 version, so I’m forced to stick with 1.1. I would really appreciate if the author could make this script mootools 1.1 compatible, providing it’s not a big job to do.
Other than that, very neat and useful script!
It’s a bit painful to do what you ask. I’ll give it a try, see what happens but I can’t promise anything.Here you go: MooTools 1.1 WP Featured Articles script
Thank you very much for your time! The modification works perfectly with Firefox, Chrome, Opera and Safari. In Internet Explorer 8 the numbered buttons do not respond (pressing them doesn’t change the slides), but I’ll figure this on my own. Again, thanks!
I am trying to add this on my custom wordpress theme. It breaks my theme. But i managed to resize the frame using css. Now i can’t find a way to resize post information bar.Can you please tell me about How can i resize css or the script to fit 575 px width? And can i call the plugin to different location on my theme? Thanks..
To resize the whole thing youneed to set different width in stylesheet for:
#FA_featured_articles ( line 26 in stylesheet.css )
#FA_featured_articles .FA_article ( line 35 )
#FA_featured_articles .FA_article .FA_info ( line 70 )
About calling the plugin in a different location, you can try adding < ?php wp_featured_articles();?> in your theme where you want to display the plugin.
Works nice, exactly what I was looking for.
Thank you, But how can I change the width of it, as it seems to cutting some text on the right
Just found it in comments on how to change the width, now adjusted.
Thank you
Hi,
I have installed the plugin and activated it fine, Does it come up on the home page by default ? I have set it to display on the home page in the settings but I cant see anything at all. Do I need to install some script or call a script page in the header file ?
I know this will sound stupid ! I should know this right !!!
Thanks
John
Hi John,
Looks like the plugin doesn’t display anything. Can’t say why is that happening, might be from your theme. Yes, it should come on your home page by default, nothing else except what you downloaded is needed.
If you put it on another page other than home, does it display?
Leave a comment