ScooterCam 7-Day Forecast Plugin

A WordPress plugin that displays a beautiful, horizontal 7-day weather forecast with fully customizable font sizes and styling.

Features

• 7-Day Horizontal Layout – Compact, mobile-friendly design
• Today Highlighting – Current day styled in blue for quick reference
• Customizable Typography – Control font sizes for all text elements
• Flexible Display – Adjustable icon sizes and card padding
• W3.CSS Compatible – Uses W3.CSS classes for consistent styling
• Admin Settings Panel – Easy configuration through WordPress admin
• Shortcode Override – Per-instance customization via shortcode attributes
• Weather Icons – SVG icon support for all weather conditions
• Precipitation Display – Shows rain probability when > 0%
• Responsive Design – Automatically adapts to screen size

Installation

Method 1: Manual Upload

1. Download or create the plugin file scootercam-7day.php
2. Create directory: /wp-content/plugins/scootercam-7day/
3. Upload scootercam-7day.php to the directory
4. Go to WordPress Admin → Plugins
5. Find “ScooterCam 7-Day Forecast” and click Activate

Method 2: SSH Installation

cd /var/www/your-site/wp-content/plugins/
mkdir scootercam-7day
cd scootercam-7day
nano scootercam-7day.php
# Paste the plugin code, save with Ctrl+O, exit with Ctrl+X
chmod 644 scootercam-7day.php

Then activate through WordPress Admin → Plugins.

Requirements

• WordPress 5.0 or higher
• PHP 7.0 or higher
• W3.CSS loaded on your site (or the W3.CSS classes will be ignored)
• Weather data file in JSON format (see Data Format below)
• Weather icon SVG files in /assets/icons/ directory

Configuration

Admin Settings

After activation, configure the plugin:

1. Go to Settings → ScooterCam 7-Day
2. Adjust the following settings:

Font Sizes:

• Day Name Font Size (default: 11px)
• High Temperature Font Size (default: 16px)
• Low Temperature Font Size (default: 12px)
• Precipitation Font Size (default: 11px)

Display Options:

• Icon Size in pixels (default: 28)
• Card Padding (default: 6px 3px)

Data Configuration:

• Daily Data File Path (default: wx/daily.json)

3. Click Save Changes
4. Check the live preview at the bottom of the settings page

Data File Path

The plugin looks for weather data relative to your WordPress root directory.

Default location:

/var/www/your-site/wx/daily.json

If your data file is elsewhere, update the path in Settings → ScooterCam 7-Day.

Usage

Basic Shortcode

Add the widget to any page, post, or widget area:

[scootercam_7day]

Shortcode with Custom Attributes

Override admin settings for specific instances:

[scootercam_7day day_font_size="13px" temp_high_size="18px" icon_size="32"]

Available Shortcode Attributes

Attribute	Description	Default
day_font_size	Font size for day names	11px
temp_high_size	Font size for high temperature	16px
temp_low_size	Font size for low temperature	12px
precip_size	Font size for precipitation %	11px
icon_size	Icon width/height in pixels	28
card_padding	Padding inside each day card	6px 3px
data_file_path	Path to daily.json file	wx/daily.json

Example Use Cases

Hero Section (Large):

[scootercam_7day day_font_size="14px" temp_high_size="20px" temp_low_size="15px" icon_size="36"]

Sidebar Widget (Compact):

[scootercam_7day day_font_size="9px" temp_high_size="14px" temp_low_size="11px" icon_size="24" card_padding="4px 2px"]

Standard Content Area:

[scootercam_7day]

Data Format

The plugin expects a JSON file with the following structure:

{
  "forecast": [
    {
      "date": "2025-10-19",
      "tempHigh": 72,
      "tempLow": 58,
      "icon": "partly-cloudy-day",
      "precipProb": 20,
      "conditions": "Partly Cloudy"
    },
    {
      "date": "2025-10-20",
      "tempHigh": 68,
      "tempLow": 55,
      "icon": "rain",
      "precipProb": 60,
      "conditions": "Light Rain"
    }
    // ... up to 7 days
  ]
}

Required Fields

• date – Date in YYYY-MM-DD format
• tempHigh – High temperature (integer or float)
• tempLow – Low temperature (integer or float)
• icon – Weather icon filename (without .svg extension)
• precipProb – Precipitation probability (0-100)
• conditions – Text description of weather conditions

Weather Icons

Place SVG weather icons in /assets/icons/ directory.

Expected icon filenames:

• clear-day.svg
• clear-night.svg
• partly-cloudy-day.svg
• partly-cloudy-night.svg
• cloudy.svg
• rain.svg
• snow.svg
• sleet.svg
• wind.svg
• fog.svg

Icons should be square (recommended: 64x64px or larger SVG).

Styling

The plugin uses W3.CSS classes for styling. Current styles include:

Today’s Card:

• Background: w3-blue
• Text: w3-text-white
• Low temp: w3-text-light-blue
• Precip: w3-text-light-blue

Other Days:

• Background: w3-light-grey with w3-hover-pale-blue on hover
• Text: w3-text-dark-grey
• Low temp: w3-text-grey
• Precip: w3-text-blue

Container:

• Card: w3-card-2 w3-white w3-round
• Border on each day: w3-border

Custom CSS (Optional)

If you need additional styling, add to your theme’s CSS:

/* Make cards taller */
.scootercam-7day-card {
    min-height: 150px;
}

/* Adjust spacing */
.scootercam-7day-card .w3-col {
    padding: 0 4px;
}

Troubleshooting

Widget shows “Daily forecast data not available”

Check file exists:

ls -la /var/www/your-site/wx/daily.json

Check file permissions:

chmod 644 /var/www/your-site/wx/daily.json

Verify path in plugin settings: Settings → ScooterCam 7-Day → Daily Data File Path

Icons not displaying

Verify icon directory exists:

ls -la /var/www/your-site/assets/icons/

Check for SVG files:

ls /var/www/your-site/assets/icons/*.svg

Set permissions:

chmod 755 /var/www/your-site/assets/icons/
chmod 644 /var/www/your-site/assets/icons/*.svg

Wrong data showing

Clear cache:

• If using a caching plugin, clear the cache
• Try accessing in incognito/private browsing mode

Check JSON format:

cat /var/www/your-site/wx/daily.json | python -m json.tool

Font sizes not applying

Ensure proper syntax:

[scootercam_7day day_font_size="14px"]  ✓ Correct
[scootercam_7day day_font_size=14px]    ✗ Missing quotes
[scootercam_7day day_font_size="14"]    ✗ Missing unit

Check for CSS conflicts:

• Inspect element in browser developer tools
• Look for competing CSS rules overriding inline styles

Compatibility

Tested With

• WordPress 5.x, 6.x
• PHP 7.4, 8.0, 8.1, 8.2
• W3.CSS 4.x
• All modern browsers (Chrome, Firefox, Safari, Edge)

Known Issues

• None currently reported

Support

For issues, questions, or feature requests:

1. Check the troubleshooting section above
2. Verify your data file format matches the specification
3. Check WordPress debug log: /wp-content/debug.log
4. Review browser console for JavaScript errors

Changelog

Version 1.0.0 (2025-10-19)

• Initial release
• 7-day horizontal forecast display
• Customizable font sizes for all text elements
• Admin settings panel
• Shortcode attribute support
• W3.CSS integration
• Today highlighting
• Precipitation probability display
• Weather icon support
• Mobile responsive design

License

GPL v2 or later

Credits

Developed for ScooterCam.net weather display system.

Related Plugins

• ScooterCam Wave Height Visualizer – Lake Michigan wave conditions
• ScooterCam Wave Hybrid – Combined buoy + forecast data
• ScooterCam Weather Snips – Current conditions widgets
• ScooterCam Hero Image – Dynamic header images
• ScooterCam 24-Hour Forecast – Hourly forecast display

Future Enhancements

Potential features for future versions:

• [ ] Multiple day range options (3-day, 5-day, 10-day)
• [ ] Vertical layout option
• [ ] Dark mode support
• [ ] Wind speed/direction display
• [ ] Humidity and UV index
• [ ] Sunrise/sunset times
• [ ] Moon phase display
• [ ] Historical comparison
• [ ] Alert banner integration
• [ ] Multiple location support
• [ ] Custom color schemes
• [ ] Animation effects
• [ ] Export as image

---

Version: 1.0.0
Last Updated: October 19, 2025
Plugin URI: https://scootercam.net
Author: ScooterCam