WordPress 2.7.1+ featured articles plugin

WordPress 2.7.1+ featured articles plugin

Tuesday, June 2nd, 2009 in Mootools, Wordpress

Featured articles - WP and MooTools plugin 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 WP Featured Articles - Add custom image 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:

  1. manual, by adding as value for the custom fields an image URL located remotely
  2. 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.

Was this useful? Show your support.

digg WordPress 2.7.1+ featured articles plugin

212 comments

  1. Jimmy says:

    Dear Constantin,

    It is a brilliant plugin but i am a complete novice with CSS. I am using Today’s News theme on WordPress latest version.

    If you see the home page, the text and images are not shown properly as i am unable to locate the exact location where to change the width and height. Reading the previous posts i tried doing some changes but it has worsened it.

    The height and width of the space is 475px width and 280px height. Within that much dimension i want to display the slideshow. Please help me with his if you can. I would be grateful.

    Regards,

    Jimmy

  2. Jimmy says:

    I just commented you sometime back with the CSS layout problem. Somehow with lots of trials and errors i have overcome that problem. But now i see some major issues as follows:

    1.) When i go to other pages apart from home page weirdly the feature articles slider comes in one of my sidebar which you can see. I have tried deactivating the slider settings for Category and Pages through FA settings page but no use.

    2.) Slider works well on Chrome and Safari. But on IE and Firefox the Slider does not move and the navigation buttons are also not visible in IE and Firefox.

    Please help me with these issues ASAP Constantin.

    Regards,

    Jimmy

    • Hi Jimmy,

      ASAP is a big request right now. Already have 2 clients consuming all my time and I kinda forgot how sleeping looks like.

      Now, from what I see, you already use MooTools with a different plugin that calls it before WP Featured Articles does so try going to admin and disable mootools inclusion. That’s the main problem from what I see. If you test the page using Firebug, you’ll notice an error issued because of this.

      Second, styling the plugin. Open the plugin wordpress with an editor. On line 35, you’ll see this: #FA_featured_articles .FA_article{ A little lower, on line 41, you have this: width:450px; Change 450 to the size you need to have in there and see what happens.

      Now, about slider appearing in sidebar, that happens because you have a loop there and WP Featured Articles uses as hook the loop. You can manually add the slider to only himepage for example by editing the template file and adding

      < ?php if(function_exists('wp_featured_articles')) wp_featured_articles();?>

      inside your page where you want it to display. Remember only to completely remove it from admin in all categories, pages and stuff like that.

      • Jimmy says:

        Dear Constantin,

        as for the sidebar issue, it was already removed from all the pages and categories in admin. I also added the code to my index.php page where i want slider only on my home page but still i see the slider on my sidebar. I dont know why is this happening. In slider admin if i uncheck display in front page then its all normal but slider disappears from front page. Dont know what to do. Please help!!!

        Regards,

        Jimmy

        • Have you tried using the settings from wp-admin->Settings->Featured articles? From there you should be able to force the slider to appear only on certain pages/categories.

  3. Jen says:

    THANK YOU SO MUCH for slimming this plugin down – my site is loading so much faster now! Yours was already one of the faster-loading plugins of this type, but now it completely leaves all the others in the dust.

  4. Davide says:

    How to exclude caption from exerpt (etc. http://www.davidemuci.it)?

    • On line 171, inside function truncate_text, after this line ( $string = strip_tags($string); ) add this one:

      $string = preg_replace( ‘|\[(.+?)\](.+?\[/\\1\])?|s’, ”, $string );

      Let me know if it works.

  5. yasamphani says:

    awesome…!!!

  6. Anonymous says:

    This looks great! 2 questions though:
    1) Can it be made to display pages instead of posts? Some sites make heavy use of pages vs posts (including mine)
    2) Is there a way to completely disable the information from showing when the mouse hovers over the slider?

    • Glad you like it. Unfortunately, none of the 2 are possible without messing with the code. But they both seem to be good ideas so I’ll do an update to the script to include your suggestions. I’ll probably be done with it sometime next week, hope it’s OK.

      • Anonymous says:

        That would be excellent! Does the plugin currently work from within widgets? I’d check now, but am not at a computer where I can do that now and won’t be for a little while.

        thanks very much – this is a great piece of work.

  7. [...] (affiliate link) which I’ve customized to meet my needs. I added a customized version of the WP Featured Articles Slider to the front page to highlight previous [...]

  8. sebastian says:

    Hello there!
    Firstly want to say, thanks for your work Constantin :)
    I just wanted you tu ask if this plugin works with WP 3.0? I have read all comments, i had use all of instructions but plugin don’t appear unluckly.

    When i try to access wp_feature_articles.php directly i get an error:
    Call to undefined function add_action() on line 414

    that means WP don’t recognize functions:

    add_action(‘admin_menu’, ‘FA_plugin_menu’);
    add_action(‘wp_print_scripts’, ‘FA_add_scripts’);
    add_action(‘wp_print_styles’,'FA_add_styles’);
    add_action(‘loop_start’, ‘wp_featured_articles’,1);
    add_action(‘media_buttons’, ‘FA_add_meta’, 20);

    I tried to comment it, but after that the errors don’t appear and featured articles box also :(

    i guess something has change in WP 3.0, will you make any fixes to make this briliant script works in WP 3.0? ;)

  9. sebastian says:

    forgot to add, address of a website is:
    http://lubik.info/

    actually plugin is switched on.
    in index.php i have:

    and i have fixed line 172 in wp_feature_articles.php :)

    • Can’t say what’s going on. About the plugin working for WP 3.0+, it does. On the first page as you can see I run it and works ( I’m running a 3+ version of WP ). If you could wait for just a few more days, I will launch an updated version of this plugin with some new stuff in it, cleaner code and the possibility to create your own themes for it with some minimal CSS and HTML knowledge.

  10. sebastian says:

    That’s a great news! I will wait impatient ;)

    greetings

    • I really hope I’ll get it ready by this Sunday. Code is 99% ready, I’m just waiting for some themes for it from designer to give the possibility of using one of those or create your own theme for it. Thanks for your patience and I guarantee it will worth the wait.

  11. all1nfo says:

    hi there..
    do you have any info or demo pages for this plugin?
    Im worried my self to try this plugin on my live website
    thx fyi

  12. Jay says:

    Hey there! Great plugin!! is there anyway to get bbcode to work with the plugin?

  13. VM says:

    Hi Constantin
    I’m completely dumb when it comes to code, I can only tell I have installed the plugin and it shows in my homepage but for some reason I cannot navigate between articles within the plugin or get the thumbnails in there. My programmer boyfriend who is a Drupal freak is not helping (argh!) so I’m coming to you! I get two errors, the first when the page loads, the second when I try to navigate the featured articles:
    - Error: uncaught exception: [Exception… “Component returned failure code: 0×80004001 (NS_ERROR_NOT_IMPLEMENTED) [nsIDOM3Document.domConfig]” nsresult: “0×80004001 (NS_ERROR_NOT_IMPLEMENTED)” location: “JS frame :: http://quecomen.com/wp-content/plugins/featured-articles-lite/scripts/mootools-1.2.4-core-yc.js?ver=1.2.4 :: anonymous :: line 55″ data: no]
    - Error: Element.Storage is undefined
    Archivo Fuente: http://quecomen.com/wp-includes/js/prototype.js?ver=1.6.1
    Línea: 3107
    I would appreciate the help!

    • The problem is that one of your plugins or your theme also uses prototype.js. MooTools and Prototype are highly conflicting, there’s nothing you can do about it except removing either the MooTools based plugins or the Prototype based ones. Very sorry about this, there’s nothing else I can do about this problem.
      About asking for help, whenever you download something from here and don’t understand/know something, just leave a comment and help will be on the way.

  14. Carlo says:

    Hi Constantin,
    why adding Simple Facebook Connect (*) ( just i like button) your plugin was moved upper the header.:-(((

    (*) http://wordpress.org/extend/plugins/simple-facebook-connect/

  15. Carlo says:

    Hi Constantine,
    i disable your plug.
    but here you can see the code of my front page, the only page where your plugin was set to be displayed, when your plug in was on:
    http://tinyurl.com/4kvn9oy.

  16. Ash Quadir says:

    I have the following Issues with v2.2 of Featured Article Lite

    1. Even though I had selected the Slider to appear on the home page, it did not show p until I manually enter the code to place it in the Main Index template index.php

    2. I have my slider set to 1000 x 325 (WxH); my pictures are not resized. Only part of the image shows up.

    3. I clicked on Show Author Link in the settings; but his is not showing up in the slider.

    4. I have a two column home page. When the slider appears – although it does not extend into the right widget side bars – no widgets appear in that space.

    5. In a post, if I want to change the featured image, I have to manually delete the featured picture; before the replacement is inserted. It would have been nice that when you choose another picture, the old featured image is replaced.

    6. Will there be any future version where you can feature a couple of articles with text across the top of a page – at the same time?

    Thanks!

  17. FA Lite 2.2 is a beautiful plugin. I am using a child theme of Thematic. When I display the slider on a category page it works fine, but when it displays on a page it appears inside the . Any suggestions or tips greatly appreciated. Thanks!

  18. George says:

    Hi, how can i add this plugin to another page (custom home) insted of the default of wordpress?

  19. Louis says:

    Hey, awesome plugin. I had a quick question. Is it possible to customize this to work with “categories”?

  20. Claire says:

    Hi Constantin,

    I’d be grateful for your help please. I found your plugin and I want to know if it’s compatible with my theme (DynaBlue). I’ve installed it here: http://www.beauty-secrets.co.uk but I just can’t seem to get it to work. Please can you help?

    Thanks

    Claire

    • Hi Claire,

      In Settings for FA Lite you have the option to completely drop the MooTools js framework file. After a quick scan in your page, I noticed that the file doesn’t get included anywhere. Go to admin and make sure you uncheck the option Unload MooTools framework. Let me know if this works.

  21. Sydney says:

    I would like some help the plugin for displaying featured articles is showing a static image rather sliding the articles. This only happens with IE.

    • The error is not specific to Featured Articles. In your page jquery gets loaded twice, once on line 48 and another time on line 518. Check that the plugin or the theme that is loading the script on line 48 is using wp_enqueue_script().