musclez musclez - 1 year ago 123
PHP Question

Marquee Recent Posts (Wordpress)

I use the following code to display recent posts in Wordpress with a date and timestamp in a Marquee.

<script type="text/javascript"></script>
<script src="
$(document).ready(function() {
var i = 0;
$(".marquee").each(function() {
var $this = $(this);
$this.css("top", i);
i += $this.height();

function doScroll($ele) {
var top = parseInt($ele.css("top"));
if(top < 0) { //bit arbitrary!
var $lastEle = $(".last");
var top = (parseInt($lastEle.css("top")) + $lastEle.height());
$ele.css("top", top);
$ele.animate({ top: (parseInt(top)-600) },
200,'linear', function() {doScroll($(this))});


<div id="mholder">

<div class="marquee" style="height: auto">
<a title="<?php echo the_title() ?>" href="<?php the_permalink() ?>">
<?php echo $title_short ?></a><span><small><br/>
<?php the_time('F jS, g:i a') ?></small></span>




.marquee {
height: 50px
color: #ccc;
border: none;

#mholder {
height: 600px;
width: 150px;
border: none;
position: absolute;
overflow: hidden;


I would like to make it so only 4 out of the 14 posts are displayed at a time. The scrolling mechanism is irregular and I'd like to make it smooth and steady.
Furthermore, if anyone knows how to display specific category posts, that would be helpful.

Answer Source
<script data-require="jquery@*" data-semver="2.1.1" src="//"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>

<div class="newsblock">

<ul id="newgall">
//display 12 posts with title and date
  'post_type' => 'post',
  'post_status' => 'publish',
  'post_category' => '123',
  'posts_per_page' => 12,
  'caller_get_posts'=> 1
$my_query = null;
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {

  while ($my_query->have_posts()) : $my_query->the_post(); 

    <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a> 
    <br/><?php the_time('F jS, g:i a') ?>

wp_reset_query();  // Restore global post data stomped by the_post().
        var $items = $('#newgall li'),
            i = 0;

        function slide() {
            var index = i % $items.length;
            $items.hide().removeClass('curr').slice(index, index +4).show('fade').addClass('curr');
            i += 4;
            setTimeout(slide, 400);


Works. Enjoy, Internet!

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download