How to Create Feature Post News Ticker WordPress

Additional on my article Create a WordPress Theme with Bootstrap And underscores Step by Step, I‘ll give you a tutorial How to Create Feature Post News Ticker WordPress. News ticker is a plugin that used to display information in a slide form. News ticker display as shown below

programming tutorial - feature post news ticker wordpress

To create a feature post news ticker, I use jquery and newsticker.js function that I took from By modifying script into the theme function, we can use it as a wordpress plugin and add them into  theme customizer.

Let’s start tutorial

Create Feature Post News Ticker WordPress

Note : I create this tutorial by adding a function in functions.php in the theme folder

Please download file jquery.min.js and newsticker.js in the link below

– Download jquery.min
– Download newsticker.js

Put jquery.min in js folder (themedirectory -> js -> jquery.min.js). Then extract file into js folder (themedirectory -> js -> newsticker.js).

Open file functions.php dan add this script at the bottom line

 * Custom News ticker widget
 * author : sigit prasetya nugroho
 * author url :
 * tutorial url :
function sgt_news_ticker($title='Breaking News'){
        echo '
<div><span class="title-ticker">'.$title.'</span><span  id="newsticker" class="newsticker"></span></div>


        query_posts( array( 'posts_per_page' => 10, 'orderby' => 'ID', 'order' => 'DESC' , 'tag' => 'feature' ) );
                    if (have_posts()) :
                        echo '
<ul id="newsList" style="display:none">';
                        while (have_posts()) :
                          echo '
<li style="display:none">';
                          echo'<a href="';                               the_permalink();                           echo'">'; echo the_title(); echo'</a></li>

                echo '</ul>

        wp_enqueue_script( 'sgt_news_ticker', get_template_directory_uri().'/js/newsTicker.js',true);
        wp_enqueue_script('sgt_call_news_ticker', get_template_directory_uri().'/js/custom_newsticker.js',true);

You can now use these functions to create a feature post news ticker by put the following code in header.php with the following way

if ( function_exists('sgt_news_ticker') ) {

  sgt_news_ticker('Breaking News'); // breaking news is your news ticker title

The following step is add controls and options in theme customize, you can add the action hook customize_register

    newsticker option by
function subuntu_customizer_newsticker( $wp_customize ) {
   $wp_customize->add_section( 'subuntu_newsticker_section' , array(
    'title'       => __( 'News Ticker', 'subuntu' ),
    'priority'    => 30,
    'description' => 'To use news ticker will show for article with tag : <i>feature</i>',
) );
    array(  'default'   => '0',)
    array(  'default'   => 'Breaking News',)
$wp_customize->add_control('subuntu_newsticker_control', array(
  'label'      => __('Enabled News ticker', 'subuntu'),
  'section'    => 'subuntu_newsticker_section',
  'settings'   => 'subuntu_newsticker_setting_radio',
  'type'       => 'radio',
  'choices'    => array(
    '1'   => 'Active',
    '0'  => 'Deactive',
$wp_customize->add_control( 'id', array(
    'label' => 'News ticker title',
    'settings' =>   'subuntu_newsticker_setting_text',
    'section' => 'subuntu_newsticker_section',
    'type' => 'text',
) );
add_action( 'customize_register', 'subuntu_customizer_newsticker' );

Open your theme customize and news ticker option will look as the following

programming tutorial - feature post news ticker wordpress in customize theme

Then add the code to your header.php

<?php if ( get_theme_mod( 'subuntu_newsticker_setting_radio' ) == '1' ) :  $newtickertitle='Breaking News';  if ( get_theme_mod( 'subuntu_newsticker_setting_text' ) )  {   $newtickertitle = get_theme_mod( 'subuntu_newsticker_setting_text' );  }  if ( function_exists('sgt_news_ticker') ) {   sgt_news_ticker($newtickertitle);  } endif; ?>

The feature post news ticker plugin is already include on my subuntu wordpress theme , for details please download the file subuntu theme on the following link

Subuntu : Free Responsive WordPress Theme With Bootstrap

Thus tutorial about How to Create Feature Post News Ticker WordPress, hope it is useful

The following two tabs change content below.
This site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.

Leave a Comment

Your email address will not be published.

Time limit is exhausted. Please reload CAPTCHA.

%d bloggers like this: