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.
184 comments
In the imortal words of Columbo “just one lore thing”
Whilst you are working on the plugin…………
Is there a way of resizing the image that it grabs from the post? As you will have seen if you visited the site I am working on, my implementation of the plugin is in a pretty small space. It would be good if the plugin could resize the image to say 50px x 50px?!?
Well, not quite resize but there is something that you could do. First, open the stylesheet located in styles/stylesheet.css. On line 49 there’s the style declaration for the image container. Change the width/height to your own values ( lines 53 and 54 ).
After you do that, open the plugin file and on line 71 ( might not be exactly this line, I’m working on this file right now but try a search ) change this:
<div class=”image_container” style=”background-image:url(<?php echo $image;?>);”></div>
to this
<div class=”image_container”><img src=”<?php echo $image?>” width=”you_width” height=”your_height” /></div>
It’’s not the best solution ever, but it solves your problem. Let me know.
I have tried the solution that you just gave, but adding height and width to that div seems to make no difference.
You have to make changes to wp_featured_articles.php too. From my previous comment:
After you do that, open the plugin file and on line 71 ( might not be exactly this line, I’m working on this file right now but try a search ) change this:
<div class=”image_container” style=”background-image:url(<?php echo $image;?>);”></div>
to this
<div class=”image_container”><img src=”<?php echo $image?>” width=”you_width” height=”your_height” /></div>
Sorry – I didn’t explain myself well! I did exactly as you said by changing the css and altering the ‘wp_featured_articles.php’ file.
Using css I can reduce the size of the image (although cropped). adding the height & width to the image_container div just doesn’t seem to do anything.
Like you, I would expect the addition of height / width here to resize the image?!?
Code looks as so:
<div class=”image_container” style=”background-image:url()” width=”50″ height=”50″>
Sorry – didn’t past well in last post!
my code is as so:
<div class=”image_container” style=”background-image:url()” width=”50″ height=”50″>
OK. Let’s do it again. Currently, the image is displayed as background image for div.image_container. You’ll have to pull it out from background. To do that, change the line you pasted above with this one:
<div class=”image_container”><img src=”<?php echo $image?>” width=”your_width” height=”your_height” /></div>
As you can see, there’s the div and the image, instead of being displayed as background, is displayed inside the div using the img tag. This way, you can tell it to have the width and height you want it to have.
Once again, You the MAN! That works great. I was actually very nearly there myself. You pipped me to it though.
Now I feel stupid – just read your previouse post on the image resize problem where you explained it perfectly. Sometimes I am in too much of a rush to get things done!
Don’t worry, we’re all the same
By the way, check back in an hour or so. Almost done with the updates 
Added display from category ( multiple categories available ) and display in pages/categories of your choice. Doing the last checks and solving bugs now.
All done Martin. Updated the files, announced the updates. Go get it! Remember to clear cache before downloading. Again, thanks for your suggestion. Remember to do the whole resize thing again. Sorry for this.
Great update dude! Installed and all seems to be working fine. I just had to make a few minor tweeks to get it back to how I had it.
I Really like that the options that you have in the admin section now.
This plugin is top of my list for future projects.
Again – many thanks for the help today!
[...] Wordpress 2.7.1 Featured Article Plugin [...]
[...] Continued here: Wordpress 2.7.1 featured articles plugin [...]
[...] Wordpress 2.7.1 Featured Article Plugin [...]
[...] Wordpress 2.7.1 featured articles plugin – [...]
thanks for this script
Hello,
I tried to download the script, but i really don’t know how to use it.
If I open wp_featured_articles.php i get the next error:
Fatal error: Call to undefined function add_action() in c:\wamp\www\wp_featured_articles.php on line 370
Could anyone help please?
This script is a WordPress plugin. To make it work you need to install it on a WP blog, it won’t work by itself.
Kalema comment #20 brought up the same problem I am having when he said
[caption id="attachment_364" align="alignleft" width="150" caption="Tapuda koşturmacaya çare"][/caption] is showing up in the content pane.
I read through your code and see how you are filtering out the image information so that the image code does not show up in the short text window pane.
What I can’t figure out is how to also filter out [caption id.....] as well.
Here is how I end up with the [caption id] part in wordpress.
1. I use the image uploader when writing a post or page to upload my image
2. on the image editor, I give the image a description
– this adds a border around the picture so that there is room to place the caption below the image when it is inserted into the post, thus resulting in the [caption] code wrapped around the image tag.
I would really appreciate it if you could possibly add in the strip code to remove the captions from the uploaded images. In the meantime I will keep trying it myself and if I have any luck at all I will post the fix here.
Another note:
For the longest time I could not get the featured articles plugin to actually function on my website. At first I thought it was a conflict with other plugins using mootools and jquery, so I removed all plugins.
At that point your plugin would not work at all…. virgin wp install with no plugins.
so, one at a time I re enabled the plugins one at a time.
Here is the REALLY weird part:
When I turned the ’sexy bookmarks’ plugin back on — it uses jquery– all of the sudden your plugin started functioning perfectly.
Now that makes absolutely no sense to me, but in my case it worked.
What I can’t figure out:
I have another plugin ’superslider login’ from
http://wp-superslider.com/downloadsuperslider/superslider-login-download
When I enable that plugin as well, so now I have 3 active plugins, yours, the sexybookmarks using jquery, and the superslider login plugin…. then your plugin stops working.
So I looked at the header and the superslider plugin is using mootools-1.2.3-core-yc.js
while your plugin is using mootools-1.2-core.js
I thought that the two were not compatible, so I changed your code to use the 1.2.3 from superslider.. well that did not work at all….
now I am totally out of ideas and could use some advice.
thanks
Hi Shawn,
Will try to do the updates for caption but for the moment I really don’t have the time.
About the second problem, different plugins might use different moo versions. This one uses moo 1.2.
Also, if another plugin uses moo, you should disable moo inclusion and let only one script include. I’ll add this option in a future update so that moo framework inclusion can be disabled for troubleshooting. Thanks for pointing this issue.
@Constantin
Thank you for looking into this. I’ve been working on trying to figure out how to strip out the captions for a few hours now with no luck, but at least I am learning some new stuff, so it’s not a total loss. This seems like something that should be pretty easy to do, so I will keep trying my best and post it if I can find a solution.
As to my other plugins that use moo
I can’t disable them because they are shown on every page so the framework is required. I did go into your code and try to change it to 1.2.3 but that did not work. Obviously there is more involved there than meets the eye. Sure would love to learn what it is, so I can troubleshoot better in the future.
My best guess so far is that your plugin would need to be updated somehow to use the newest vs. of moo.
If you do update your plugin, could you post instructions for us on how you did it, so that when moo is updated in the future we can update ourselves without having to ask for help?
As to why your plugin only works when I enable the ’sexy comments’ plugin that uses jquery… well that one has me totally stumped. I’ll read up on moo/jquery more this evening to see what may cause this.
does this work with wordpress 2.8.* ?
Thanks
Yes, it does.
Hi, I was wondering if you could offer some support. I am running into a compatibility problem rendering the plugin unworkable across browsers except firefox and some sketchy IE issues.
The site is not currently public so I am unable to post the link here.
Thanks
What exactly is happening? Any errors ( post firebug errors, not IE if any )? Do you use jquery powered plugins along with wp-featured? It would really help if you had anything online.
I have managed to remove most of the errors. There was a jquery conflict that made prototype go haywire.
Still can get it to go in chrome or safari??
Can I send you the link? I just can’t publish the URL yet
BTW… this is top notch coding.. im learning alot.
Contact me using the contact form. Leave a valid e-mail to get back to you.
Hi: Can this be used for multiple instances on a site? To have more than one gallery with different pictures per page?
Thank you
If you download the plugin and only take the JavaScript file, yes, you can use it multiple times on a single web page. It will only require some CSS and js-MooTools knowledge to implement it.
How do you insert it in the WP theme? I’ve carefully read the descriptions but i can’t figure out how to actually put it into the wordpress theme. I may be the most stupid man on earth but i simply can’t figure out HOW TO include it in the theme….
I saw others have the same problem… Constantin, please help me on this…
Multumesc,
Ciprian
Salut
You simply install the plugin, after that go in wp-admin to Settings->Featured articles, set everything how you like it and that’s it. The whole thing can’t be included directly in theme, it will appear on your home page before the loop starts. That should be it. If you have an online address to let me see what the actual problem is, it will help.
[...] Tutorial Posted in ajax | Tags: featured article, mootools, plugin, wordpress « ExtJS [...]
hey after i instal this plugin, what should i do? nothing change with my site
It should work. To set things up with it go to wp-admin->Settings->Featured articles. Can you post the link where your blog is?
i’m try it in localhost when i’m redesign my new wordpress theme, i use CMK mode for my wordpress
Leave a comment