WordPress featured content plugin

WordPress featured content plugin

Tuesday, September 21st, 2010 in Mootools, Wordpress

Featured content WordPress plugin Featured Articles Lite for WordPress is a powerful plugin that enables a very easy and intuitive setup for a JavaScript slider that will display and rotate posts or pages.
Having plenty of options that can be set directly from WordPress admin, it allows an imaginative use to suit the style of the blog displaying it.

Except the admin parameters and default themes that come with it by default, it can be customized even more by creating new themes to suit the general look requiring only some medium knowledge of HTML and CSS.

Starting with version 2.3 (compatible with WordPress 3.1+), all JavaScript for the slider is written in jQuery; this prevents any conflicts between various JavaScript frameworks you might be running on your WordPress blog. Other improvements are multiple sliders creation and management, widget support to easily display any slider into your widget areas, clear manual implementation code that you can put into the theme files to display any slider anywhere you want it to.

Bottom line, from start to finish, it will take only minutes to display articles into the slider and to choose where to have it shown in your blog.

Features

- SEO friendly
- Autoslide – Set the slider to animate at any interval when your visitors come to your website.
- Animation direction – Make it yours! Choose between slides coming from top or from left to mimic a vertical or horizontal slider.
- Themes – Default themes available; easy implementation for new themes, guide below (see How to create a theme)
- Options – various options available, from thumbnail display to categories to gather articles from and JavaScript settings, all available from WordPress admin (see Settings below).
- Navigation – Make a choice between forward-backwards navigation and individual navigation or use both with only 2 clicks. Also, mouse wheel navigation available.

Installation

This part is pretty straight forward and it has only 3 simple steps:

1. Download the plugin
2. Copy/upload the wp_featured_articles folder into your WordPress plugin directory
3. Go to WP admin and enable the plugin. If you set the plugin to display from wp-admin, it will display above the loop set in settings. To manually place the plugin, see next step.
4. To manually place the slider into your theme files, use following code <?php FA_display_slider() ;?>

This is it. Now you need to make it yours. Check settings below.

Upgrade

In case you’re upgrading the plugin, after performing the upgrade, go to wp-admin->Settings->Featured Articles and check the settings. Most probably you will need to specify a text for the read more link but just to make sure, check the other settings too.

Settings

To set up your Featured Articles plugin, go to WP admin->Settings->Featured articles. There are 4 main areas that can be set:

1. Featured articles Settings: this is where general display for articles is set. Available options are:
- Section title setup and display (under Section title). Title will be displayed above the slider; once a title is chosen, there’s the possibility to make it visible or not.

- Display on loop setting allows for automatic displayed slider to choose on top of what loop to display the slider. This is useful if for example, you want to display the slider above main content (center page) but on the left sidebar you have another loop displaying for example your latest posts. In this case, the slider will display inside the sidebar, above the latest posts. Since you need it center, increase the value ( +1 ) for Display on loop until the slider displays above the correct loop.

- Descriptions setup offers the possibility to truncate post/page description to a certain number of characters. This option is available for both posts/pages that have an image and for those that don’t ( set descriptions for posts without image a little longer to cover the whole area )

- Number of articles to be displayed. This is pretty clear, enter a number and the slider will display as many articles as you entered here

- Display order has 3 options: newest posts/pages, most commented and featured content. For featured content to be displayed, navigate to post/page editing page in WP admin and set under Custom Fields a field named FA_featured having value 1. Starting with the latest update, to set up custom featured articles simply navigate to post edit page in wp-admin and into the right sidebar look for “Featured Articles Lite” panel and check the “Set this post as featured…” option. The slider will then display only the content that has this field set; this will enable more control over the content displayed.

- Thumbnail size can also be set as maximum values. If an image is bigger than the values entered here it will be automatically and proportionally resized to fit the width/height entered here

- Thumbnail display can also be controlled.

- Unload Mootools framework; this option is for troubleshooting purposes. Since MooTools cannot be loaded from within WordPress, this plugin comes with the latest version (1.2.4). Given the possibility that your blog may run other MooTools based plugins you might need to stop this plugin from loading MooTools since this will cause errors.

2. Content Settings: under this section you can choose what to load into the slider and where. Available options are:
- Display pages OR posts. Make a choice between displaying pages or posts into the slider. Once that done, according to what your preference, a list of categories (for posts display) or pages will appear so you can choose from what categories to display posts or what pages you want to display into the slider.

- Read more link text allows you to specify your own text. Useful if you don’t want it to say read more.

- Article title is clickable, when enabled, will make the article title inside the slider to act as a link to full post ( like read more ).

- Display slider only on certain categories, pages or home page. This will control where the slider will be visible.

- Navigation control can be set from the last 2 options of this section. You can choose to either display bottom navigation or left-right navigation or use both. It all depends on what you need to achieve.

3. JavaScript Settings: this section groups all available options for the slider.

- Effect duration: under this option you must specify (in seconds) the transition effect duration between slides.

- Fade distance: slides can enter from left or from right (see parameter below) or you can use a simple fade-out fade-in effect without any sliding by simply entering 0 under this option.

- As mentioned above, slides can enter from either left or top when navigating the slider. This is pretty straight forward; choose between either left or top. If previous option (fade distance) is 0, this setting will have no effect.

- Navigation click stops auto sliding: when autoslide is set on and user clicks to go to a certain slide, if this option is on autoslide will permanently stop and all navigation will become manually triggered.

- By default the slider allows mouse wheel navigation between slides. To disable this feature, uncheck the option for Enable mouse wheel navigation.

- Autoslide: under this option you can set autoslide on at a given interval (in seconds).

4. Theme Settings: this is where you choose your slider theme. By default the plugin comes with 3 themes: Dark, Light and Title navigation. Other themes can be easily developed by following the steps under How to create your own theme.

Available themes

There are 3 themes available by default: Light, Dark and Titles navigation. Themes can be changed at any time; all themes are located inside the plugin’s folder under themes.

Light skin Light skin
Dark skin Dark skin
Left side navigation Left side navigation

As mentioned before, custom themes can be created to display any other information necessary. See below a quick start guide.

How to create your own theme

More detailed instructions about creating new themes can be found here: How to create themes for Featured Articles Lite

Additional themes

This plugin started with a default set of 3 themes: Light, Dark and Title Navigation. Below you will find a list of additional themes developed for this plugin and what special settings you need to set for them.

1. Theme “Smoke”

Wordpress plugin Featured Articles Lite theme SmokeThis theme displays the slider having the thumbnail image set as a full background. In order for everything to display correctly the Featured Posts ( under Display order in slider administration panel ) is preferred to be set. Next, take a look at thumbnail and slider size settings and set both to have the same size.

Once the steps above are completed, to select the posts or pages that will display into the slider, go to page/post editing and look into right sidebar for the plugin panel ( named Featured Articles Lite ). Set the checkbox for featured post, choose a large enough image by clicking “Set custom image for this post” and hit save. Do this for all featured posts/pages you want to display into the slider, place the slider into your pages by either manual setting or automatic and that’s it. By setting the custom image you allow the plugin to ask WordPress for the right sized image depending on what size you have for the slider thumbnail.

Updates

May 25th 2011 – version 2.3 is available
Make sure first that you run at least WordPress 3.1. Also, first backup the whole plugin folder and after that, disable the plugin and delete it from your blog.

- The slider script developed with jQuery now (no more MooTools). This solves all conflicts with other JavaScript frameworks running on your blog.
- Multiple sliders can be defined and placed automatically or manually.
- Widget support provided allowing to choose the slider you want displayed as widget.
- Easy manual placement by providing the code needed to be inserted in your theme files.
- Themes got modified a little to suit the new functionality. Changes needed to be made to any custom themes you have are:
1. Open your display.php file from your custom slider theme and look for the first div in page (class=”FA_overall_container”). Add one more class to it: FA_slider (will look something like this: class=”FA_overall_container_dark FA_slider”). After you done this, change class FA_overall_container to FA_overall_container_YOUR_UNIQUE_PHRASE (this can be the folder name of your theme).
2. Same div element, add id to it. Ids come from the plugin core so you need to add as ID a variable like this: id=”
3. Open your theme stylesheet and make all CSS rules descend from the main parent (the class name you set on step 1 for FA_overall_container). For example, let’s say you have a theme called my_theme. The overall container class would be FA_overall_container_my_theme. In stylesheet, make .FA_article {css here} into .FA_overall_container_my_theme .FA_article {css here}.

If you have trouble updating your custom themes, ask questions in comments (provide demo links for your themes also).

February 11th 2011 – version 2.2 is out
Please remember to backup your theme folder if you made any custom themes for the slider.

- Option to always load stylesheets in header. This is especially useful is you plan on using manually placed sliders. The basic way the plugin works with manually placed sliders is that it loads all theme styles in footer. Due to page loading time, this may cause the slider display to appear broken for a few seconds until the stylesheet in footer loads. To prevent that, in wp Admin->Fa Lite->FA Settings check the option Always load styles in header. This will cause the theme stylesheet to load all time in header and the slider will display correctly. For automatic placement there’s no need to set this option, just leave it unchecked..

- User specified HTML tags allowed into slider description

- Meta box to ease the way custom images and custom content is added to the slider ( see in post/page editing into the right sidebar )

- Possibility to display posts/pages in random order into the slider

- Featured articles slider resizable from administration area ( default values get specified into stylesheet )

- Author link ( if you want to support the plugin ) that can be disabled from administration

- Slider settings access is restricted to administrators only with the possibility to give access to any other group of users available in WordPress. Group access other than admin is managed in Permissions page.

- Menu no longer available under Settings->Featured articles but directly in WordPress admin sidebar ( look for FA Lite in left sidebar )

- Themes modified to support featured slider resizing ( both CSS files and display files have changed a little ). If you update the plugin and you made custom themes, back-up first your themes folder.

- Custom post/pages images improved usage and interface

- Easy setting for featured posts and pages to be displayed into the slider ( see right sidebar when editing post/page )

- Image detection improved even more. Currently there are 2 ways to set an image for a certain post: by setting the image as a custom field and second by detecting the image from post content. For images detected in post content, the plugin tries to identify the exact attachment from the database and if found, it automatically sets the image into the custom field. The only thing it needs is for the image to have the width and height attributes set in HTML.

December 8th 2010

- date format in article description displayed according to blog settings

- editable read mode link

- article title has the option to act as a link

- image detection put into a function ( less code in theme display file )

- manual placement in theme files ( to manually place the slider into your theme: <?php FA_display_slider(); ?> )

- mouse wheel slider navigation can be disabled

- article text description allows links

- for automatic display, option to choose loop to display in ( be default is 0 ). This is useful if you have multiple loops in your page and you want to move around the slider. For example, if you have sidebar on left and inside it you display latest articles, the slider will display in sidebar. If you want it to display above main content, increase loop number until you see it displaying above the right loop.

Demo & download

Was this useful? Show your support.

digg WordPress featured content plugin

638 comments

  1. Mark says:

    How do you center the “Section Title”?

  2. Mark says:

    Constantin,

    First off, thank you so much for your help with this matter. If you go to http://www.itslikethis.org , you will see your amazing creation on the home page front and center. I looked inside the css file for my theme and didn’t find anything regarding tittle. I figured that since your plugin’s control panel is were I choose the tittle, then it would be found in the files of the plugin itself. I’m not sure what to do. Do you know specifically what i should look for or where in the css file it might be found? Towards the bottom or top? I also wanted to make sure that you knew that I disabled the page title function of the theme because my friend didn’t want page names to show at the top of every page. So when I installed your plugin and saw that the plugin created its title, that indicated to me that the title option for your plugin was separate that the page title that I disabled. Help!!!!! lol

    Thanks,
    -Mark-

    • Forgive my haste, I just realized the title isn’t styled into the theme files. I’m also working on an update for this and still have to answer questions and at times I get a bit overwhelmed. Now, to center it you’ll have to do some work. You’ll need to open display.php of your theme with an editor (you’re using light from what I see) and add on the first h2 in that page (it’s on line 1) a class for the title:
      Line is this one:
      <?php if ($options['section_display']==1): ?><h2><?php echo $options['section_title']?></h2><?php endif;?>

      And change it into something more or less like this one:
      <?php if ($options['section_display']==1): ?><h2 class="my_title"><?php echo $options['section_title']?></h2><?php endif;?>

      After you do this, you can style the title using the my_title class in theme stylesheet or your blog stylesheet. Hope this answers your question, if not, let me know.

      • Mark says:

        Constantin,

        I get were you are going with this but I looked and do not have any php files called “display.php”. I can handle switching out the code(i’ve done it before) however I’m not sure what php file to make the change on. Do you want me to email you the login so you can take a look at the php pages I do have?

        Thanks,
        -Mark-

  3. Stefan says:

    So, I’m having no issues customizing the look and placing it on the page. However, I’m having issues with Display Settings. I can completely choose which posts to include in the slider, and when I go to select the Categories on which I’d like for the slider to display, it selects them, but when I save, it doesn’t show them as selected any longer, and every section of my site, which is all category-based, shows the slider. Have I run into some sort of glitch?

    • Hi Stefan,

      What version of WordPress are you running? I really can’t say what’s happening, this might need further investigation. If you’re running on localhost, in your wp-config.php file, turn debug on and see if any errors pop up when you save the slider. There shouldn’t be any errors but at times a conflict with theme or other plugins may cause them to appear.

      • Stefan says:

        Thanks. I did wind up finding a workaround for just not displaying the widget on certain pages, so I’m sorted on that. However, I’m noticing that the formatting I have on the posts themselves (line breaks, in particular) are not being honored by the slider panels. When I click “Read More,” the posts themselves show the formatting, but within FA Lite, it’s just continuous. Any insight?

        Also, last question… When my posts are one sentence and don’t fill an entire pane, instead of the button being below the post on the left, it’s actually at the end of the sentence on the right. I’ve toyed with the CSS, but can’t seem to solve that issue either.

        Appreciate your time and attention. Thanks.

        • Stefan says:

          So nothing on these last formatting issues?

          • There is an option to allow only certain HTML tags in descriptions. Try using that and allow breaks and whatever else you need to display. About the button, it displays inline but since the content is wrapped in a paragraph, it should be below the text. Leave a link to your install please, it will help a lot to understand what’s going on.

  4. Hi,
    Thank you for creating such a dynamic wp plugin. I have an issue that I’d love your help with. Although I have set the max height and width for my images in my slideshow at 150 px, some images display at 150 x 150 while others display full size. I’d love your input. Thank you!

  5. I figured it out… thank you:)

  6. g.O.R.i says:

    This plugin is great, but I’m having just one problem.

    Once I install the plugin, it seems to show on my blog automatically, and that’s quite fine, but I want to insert an adsense beneath the plugin, but I can’t seem to find the code. I managed to do a few brush-ups with the css with the included css file of the plugin, but I just can’t find the code that inserts the plugin into my blog. Please give me some advice, if possible.

    I thought of an alternative to manually insert the code by myself, but then, I can’t find a way to disable the auto insert feature. I just love the plugin and it’s really useful, so it’ll be great if you can tell me how I can fix this.

    Thanks in advance, all the way from Japan.
    g.O.R.i

    • Hello from Romania g.O.R.i,

      On your newly created slider, look for Display on homepage setting and uncheck it. By default, the setting is checked and it will automatically display the slider above the first loop it finds in your page. Once you uncheck, you can do the manual insertion and you won’t have 2 sliders displayed into the same page.

  7. Chris S says:

    Having issues implementing the featured gallery. The previou/next article buttons are not working. Can you help me with this other then that it works great and is easy to get up and running. Great Plugin. Thanks for your efforts.

    Chris

    • Hi Chris,

      Based only on the info you gave me, no, I can’t help. I really can’t say why the plugin isn’t working. One thing I could suggest is to check your WordPress theme footer.php file and see if function wp_footer(); is inside. Other than that, maybe there’s a JavaScript conflict in your page caused by some other plugin or the theme itself. But I can’t say for sure, at least not until you give a link to your installation to check things out.

  8. Miroslav says:

    Hello Constantin,
    can you teach me how to set-up space between slider (bottom of slider) and first of news excerpts on the archive page?

    See, please, http://www.benesovsko.regiononline.cz/rubriky/benesov/

    Thank you reply.

    • Couldn’t see you test link. No matter. Depending on what theme you’re using, open the stylesheet available in theme folder name ( themes are located inside plugin folder/themes ). On the overall container you can put a margin-bottom: x px depending on how much space you want.

  9. CHRIS E says:

    1st great plugin have been looking for something like this for a while. i have the same problem Chris S has. the post dont loop and the thumbnails dont show.

    http://www.starsevenmusic.com/blog/?page_id=2069

    Is my test page i use for new plugin’s before i implement them into my site.

    any help with this will be very grateful

    Chris E

    • Thank you Chris, much appreciated. The problem why FeaturedArticles doesn’t work on your website is because some of the plugins you use load a different jQuery version. This is not OK, since jQuery comes by default within WordPress, plugins should use the version WP is providing.
      Now, the plugin making all the problems is matrix-gallery from what I see and the version it uses is 1.2.3. That version doesn’t have a function needed by FeaturedArticles to do its magic.
      To test if I’m right or not, please disable matrix-gallery and see if FeaturedArticles starts working. If it doesn’t, please come back here and let me know.

  10. PAN says:

    Hi,

    Thank you for this amazing plugin!
    Please, I’d like to have a slide to show one single author’s posts,
    that means filter posts not by category but by author ID, is it possible?
    Thank you in advance,

    Pan

    • Not without changing the plugin internal functionality. Sorry about this.

      • PAN says:

        Thank you anyway for your reply. Is there any chance that you’ll be adding this filter on later updates?

        For the time being I’ll try asking people how to modify it cause I don’t know PHP… If you have time to kindly tell me that then is it more then appreciated!!

        • We announced an updated some time ago and it’s almost done. If you like the current release, you’ll love what’s coming next. As a note, I already incorporated your request into this future update. Unfortunately, it will take a few more weeks to get everything in place, write docs and prepare everything so please be patient.

          • PAN says:

            Wow! That’s GOOD NEWS!!! Your so admirable!

            In fact I need this function to broadcast our featured artists’ posts for an exhibition in France, ideally 6 featured contents block on the front page, each one for an artist.
            OK I’ll hold my breath and waiting! Hope It could be done before our opening (jen 2012)…

            We are nonprofit gallery but I’ll buy you a coffee. Cheers!

  11. Andreas P. says:

    Hi Chris
    I´m an absolute beginner with Wp. My Question is were can I change the appearence of the widjet. I dont like the fonts and the size. When I open the css from the widjet ist inactiv.
    Maybe for a professionel it´s a stupid question but I cannot find solution by myself

    regards
    Andreas

    • My name is Constantin, not Chris :)
      About changing appearance, that’s not very hard to do but it requires some CSS knowledge and Firebug to find your way easier. This plugin uses themes to display sliders in your pages. The one you currently have n your website is called Light and the files are located in plugin folder/themes/light
      Inside that folder you’ll fins a file called stylesheet.css. All CSS customizations for theme Light can be done from that file. Hope I managed to answer your question.

  12. Fabio says:

    Hi Contantin!

    thanks for such a great plugin. I’m using it in the footer of http://www.cinemaclick.eu, as you may see. The problem I am facing is that I can not see more than 4 articles in the box. I tried everything in the settings, but as I add another featured article, I get the last got off the box. So the number stays 4 :( Where can be the problem?

    Any help would be really appreciated!
    However compliments for your work!

    Fabio

  13. doug says:

    Hi, um, i’m not sure about the moo tools and jquery thing. My wp is loading jquery, but not mootools. At any rate, nothing is happening in the slider area, and it looks like js is not happening for it because i can see all 3 of my featured pages, but they are not within the slider box. I dont have a live site for you to look at yet, but I think its obvious that i’m missing some js. thanks,

  14. doug says:

    sorry, please delete. i figured out a couple things

  15. Jolene Cox says:

    Hi! I am using the plugin but the navigation is not working on the bottom or the side, it isn’t automatically sliding. How do I get the navigation and slide to work? Thanks a lot! my site is http://www.sitkasoundsciencecenter.org

  16. Jolene Cox says:

    Secondly, it is showing up twice on my homepage in internet explorer. The first box is blank and the second box contains the articles.

  17. Jolene Cox says:

    First I was getting an error with the plugin e-commerce. I deactivated that…but FA Lite is still not working and now I am getting this error…Webpage error details

    User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; CMDTDF; .NET4.0C; IPH 1.1.21.4019)
    Timestamp: Wed, 16 Nov 2011 19:14:20 UTC

    Message: Object doesn’t support this property or method
    Line: 10
    Char: 4182
    Code: 0
    URI: http://www.sitkasoundsciencecenter.org/wp-content/plugins/featured-articles-lite/scripts/FeaturedArticles.jquery.js?ver=1.0

    • Well, it looks like you’re using 2 versions of jQuery in your website: 1.6.1 that comes with WordPress and gets included by FeaturedArticles and 1.4.2 that gets included by coin slider plugin and the theme you’re running. Both your theme and coin slider should use the version coming with WordPress but for some reason they don’t and that’s why probably all this is happening.
      As for 2 sliders in Internet Explorer, what I see in Firefox I see in IE8 also so I don’t know what to say. For some reason in IE your page has a “> on top, probably some tag that isn’t closed properly.

  18. Emmanuelle Demeules says:

    Hi,

    Thank you for this plugin.

    Is there a way to show only a part of the page content in the slider text area? I’d like, for instance, use the excerpt only. That way I can create a more targeted featured content then link to the full content. Thank you in advance.

    • Not right now but it will be available with the next update. Unfortunately, it will take few more weeks until the update will be released so all I can do is ask for some patience until we put all things together and release the update.

  19. [...] information can be found on php-help.ro. [...]

  20. Laurent says:

    Hello Constantin,

    Thanks for this great plugin. Alas, I have the same problem of Chris. I checked and desactived my others plugins, but still problem, The previou/next article buttons are not working. :o(

    Thanks by advance for your help

    • A link to your installation would help. If you noticed, Chris had a problem with a plugin that was doing some funny stuff in his page. If you can’t post a link, use Firebug in Firefox (or the developer tools in Chrome), see what errors you have in your page and come back here. But I suggest a link to where the slideshow plugin is installed, works much faster.

  21. Laurent says:

    Ok sorry, plugin is reactived on http://www.android-software.fr :)

  22. Kari says:

    I’m trying to get the navigation to work. The slider won’t slide, essentially. Any suggestions? :)

    • You’re using 2 versions of jQuery in your page. FeaturedArticles uses the one that comes with WordPress, usually 1.6. But you also manually load jquery 1.4 from google (maybe in theme or a plugin does that). To debug, you should first disable all plugins and leave only Featured Articles. Test if it works and if it does, enable plugins one by one and test to see if the plugin works after each plugin enabled.

      • Kari says:

        Got it! Oh! And just for future reference for others… I’m using the Thesis framework 1.8.2 (diythemes.com) and I had the sitewide jQuery library turned on in the Design Options in the Thesis Options admin section. All I had to do was to turn it off and the slider worked. :) Your advice helped — I knew it worked on another theme so I knew it had something to do with the Thesis theme loading jQuery or something. I’m a bit new at some of this — old hand at a bit too.

        Thank you for helping! I love this slider. Now to get all my images and what not working and that will be that. (I think that’s a database issue though ;) ) Thank you again!

        • Happy to hear that :) Oh, and thank you very much for sharing all the other info, I’ll incorporate this into the FAQ and docs of the new update that WILL be out by the end of the week. If you like the current release, you’ll love what’s coming up next :)

  23. Michelle says:

    First of all, great slider! I definitely want to leave the author link with the slider on my site to a) give you credit for awesome work and b) help others trying to find a good slider locate where I got it. However, I really like how you have it on your home page (http://www.php-help.ro/) with the “i” logo visible and the link scrolling out when you mouse over the “i”. How would I set mine up like that? It looks really clean and professional that way.

    Thanks!

    • Hi Michelle,

      Happy to hear you like the plugin. A new version for it was just released and this is probably the last comment here, on php-help.ro. The plugin has a new home with a lot of new toys like forum and priority support for customers and stuff. It’s still free but now it offers an extended version for paying customers. I chose this approach because it’s the only way I can dedicate my whole time to this plugin to make it better and with more features. New home is on codeflavors.com.
      Now, about the author link, what I have on my homepage is an older version and I made some changes to it to make it display like that. New release doesn’t display the link anymore, at least for now. If you want to direct people to this plugin, spread the word in any way you can and it will do.
      Last but not least, thank you for using it. Makes me very happy to see people find it useful.