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
Table of Contents
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | /* * 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
1 2 3 4 | 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | * 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
1 | <?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
Leave a Reply