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

To create a feature post news ticker, I use jquery and newsticker.js function that I took from jqueryscript.net. 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 newsticker.zip 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 : https://seegatesite.com
 * tutorial url : https://seegatesite.com
 */
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()) :
                         the_post();
                          echo '
<li style="display:none">';
                          echo'<a href="';                               the_permalink();                           echo'">'; echo the_title(); echo'</a></li>

';
                    endwhile;
                echo '</ul>

';
            endif;
        wp_reset_query();
        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);
}

* Custom News ticker widget

* author : sigit prasetya nugroho

* author url : https://seegatesite.com

* tutorial url : https://seegatesite.com

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

the_post();

echo '

<li style="display:none">';

echo'<a href="'; the_permalink(); echo'">'; echo the_title(); echo'</a></li>

endwhile;

echo '</ul>

endif;

wp_reset_query();

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
 }

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 seegatesite.com
    */
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>',
) );
  $wp_customize->add_setting(
    'subuntu_newsticker_setting_radio',
    array(  'default'   => '0',)
);
    $wp_customize->add_setting(
    'subuntu_newsticker_setting_text',
    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' );

newsticker option by seegatesite.com

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>',

) );

$wp_customize->add_setting(

'subuntu_newsticker_setting_radio',

array( 'default' => '0',)

);

$wp_customize->add_setting(

'subuntu_newsticker_setting_text',

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

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; ?>

<?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