Create a simple ticker in this case showing latest tweets in WordPress

First lets install some plugin to show the latest tweets in wordpress. The plugin that I used is this one: http://wordpress.org/extend/plugins/twitter-for-wordpress/

You can use any plugin.

Install and put the widget in some position.

Here is an example of the output needed for the jQuery to work correctly:

<div>
    <p>A tweet is here</p>
    <p>Another tweet here</p>
    <!-- cont... -->
</div>

So we need to make a small change in the latest tweets plugin output to match this.

The just add this java script to the site:

jQuery(function($) {
    var opts = {
        el: '.twitter-stream',
        items: new Array(),
        count: 0,
        total: -1,
        delay: 6000,
        animate: true
    };

    $(opts.el+' p').each(function(i) {
        opts.items[i] = $(this).html();
        opts.total++;
    }).hide();

    runTweeter();

    function runTweeter() {
        if(opts.animate == true) {
            if($(opts.el+' p').length > 0) {
                $(opts.el).children('p').fadeOut(500, function() {
                    $(this).parent(0).empty().append('<p style="display: none;">'+opts.items[opts.count]+'</p>').children('p').fadeIn(500);
                });
            } else {
                $(opts.el).empty().append('<p style="display: none;">'+opts.items[opts.count]+'</p>').children('p').fadeIn(750);
            }
        } else {
            $(opts.el).empty().append('<p>'+opts.items[opts.count]+'</p>');
        }
        setTimeout(function() {
            if(opts.count == opts.total) {
                opts.count = 0;
            } else {
                opts.count++;
            }
            runTweeter();
        }, opts.delay);
    }
});

Then you can adjust the CSS to make it look better.