Create News Ticker Slide Posts Using HTML CSS PHP and Javascript

Showing a news in flash or latest post sliding style then news ticker are good option for your website. I just need a ticker for my new website design so I did my research how to create news ticker after reading many of article online finally I made it my themes are using tickers here iShop and Republic.

Here is full code for you to make your own ticker on website or blog it’s simple uses HTML, CSS and jQuery (JavaScript) but for some PHP users who want it on their website or WordPress users we have solution for them as well. News ticker html code some time used to say it js news scroller check in this picture.

Create News Ticker using below codes and it’s look like this:

How to Integrate into website? Starts from these codes:

Step 1: Initiate the coding if you are working on new file then you below code or just include jquery file into header of your website for WordPress some other PHP based website don’t require this file because they already included but you can try.

<!DOCTYPE html>
<html>
    <head>
     <title>Website Title : wRock.org</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js ">
    </script>
   </head>
<body>
<!----- Body Tag Your all other codes goes here-->

</body>
</html>

Step 2 : Ticker code into body area I’m using ticker on my theme Republic check demo here

<ul class="ticker">
<li><span>News &raquo;</span> Post one : Name of your acricle..1</li>
    <li><span>News &raquo;</span> Post one : Name of your acricle..1</li>
    <li><span>News &raquo;</span> Post Two : Name of your acricle..2.</li>
 </ul>

OR WordPress users can get latest post using below code..

<ul class="ticker" >
   <?php $wrockorg_ticker_args = array( 
    'ignore_sticky_posts' => true,
    'showposts' => 8,
    'orderby' => 'date',  );
    $the_query = new WP_Query( $wrockorg_ticker_args );
    if ( $the_query->have_posts() ) :
    while ( $the_query->have_posts() ) : $the_query->the_post();
   ?>
 <li><h5><span><?php _e('Latest News','theme-textdomain'); ?></span><a title="<?php the_title(); ?>" href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h5>
    <div class="clear"></div></li>
   <?php endwhile; endif; wp_reset_postdata(); ?>
   </ul>

Step 3: Including jQuery code into your website this code also have capability to pause and play function on mouse hover. You can also increase or decrease time line setInterval(tick, 5000); change it to whatever you want it’s good when you create news ticker as main focus.

<script type="text/javascript">
var hoveredElement=null;

function tick(){
    $('.ticker').filter(function(item){   
                return !$(this).is(hoveredElement)
            }).each(function(){
        $(this).find('li:first').slideUp(function () {                       
            $ticker = $(this).closest('.ticker');
            
            $(this).appendTo($ticker).slideDown();
        });
    });
}
setInterval(tick, 5000);


$(function(){
    $('.ticker').hover(function(){
hoveredElement=$(this);        
    },function(){
        hoveredElement=null;
    });
});
</script>

Step 4 : Now main part of this code styling using CSS , edit file as you require and change color or fonts.

<style>
/*--------------------------------------------------------------
# News Ticker 
--------------------------------------------------------------*/
.ticker {
	height: 42px;
	overflow: hidden;
	line-height: 38px;

}
ul.ticker li span{
	background-color: #FF5656;
	border-right: 1px solid #fff
	color: #FFF;
	margin-right: 6px;
	font-size: 20px;  
        padding: 10px 25px 10px 30px;
}

.ticker a:hover,
.ticker li:hover{
	color:#D8D8D8;
}
.ticker a,
.ticker li{
  color: #ffffff;
  font-size: 15px;
  background:#333;
  list-style: none;

}
</style>

If don’t want to include these code while you create news ticker into website you can save into different files as well like jQuery file should be save as filename.js and CSS code saved as style.css. then include them into website.