Floating News Headline

Floating News Headline is a professional-grade, lightweight news ticker plugin designed for speed, beauty, and zero theme conflicts. Display breaking news, latest posts, hand-picked headlines, or custom alerts in a sleek, non-intrusive floating bar on your WordPress site.

Built from the ground up with a modern React admin dashboard and GPU-accelerated BEM-CSS architecture, this plugin delivers silky-smooth scrolling animations without slowing down your website.

🚀 Why Choose Floating News Headline?

Unlike other ticker plugins that rely on heavy jQuery dependencies and outdated markup, Floating News Headline uses:

• Vanilla JavaScript on the frontend — zero jQuery dependency
• CSS transform: translateX() animations — GPU-accelerated for 60fps scrolling
• BEM (Block-Element-Modifier) CSS — zero naming collisions with your theme
• WordPress Transient API — intelligent caching to minimize database queries
• PSR-4 Style Autoloading — clean, maintainable PHP architecture
• WordPress REST API — secure, nonce-verified AJAX communication

🎨 3 Premium Themes Included (Free)

1. Corporate Classic — Clean, professional Indigo-themed design with post thumbnails, author metadata, and a document icon label. Perfect for business and corporate sites.
2. Dark Night — Sleek, high-contrast Slate design with emerald status pulses, gradient blur overlays, and pipe dividers. Ideal for tech, gaming, and entertainment sites.
3. Floating Pill — Modern, bubble-style Emerald design with glassmorphism blur effects and rounded corners. Great for blogs, startups, and creative portfolios.

✅ Key Features

• Instant Live Preview — See your ticker changes in real-time within the admin dashboard before saving. No page refresh required.
• Multi-Source Content — Pull headlines from your latest blog posts, manually select specific posts, or write a custom alert message with a link.
• Manual Post Picker — Search and select up to 5 specific posts (free version) to display in your ticker with a beautiful search UI.
• Customizable Speed — Control the scrolling speed from 5s (fast) to 100s (slow) with an intuitive range slider.
• Item Spacing Control — Adjust the gap between ticker items from 0px to 200px for the perfect visual density.
• Page Targeting — Choose to show the ticker on all pages or only on the homepage/front page.
• Scroll Behavior — Choose between « Fixed » (always visible) or « Sticky on Scroll » (appears after scrolling down).
• Sticky Top Placement — Automatically inject the ticker at the very top of your site using wp_body_open, or place it anywhere with a shortcode.
• Play / Pause Control — Users can pause and resume the ticker with a built-in toggle button. Accessible with proper aria-label attributes.
• Seamless Infinite Loop — Headlines scroll continuously with a duplicated group technique — no gaps, no stuttering.
• Short Content Protection — If total headline text is too short for a seamless loop, the plugin automatically multiplies items to prevent visual breaks.
• Customizable Labels — Change the ticker label text (e.g., « Breaking News », « Latest Updates ») from the admin panel.
• Responsive Design — Looks great on desktop, tablet, and mobile devices with adaptive layouts.
• Lightweight & Fast — Under 40KB total frontend footprint (CSS + JS). No external CDN dependencies.
• Settings Migration — Automatically migrates settings from the legacy fnh_settings option key to the new floating_news_headline_settings key.
• Developer Hooks — Filter floating_news_headline_items to programmatically modify ticker items before rendering.

🔒 Security

• All REST API routes are protected with manage_options capability checks
• Input sanitization using sanitize_text_field(), sanitize_key(), intval(), and esc_url_raw()
• Output escaping using esc_html(), esc_attr(), and esc_url() in all templates
• Nonce verification via WordPress REST API X-WP-Nonce header
• ABSPATH checks on all PHP files to prevent direct access

🏗️ Architecture

• Namespace: FloatingNewsHeadline
• Autoloader: PSR-4 style with spl_autoload_register
• Classes: Activator, Adapter, Admin, Assets, Deactivator, Frontend, REST_API, Settings
• Templates: corporate.php, dark.php, pill.php (BEM-structured HTML)
• Build System: @wordpress/scripts with custom Webpack config for dual entry points (index.js for admin, frontend.js for public)