With this little tutorial I want to illustrate the way in order to show recent articles with newsticker effect on the sidebar of your wordpress blog. The term “newsticker” refers to a small section of the page in which we can read the last news (the last ones post in this case) with the typical sliding effect of the on-line magazine.
The execution of this script demands to edit some files of your template, therefore it is better idea a backup copy of the theme folder.

Recent Posts with NewsTicker Effect

Step 1 – Creation of the module style

The following portion of code contains the style CSS of the recent-post-newsticker module. We can insert the following code directly in the main style sheet of the template (style.css) or create a new file .css (newsticker.css).

#listticker{/*general settings*/
text-align:left;
height:220px;
width:270px;
overflow:hidden;
padding:6px 6px 6px 6px;
}
#listticker ul{/*list general settings*/
border:0;
margin-bottom:0;
padding:0;
list-style:none;
background:#f4f4f4;
}
#listticker li{/*single list element settings*/
height:40px;
padding:5px;
list-style:none;
margin-top:5px;
border:dashed 1px #dddddd;
background:#ffffff;
}
#listticker a{/*link settings*/
display:block;
color:#857d59;
margin-bottom:0px;
font-weight:bold;
float:left;
font-size:11px;
}

This code is customizable to follow the design of your blog. With the example configuration we will obtain the following one rendering.

Now we create a folder post_newsticker where insert the eventual style sheet file if it has been chosen this road. Inside the folder post_newsticker we insert also the file jquery.js, it referers to JQuery base library, the Javascript framework used to recreate the sliding effect.
Now we are ready to transfer on the server and just inside the directory of template graphical the folder containing post_newsticker files.

Step 2 – Modification of the header.php file

With this modification we recall the files previously loaded. The following portions of code will be inserted inside of the tag head. If you choose to use a dedicated css file for the style insert this:

<link rel="stylesheet" href="<?php bloginfo('template_directory'); >/post_newsticker/newsticker.css" type="text/css" />

Now insert the jQuery library reference.

<script src="<?php bloginfo('template_directory'); >/post_newsticker/jquery.js" type="text/javascript">
</script>

Therefore insert the javascript code in order to realize the sliding effect on the articles list.

<script type="text/javascript">
$(document).ready(function(){

	var first = 0;
	var speed = 500;
	var pause = 3000;

		function removeFirst(){
			first = $('ul#listticker li:first').html();
			$('ul#listticker li:first')
			.animate({opacity: 0}, speed)
			.fadeOut('slow', function() {$(this).remove();});
			addLast(first);
		}

		function addLast(first){
			last = '
	<li style="display:none" mce_style="display:none">'+first+'</li>
';
			$('ul#listticker').append(last)
			$('ul#listticker li:last')
			.animate({opacity: 1}, speed)
			.fadeIn('slow')
		}

	interval = setInterval(removeFirst, pause);
});
</script>

With the speed and pause variables we can modify respective element refreshing velocity and the pause between the various refreshments. To this point we must connect the n last posts of the blog to the list elements.

Step 3 – Modification of the sidebar.php file

In order to obtain the list of n last posts we can use the native functions in Wordpress that refer to posts management.

<h2> Articoli recenti</h2>
<ul id="listticker">
 <?php
 $lastposts = get_posts('numberposts=10');
 foreach($lastposts as $post) :
    setup_postdata($post);
 ?>
 <li>
 <a href="<?php the_permalink(); ?>" id="post-<?php the_ID(); ?>"><?php the_title(); ?></a></li>
 <?php endforeach; ?>

The code should follow the style of the page structure. The ul element have id=”listticker”.
We define the n number (that the newsticker list contains) of the posts with “numberpost” variable.

End

To this point the recent-post-newsticker has been correctly installed.

A great part of the material for this module has been recovered on Woork (Antonio Lupetti’s tech blog) in the following article ” How to implement a news ticker with jQuery and ten lines of code “.

If you have any suggestions or ideas to improve the module write a comment to the post.