Short News Panel Documentation

Short News Panel is a web application that displays news articles in a swipeable format similar to popular short-form content platforms. It fetches news articles from a WordPress site using the WordPress REST API and presents them in an engaging, mobile-friendly interface that allows users to swipe through news stories quickly.

Features

Short News Features:

Core Features

• Swipeable News Interface: Navigate through news articles with simple swipe gestures or navigation arrows
• Responsive Design: Optimized for both mobile and desktop viewing experiences
• WordPress Integration: Fetches content directly from any WordPress site using the REST API
• Category Support: Can display posts from specific categories
• End Slide: Special slide at the end of all stories with a “Go Back Home” button
• Read Full Story: Each news item includes a link to read the complete article
• Share Functionality: Easy sharing of news stories
• Advertisement Support: Option to display ads at the bottom of the screen

Visual Features

• Customizable Colors: Change theme color and category text color
• Floating Logo: Display your site logo in the corner of the screen
• Animated Elements: Includes animations for better user experience
• Swipe Indicators: Visual cues to guide users on navigation

Setup Instructions

Setup Steps:

Requirements

• Web server with PHP support (like Apache, Nginx)
• WordPress site with REST API enabled

Installation Steps

1. Upload Files: Upload all files to your web server directory
2. Configure API: Edit the config.php file to point to your WordPress site’s REST API
3. Customize Settings: Adjust colors, text, and other settings in config.php
4. Test: Open the site in a browser to ensure everything is working correctly

Configuration Options

Update values in constants:

WordPress REST API Configuration

• API_URL: Set this to your WordPress site’s REST API endpoint
• Default: https://your-site.com/wp-json/wp/v2/posts?_embed&per_page=50
• For category-specific posts: https://your-site.com/wp-json/wp/v2/posts?_embed&per_page=50&categories=CATEGORY_ID

Site Information

• SITE_NAME: Your site’s name (default: ‘INB Digital’)
• SITE_TITLE: Title displayed in the browser tab (default: ‘Short News’)
• SITE_DESCRIPTION: Meta description for SEO (default: ‘Watch the latest news shorts…’)
• SITE_FAVICON_IMAGE: URL to your favicon image
• SITE_FLOATING_LOGO: URL to the logo displayed in the corner (default: ‘assets/images/fallback-favicon.png’)
• SITE_OG_IMAGE: Image used for social media sharing

Visual Customization

• THEME_COLOR: Primary color for buttons and UI elements (default: ‘#0d4585’)
• CATEGORY_COLOR: Color for category text (default: ‘#e50404’)

Content Settings

• GO_BACK_HOME_URL: URL for the “Go Back Home” button on the end slide (default: ‘https://inbdigital.com/’)
• READ_FULL_STORY_BUTTON_TEXT: Text for the button linking to the full article (default: ‘View Full Story’)

Advertisement Settings

• SHOW_ADS: Enable or disable the bottom advertisement (default: true)
• Ad code can be customized in the get_ad_code_with_html_container() function

Head Code Settings

• Add the head code in the get_head_code() function, including examples such as Google Analytics, Google AdSense ad code, and other tracking tools.

Customization Guide

Customization step-by-step Guides:

Changing Colors

To change the main theme color and category text color, modify these lines in config.php:

define('THEME_COLOR', '#0d4585'); // Change to your preferred color
define('CATEGORY_COLOR', '#e50404'); // Change to your preferred color

Changing the WordPress Source

To fetch posts from a different WordPress site or category:

1. Find the API_URL definition in config.php
2. Replace it with your WordPress site’s REST API URL
3. For category-specific posts, uncomment and modify the alternative API_URL definition

Modifying Advertisement

1. Set SHOW_ADS to true or false to enable/disable ads
2. Replace the ad code in the get_ad_code_with_html_container() function with your own ad code

Troubleshooting

Troubleshooting Steps:

No Posts Displaying

• Verify your WordPress site’s REST API is accessible
• Check that the API_URL in config.php is correct
• Ensure your WordPress posts have featured images

Layout Issues

• Check for CSS conflicts with your existing site
• Verify the responsive design works on different devices
• Clear browser cache after making changes

Support

For support and further information, contact:

• Website: https://inbdigital.com/
• Email: [email protected]

Last Updated: May 26, 2025