Skip to content

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:

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:

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

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();;


    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 {
        setTimeout(function() {
            if(opts.count == {
                opts.count = 0;
            } else {
        }, opts.delay);

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

Published inCodingWordpress