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:

 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.

Demo: http://www.php-help.ro/
Download: http://www.php-help.ro/downloads/Featured+articles+-+Wordpress+2.7.1+plugin
Source: http://www.php-help.ro/mootools-12-javascript-examples/wordpress-271-featured-articles-plugin/

Related Listings:

1. Table Gear – Moo Tools Plugin TableGear is a software package for working with data on...
2. ElementFilter – Moo Tools Plugin My new MooTools plugin, ElementFilter, provides a great way for...
3. Sliding Tabs using Moo Tools Plugin The script relies on width and height of tabs and...
4. AnythingSlider jQuery Plugin Here on CSS-Tricks, I’ve created a number of different sliders....
5. Pamoorama – Image Moo tools plugin Pamoorama is a simple script that aims at spicing up...

Do you like this post?

Email: