Try to create a horizontally scolling ticker with post titles, images and excerpt in wordpress

Question

I am trying to create a scrolling news ticker in wordpress targeting a custom post type in my footer. Here is the javascript and my div below that. Thanks.

  $('.ticker-wrapper').cycle({
     fx: 'scrollHorz',
     continuous: 1,
     easeIn: 'linear',
     easeOut: 'linear'
  });


<div class ="ticker-wrapper">
<!--pulling in custom post type "Ticker"-->
<article class="ticker">

<?php $recentPosts = new WP_Query("showposts=8&post_type=Ticker"); 
while($recentPosts->have_posts()):$recentPosts->the_post();?>

<article id="post-<?php the_ID(); ?>" <?php post_class('clearfix'); ?> role="article">   

<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('ticker-img', array('class' => 'ticker-image'));?></a>
<h2 class="ticker-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p class="ticker-excerpt"><?php the_excerpt('ticker_length'); ?></p>
</article>  <!--end ticker-->

<?php endwhile; wp_reset_query(); ?>
</div> <!--end ticker-wrapper-->

Well, my code isn't working at all. Any ideas how I can get the scrolling to work? — amespower, Dec 02 '12 at 02:59

score 0 · Answer 1 · edited May 05 '19 at 09:24

Make sure you have jQuery Cycle running, and make sure its called after jQuery. Then you need to start and end your custom loop outside of the article class that is in the jQuery Cycle call. So try the code below.

Put this inside your <head></head> tags, after the link to jQuery and jQuery Cycle.

$(document).ready(function () { 
    $('.ticker-wrapper').cycle({
        fx: 'scrollHorz',
        continuous: 1,
        easeIn: 'linear',
        easeOut: 'linear'
    });
});

Put this where you would like the scroller to be.

<?php $recentPosts = new WP_Query("showposts=8&post_type=Ticker"); 
while($recentPosts->have_posts()):$recentPosts->the_post();?>

<div class="ticker-wrapper">

    <article <?php post_class('clearfix'); ?> role="article" class="ticker" id="post-<?php the_ID(); ?>">   

        <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('ticker-img', array('class' => 'ticker-image'));?></a>

        <h2 class="ticker-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
        <p class="ticker-excerpt"><?php the_excerpt('ticker_length'); ?></p>

    </article>  <!--end .ticker-->

</div> <!--end ticker-wrapper-->

<?php endwhile; wp_reset_query(); ?>

I also modified the code a bit and took out one of the article tags as it was basically a duplicate of the article tag above it. I added the class and ID on that article to the previous one. This should work, but if not reply with any PHP or JS/jQuery errors.

Try to create a horizontally scolling ticker with post titles, images and excerpt in wordpress

1 Answers1