How to Make Your Featured Articles Scroll Automatically
Several people have requested an “auto-scroll” feature for the Featured Articles section, so here it is.
To get a better idea what I mean by “auto-scroll,” simply look at the home page of this site. You’ll notice the featured articles scroll automatically form one to the next. If you’d like to implement this feature on your site, it’s pretty simple.
First, open your Featured Articles template. To find the Featured Articles template, click the Presentation link on your WordPress control panel, then click Theme Editor. From the list of files on the right, select “Feature Articles on Home Page.”
On the following page, scroll to the bottom, and find this block of code:
<script type="text/javascript" charset="utf-8">
var my_glider = new Glider('my-glider', {duration:0.5});
</script>
Change it to this:
<script type="text/javascript" charset="utf-8">
var my_glider = new Glider('my-glider', {duration:0.5, autoGlide:true, frequency:8});
</script>
You can adjust the time period between article rotations by changing the “8″ in the above code.
And that’s it.
Hi Doug:
It's a bit tricky, but I think this will work.
1. You probably added this to the About section on ...
Hi Michael,
how can I get the theme to use the new Identicons instead of the gravatar picture, which it currently ...
Hi Michael, Thanks for a great theme. Its fantastic and yor mods are always explained perfectly.
I've set up including adding ...
Hi Michael,
Thank you for the great instructions. They worked perfectly!
Comment by Alexander Korte on 7 January 2008:
Very cool feature, very cool theme.
Comment by David on 8 January 2008:
Hi Michael,
Thank you for making a superb WP theme. I am really enjoying it.
Your detailed instructions on how to get featured articles to
scroll automatically worked perfectly for me the first time!
Thank you
-David
Comment by Steve Outing on 14 January 2008:
Michael: On the Featured block, how can I get the black bar at the top of the block instead of the bottom? I’ve tried moving the code snippet for it up, but can’t get that to work. Thanks!
Comment by jamie on 14 January 2008:
Hi Michael,
Tried this on my site but it stays the same? file updated successfully!
any feedback grateful,
thanks
jamie
Comment by Michael Pollock on 14 January 2008:
Jamie - the problem is the ShareThis plugin. The newest version messes with the Featured Articel scroller. Try using the ShareThis Classic version. I’ve tested it on the demo site and it works fine.
Comment by Michael Pollock on 14 January 2008:
Steve:
1. Open the theme file named “Feature Articles on Home Page.”
2. Scroll down and find the following block of code:
<div class="controls"><ul class="clearfix"><li class="feat-nums">Feature Articles</li><?php $count = 1 ?><?php $my_query = new WP_Query('category_name=featured&showposts=5'); while ($my_query->have_posts()) : $my_query->the_post(); ?><li><a href="#section<?php the_ID(); ? rel="nofollow">"><?php echo $count; ?></a></li><?php $count = $count + 1 ?><?php endwhile; ?><li class="feat-about"><a href="#about" rel="nofollow">About this Site</a></li></ul></div>Move it to the top of the file just under:
<div id="my-glider">Then update file.
3. Next, you’ll want to tweak the CSS a bit, so open your stylesheet template, and find this block of code:
#my-glider .controls {border-top:1px solid #fff;
clear:both;
width:646px;
background:#000;
padding: 0;
margin:0;
}
Change it to:
#my-glider .controls {border-bottom:1px solid #fff;
clear:both;
width:646px;
background:#000;
padding: 0;
margin:0;
}
Comment by zloj on 16 January 2008:
Michael,
slider is not working for me. Instead it is just dropping without scroll, and moving page.
Please advice.
I did as you mentioned here.
Algis
Comment by Michael Pollock on 16 January 2008:
>>>> slider is not working for me. Instead it is just dropping without scroll, and moving page.
Algis:
The problem is most likely the ShareThis plugin. The newer version seems to mess up the scroller.
Try the ShareThis Classic version. I and others have used it without any problem.
Comment by zloj on 16 January 2008:
Well, where can I get that one? Can you please email it?
Thanks!
Comment by Michael Pollock on 16 January 2008:
>>> Well, where can I get that one? Can you please email it?
http://alexking.org/projects/share-this
Comment by sandfotos on 22 January 2008:
testing the comments. great site.
Comment by YaC on 27 January 2008:
Test.
Congratulations Michael!
Comment by Johnny on 28 January 2008:
Glider question…
“This function will allow you to display several featured articles at the top of your home page, as well as an excerpt of your about page. And all folks need to do is click the link at the bottom of the box and watch your featured content glide on by.”
What link at the bottom of what box?
Comment by Darrin Keller on 29 January 2008:
I purchased this AWESOME theme! Great work!
How do I designate an article as “featured”?
Thanks,
Darrin
Comment by Michael Pollock on 29 January 2008:
Darrin:
See step 4 here.
Best - Michael
Comment by Juan Vazquez on 29 January 2008:
Hi Michael. I bought your excelent theme yesterday. But i have a problem with the scroll. When I click on a link, the page down but the scroll does not work. The browser open the link /#section3 (for example), and don’t scroll.
I remove the plugins and i using wordpress 2.3.2 version. Why i have this problem? Any sugestions?
Please, access www.futebolnortenordeste.com.br and take a look.
Thanks for help, and sorry my english…
Comment by Frank on 30 January 2008:
I am having the same problem, but i’m not running the sharethis plugin. Any other known reasons? The theme is currently not running on my site, while I hammer out the details and new features.
Love this theme btw.
Comment by Frank on 31 January 2008:
For anyone who is interested, by disabling my plugins, then reenabling them one at a time, I was able to figure out what was breaking my site.
Tabber wasn’t working due to the Zap_NewWindow plugin.
The rotating featured box wasn’t rotating due to WP lightbox 2 plugin. I informed Michael, and thought you guys would like to know as well.
Comment by Michael Pollock on 31 January 2008:
Great feedback Frank. Thanks!
Comment by David on 1 February 2008:
Hi Michael,
At your convenience, please assist me in solving this problem.
When I log in as admin I see my first and lastname in the upper right corner of the dashboard, however, when I write a page or post a comment it shows the Page Author as a contributor or subscriber name rather than my admin account.
Thank you in advance.
-David
Comment by Dante on 14 February 2008:
I thought I would try the scroll feature and it worked just fine. But I decided not to stick with it. I replace the code back to the original code but the positioning of the code is not the same. Is this something I should be concerned about?
Comment by Max on 15 February 2008:
Hi, i need help. I’d like cancel into the features articles scroll, page About. I don’t want that this page (or another page) scroll with the normal articles. How can i do ? Thx
Comment by George on 18 February 2008:
This is a fantastic template… thank you! I need to make background color changes to areas highlighted in red. Can you direct me? http://www.busazilla.com/wpmag.jpg
Comment by m.o.m. on 19 February 2008:
Another Try. i bought the Theme an now i have a little question: Can i use a fade in fade out effect. is it possible?
Comment by Mike Foster on 19 February 2008:
Michael,
Kick ass site bro, really having fun with it. www.earnhardtauction.com is working great. Although I started a new site yesterday www.momfocus.com and updated to the latest WP release. I can’t get the glider to work no matter what I deactivate from my plugin folder. I don’t know what to do at this point.
What do you think I should do at this point?
Mike
Comment by Mike Foster on 20 February 2008:
Michael
Thanks for the reply but, no I didn’t fix the problem.
My site ‘momfocus.com’ is broken. It is the latest ver. of WP.
Not sure what to do.
Comment by Frank on 20 February 2008:
Mike, right now you don’t have any sites in the Featured box. You can use any other category you like, but to get it to show up in the featured box, you need to also click the ‘Featured’ category box.
Comment by Mark @ TheLocoMOno on 20 February 2008:
I am wondering if there is a way to scroll only the feature articles without the About this Site in the scroll? I don’t like the way the about this site excerpt shows up and until WordPress comes up with an optional excerpt for pages, I don’t see any other alternatives.
Comment by Mike Foster on 21 February 2008:
Hey Guys,
Just found another plugin that keeps your from gliding.
‘Ajax Comment Posting’
Thanks again for a sweet theme.
Comment by Mark @ TheLocoMono on 21 February 2008:
Mike, thanks for the page excerpt plugin. It works like a dream. Now one step closer to my vision using your theme. Keep on rocking.
Comment by Mike Foster on 22 February 2008:
I would like to remove the ‘about this site’ from the glider as well. What’s the secret?
Comment by Michael Pollock on 25 February 2008:
>>>>> I would like to remove the ‘about this site’ from the glider as well. What’s the secret?
On your Theme Editor page, open the template named “Feature Articles on Home Page.”
Scroll down and find and delete this block of code:
<div class="section" id="about"><div class="feature-entry">
<h2>About this Site</h2>
<?php $my_query = new WP_Query('pagename=about'); while ($my_query->have_posts()) : $my_query->the_post(); ?>
<?php the_excerpt(); ?>
<div><a class="more-link" href="<?php the_permalink() ? rel="nofollow">" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">Read More</a></div>
<div style="clear:both;"></div>
<?php endwhile; ?>
</div>
</div>
Then scroll down and find and delete this line of code:
<li class="feat-about"><a href="#about" rel="nofollow">About this Site</a></li>Comment by nick on 28 February 2008:
nick is testing
Comment by Joe on 3 March 2008:
Is there a way to have the featured article show up both as a featured article that glides at the top and under the Other Recent Articles below?
Comment by Michael Pollock on 3 March 2008:
>>>>> Is there a way to have the featured article show up both as a featured article that glides at the top and under the Other Recent Articles below?
Yes, Joe, that can be done. You’ll need to edit your Main Index template.
Look for this block of code:
<?php if (have_posts()) : while (have_posts()) : the_post();if( $post->ID == $do_not_duplicate[$post->ID] ) continue; ?>
Change it to this:
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>There will be 2 instances of the code that you’ll have to change.
Best - Michael
Comment by onefix on 4 March 2008:
Thanks for the excellent template and also for the easy to follow instructions.
One more plugin that causes the feature to stop scrolling is the Flickr Manager tgardner.net v1.5.1
Comment by Allen on 4 March 2008:
How many featured articles will show and can the amount be changed?
Comment by Lewis on 9 March 2008:
Hi Michael,
I’ve got no plugins activated, I’ve edited the code exactly as you’ve said in this post, and the gliding isn’t working. What else could be blocking it?
Thanks!
Lewis
Comment by Graeme Grant on 11 March 2008:
Is there an “easy” way to add a flash swf file to the site? Specifically, I was hoping to put in flash where the 300×250 banner sits. I got totally lost with your flash video tutorial - I just want to run an swf file.
Comment by Michael Pollock on 13 March 2008:
>>>>> Is there an “easy” way to add a flash swf file to the site? Specifically, I was hoping to put in flash where the 300×250 banner sits. I got totally lost with your flash video tutorial - I just want to run an swf file.
Graeme:
Here’s some code to embed a SWF file:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" width="300" height="250" id="myMovieName"><param name="movie" value="http://www.mysite.com/myvideo.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#fffffff" /><param name="play" value="false" /><param name="menu" value="true" /><embed src="http://www.mysite.com/myvideo.swf" quality="high" bgcolor="#ffffff" width="300" height="250" name="myMovieName" play="false" menu="true" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed></object>You’d need to change
http://www.mysite.com/myvideo.swfabove to reflect the name and location of your own video.To place the video in place of the 300×250 sidebar banner:
1. Click Presentation, then Theme Editor.
2. On the right side of the page, click the template named Banner Ad 300×250, and find this code:
<div class="banner300"><a href="http://www.solostream.com" rel="nofollow"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/banner300.gif" alt="300x250 banner" /></a></div>Then change it to:
<div class="banner300"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" width="300" height="250" id="myMovieName"><param name="movie" value="http://www.mysite.com/myvideo.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#fffffff" /><param name="play" value="false" /><param name="menu" value="true" /><embed src="http://www.mysite.com/myvideo.swf" quality="high" bgcolor="#ffffff" width="300" height="250" name="myMovieName" play="false" menu="true" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed></object></div>Then Update file.
Comment by George on 19 March 2008:
Looks Good (Y)
Comment by Iskwew on 21 March 2008:
Hi Michael,
I have my glider showing 12 posts, but it only scrolls and shows 5, and you get nothing when you click om numbers from 6 to 12. Is there somewhere else in the code I need to instruct it, other than this line:
<?php $my_query = new WP_Query(’category_name=featured&showposts=12′)
Regards,
Iskwew
Comment by Virtual Bird's Eye on 21 March 2008:
Thanks for the great theme - and for all the help!
Comment by Michael Pollock on 25 March 2008:
>>>>> I have my glider showing 12 posts, but it only scrolls and shows 5, and you get nothing when you click om numbers from 6 to 12. Is there somewhere else in the code I need to instruct it, other than this line:
<?php $my_query = new WP_Query(’category_name=featured&showposts=12′)Yes, Iskwew, there are two places where you have to change the code.
Near the top here:
<?php $count = 1 ?><?php $my_query = new WP_Query('category_name=featured&showposts=5'); while ($my_query->have_posts()) : $my_query->the_post(); $do_not_duplicate[$post->ID] = $post->ID; ?>
and near the bottom here:
<?php $count = 1 ?><?php $my_query = new WP_Query('category_name=featured&showposts=5'); while ($my_query->have_posts()) : $my_query->the_post(); ?>
Comment by mark on 27 March 2008:
Hi Michael. Love the look at the theme - just one query before I dive in though - can I use this Featured Article scroller to point to a page in addition to posts? This would be a clincher for me if that is the case.
Comment by Richard on 2 April 2008:
Hi Michael,
Re the popularity ratings. In my featured articles on the front page feature box, the popularity rating appears for feature #1, but not for features #2 and #3.
However, the popularity rating does appear on the individual post pages for features #2 and #3.
How do I get the popularity rating to show for features #2 and #3 in the features box on the home page?
Comment by ikailo on 4 April 2008:
Michael,
The theme is installed and it looks great!
A couple of things:
I’m wondering if there is a way to pause the glider when the mouse is hovering over the area? Also, what about a play/pause button?
Is it possible to highlight in the control bar the number of the feature that is currently displayed?
Comment by kuchi on 9 April 2008:
How do I post the 300×250 banner and the 468×60 banner on the webside?
Is it possible through the standard Wordpress image upload function on the Write Post page?
Thanks for answering.
Comment by antonio on 17 April 2008:
How can I put a video instead of the 300×250 banner?
Comment by Oscar on 22 April 2008:
Antonio: See the post about putting flash where the banner is.
Michael: My Glider seem to suddenly have stopped working for some reason. I get an “error on page”/”object expected” row 57 char 5. When I click (one of my three articles in feature) it simple just jumps down the page and loads the feature article within the feature box (as it should), but without “effects”. Instead of scrolling smoothly its just jumping down as it is a “#”-target. (root/#section10, #14 and #15 respectively).
I’ve tried copying the original code (as I removed the about and set it to auto switch), but that doesn’t seem to work either - conflict elsewhere?
Any ideas?
Comment by scott on 27 April 2008:
Michael:
Beautiful template. Just testing the comments utility.
Comment by Jeff Carey on 1 May 2008:
One other plugin that seems to mess up the scrolling feature is called “Live”. Mine is working now that I deactivated it.
Thanks again Michael.
Jeff
Comment by gunter on 3 May 2008:
just tried for fun but you can do a lot of other things with the feature box
- advertising (banner + links text under)
- sliding photo galerie
and so on
Gunter
Comment by Richard Telofski on 15 May 2008:
Hi Michael,
Just wanted to say again what excellent customer service you give in standing behind this theme. If you need a testimonial, count me in!
Comment by Michael Pollock on 7 July 2008:
David:
When you have a chance, could you please let me know how I may change the actual feature articles background color from the current grey color to another color?
David: The background color for the featured article is set in the Stylesheet template here:
#my-glider .scroller {background:#eee;
height: 220px;
width:646px;
overflow: hidden;
}
Just change the #eee color code the color code you want to use.
Comment by David on 7 July 2008:
Michael, it worked perfectly, thank you!
Comment by iTransInter on 11 July 2008:
Michael,
I just want to ask you ,what should I do if I want to add the youtube under the banner 300*250 as this site, thanks.
Best
Jackie
Comment by Michael Pollock on 11 July 2008:
>>>> I just want to ask you ,what should I do if I want to add the youtube under the banner 300*250 as this site, thanks.
Just open your Sidebar template and find this line:
<li><?php include (TEMPLATEPATH . '/banner300.php'); ?>
</li>
Below that, add something like this:
<li><object width="300" height="250"><param name="movie" value="http://www.youtube.com/v/dMH0bHeiRNg&hl=en&fs=1"></param><param name="allowFullScreen" value="true"></param><embed src="http://www.youtube.com/v/dMH0bHeiRNg&hl=en&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" width="300" height="250"></embed></object>
</li>
You’ll need to get your own embed code for your YouTube video. Just be sure you change the width and height elements in the embed code to fit the 300×250 area.
Comment by David on 11 July 2008:
Hi Michael,
I want to create a category called videos and put videos into the category without them showing up as new posts under “other recent articles” section.
Is there a way to populate the video category without them showing up anywhere other than when you click on the video category itself?
Thank you in advance.
David
Comment by modemlooper on 11 July 2008:
Love the theme. A great base for me to tweak!
Can the glider keep going after you select one of the featured articles. Currently it scrolls and then when you click one of the numbers it stops on that article. I would like it to resume scrolling.
Another question how to add comments to pages? I have it selected in as in option in the page admin but doesn’t show up on front end.
Thanks!
Comment by Sylvia on 12 July 2008:
Thank you for the instructions here. I was easily able to …
- Remove the About page from appearing in the scrolling features
- Change the number of featured items in the scroller to 4
http://www.todaysbudget.com
Super!
Comment by Virtual Bird's Eye on 13 July 2008:
if you are going to change it often, maybe try this:
Create a new banner page by making a copy of the banner300.php page and call it banner300_2.php
Then, using the same place Mike told you above, do this:
<li>
<?php include (TEMPLATEPATH . '/banner300.php'); ?>
</li>
<li>
<?php include (TEMPLATEPATH . '/banner300_2.php'); ?>
</li>
That way, you only change the code on the main page once, and you can go into the banner300_2.php page as often as you want and change it without the risk of messing up the sidebar.
Comment by Nigel Howarth on 14 July 2008:
Thanks Michael,
That’s great! I’ve found that using the wordTube plugin, it’s also possible to include a local flash video as well - but it needs to be 296px wide if you want to embed it in a widget.
Cheers,
Comment by Michael Pollock on 14 July 2008:
>>>>> I want to create a category called videos and put videos into the category without them showing up as new posts under “other recent articles” section.
Is there a way to populate the video category without them showing up anywhere other than when you click on the video category itself?
Yes. Open your Main Index Template and find this block (there are 2 instances of this block, change both):
<?php if (have_posts()) : while (have_posts()) : the_post();if( $post->ID == $do_not_duplicate[$post->ID] ) continue; ?>
<?php $post_class = ('home-post-1' == $post_class) ? 'alt-home-post-1' : 'home-post-1'; ?>
Add this just above it:
<?php query_posts('cat=-X'); ?>X = the category ID of the category you want to exclude.
To find the category ID …
There was a time when the category IDs were listed right next to the category. For some reason the WP development team changed that. So now, here’s how to find the category ID.
In your WP control panel, click Manage >> Categories.
Place your cursor over the category link and look in the bottom left corner of your browser. you should see a link appear in the browser status bar (If you don’t use the status bar, just click on the category, and the link will appear in the browser Address bar at the top).
it will look like this:
http://mysite.com/wp-admin/categories.php?action=edit&cat_ID=22
The ID in the above example is 22.
Comment by Michael Pollock on 14 July 2008:
>>>>> Can the glider keep going after you select one of the featured articles. Currently it scrolls and then when you click one of the numbers it stops on that article. I would like it to resume scrolling.
Unfortunately, no.
>>>>> Another question how to add comments to pages? I have it selected in as in option in the page admin but doesn’t show up on front end.
Open the Page Template and find this block of code:
<div class="post" id="post-<?php the_ID(); ?>">
<div class="entry">
<?php the_content(); ?>
<div style="clear:both;"></div>
</div>
</div>
Immediately after it, place this tag:
<?php comments_template(); ?>Comment by David on 15 July 2008:
Hi Michael,
Thank you for the great instructions. They worked perfectly!
Comment by Doug on 18 July 2008:
Hi Michael, Thanks for a great theme. Its fantastic and yor mods are always explained perfectly.
I’ve set up including adding a feature photo to my about page, but I woud like to be able to set the image link of something other than the about page. Can this be done?
If you look at my site at http:/bettersinging.com you’ll instantly see how instinctive it is for a visitor to want to click the image and visit the forums.
Instead it goes to the About page…which makes sense but I believe it affects the flow.
thansks
Comment by Michael Pollock on 22 July 2008:
Hi Doug:
It’s a bit tricky, but I think this will work.
1. You probably added this to the About section on the “Featured Article on Home Page” template:
<?php if (get_post_meta($post->ID, home_feature_photo)) { ?><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><img src="<?php echo get_post_meta($post->ID, home_feature_photo, true); ?>" class="feature-photo" alt="feature photo" /></a><?php } ?>If so, replace it with this (if not, let me know how you added the Feature Photo to the About section):
<?php if (get_post_meta($post->ID, home_feature_photo)) { ?><?php if (get_post_meta($post->ID, home_feature_photo_link)) { ?>
<a href="<?php echo get_post_meta($post->ID, home_feature_photo_link, true); ?>" rel="bookmark" title="Off-Site Link">
<?php } else { ?>
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to
<?php the_title(); ?>">
<?php } ?>
<img src="<?php echo get_post_meta($post->ID, home_feature_photo, true); ?>" class="feature-photo" alt="feature photo" /></a>
<?php } ?>
2. Then just create a new Custom Field for the About page.
Call it: home_feature_photo_link
Enter you link in the Value field like so: http://www.thisisthelink.com