• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
seegatesite header

Seegatesite.com

Seegatesite.com - Programming Tutorial , Sharing , How and Learn Together

  • TOOLS
    • Bootstrap Navbar Online Generator
    • Customize Sidebar Menu Bootstrap 3
    • Bootstrap Demo
  • ADVERTISE
  • CATEGORIES
    • Android
    • Blogging Tips
    • Database
    • CSS
    • Info Gadget
    • Javascript
    • Linux
    • PHP
    • Various
    • WordPress
  • Q&A
  • PHP
  • JAVASCRIPT
  • JQUERY
  • ANGULAR
  • WORDPRESS
  • SEO
  • REACT
🏠 » Wordpress » How to Create Feature Post News Ticker Wordpress

How to Create Feature Post News Ticker WordPress

By Sigit Prasetya Nugroho ∙ July 31, 2015 ∙ Wordpress ∙ Leave a Comment

Share : TwitterFacebookTelegramWhatsapp

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

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

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

programming tutorial - feature post news ticker wordpress in customize theme

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

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

Another WordPress Related Post :

  • How To Create The Fastest Social Share Button WordPress Without Plugin
  • Create WordPress Slider Without Javascript
  • The Point Responsive WordPress Theme For Blogging
  • The Doctors Free WordPress Responsive Theme For Medical
  • Develop Your Site With Start Blogging The Responsive WordPress Theme
  • Zerius Theme The Free WordPress Responsive Theme

Avatar for Sigit Prasetya Nugroho

About Sigit Prasetya Nugroho

This site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Welcome to my Home,

Avatar for Sigit Prasetya NugrohoThis site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.



Popular Articles

Checked checkbox AdminLTE Bootstrap in Jquery

November 4, 2014 By Sigit Prasetya Nugroho 7 Comments

Simple create date format validation with jqueryUI

December 21, 2014 By Sigit Prasetya Nugroho Leave a Comment

Create Simple Progress Bar for Fake Online Generator with Jquery

January 10, 2015 By Sigit Prasetya Nugroho Leave a Comment

22+ Coolest Free Jquery Plugin For Premium Theme

October 3, 2015 By Sigit Prasetya Nugroho Leave a Comment

Easy Build Your Anti Copy Paste Plugin

October 6, 2015 By Sigit Prasetya Nugroho Leave a Comment

Popular Tags

adminlte (15) adsense (13) adsense tips (4) affiliate amazon (13) amazon (12) Android (8) angular (16) angular 4 (12) angular 5 (4) asin grabber (3) Bootstrap (27) codeigniter (5) create wordpress theme (5) crud (8) css (6) free wordpress theme (7) google adsense (4) imacros (4) increase traffic (6) jquery (34) laravel (10) laravel 5 (5) learn android (5) modal dialog (5) mysql (6) nodeJs (4) optimize seo (4) pdo (6) php (30) plugin (53) pos (7) Publisher Tips (5) react (3) Reactjs (7) SEO (37) theme (17) tutorial angular (5) tutorial angular 4 (6) tutorial javascript (10) tutorial javascript beginners (4) twitter (3) widget (3) wordpress (18) wordpress plugin (13) XMLRPC (5)




  • About
  • Contact Us
  • Disclaimer
  • Privacy Policy
  • Terms and Conditions

©2021 Seegatesite.com