Scootercam Weather Plugin

A comprehensive WordPress plugin for displaying weather information from Visual Crossing data, including current conditions, 24-hour forecasts, and 7-day forecasts.

Features

Current Conditions

Display individual weather data points using simple shortcodes:

• Temperature
• Humidity
• Wind speed and direction
• Barometric pressure and trend
• UV index with safety remarks
• Air quality index (AQI)

24-Hour Forecast

Display a detailed hourly forecast table showing:

• Time
• Weather icon
• Conditions
• Temperature
• Wind speed and direction
• Precipitation chance
• Visibility
• UV index

7-Day Forecast

Display a visual weekly forecast widget with:

• Day names
• Weather icons
• High/low temperatures
• Precipitation probability
• Customizable styling

Installation

1. Upload the scootercam-weather folder to /wp-content/plugins/
2. Activate the plugin through the ‘Plugins’ menu in WordPress
3. Go to Settings → Scootercam Weather to configure

Configuration

Data Paths

Navigate to Settings → Scootercam Weather → Data Paths to configure your weather data file locations:

• Base Path: Absolute path to your website root (default: /home/scootercam/public_html)
• Summary File: Current conditions data (default: wx/summary.json)
• Hourly File: 24-hour forecast data (default: wx/hourly.json)
• Daily File: 7-day forecast data (default: wx/daily.json)

UV Remarks

Customize safety messages for different UV index levels in Settings → Scootercam Weather → Current Conditions.

7-Day Display

Adjust font sizes, icon sizes, and styling for the 7-day forecast widget in Settings → Scootercam Weather → 7-Day Display.

Usage

Current Conditions Shortcodes

Display individual weather data points:

Temperature: [sc-temperature]
Humidity: [sc-humidity]
Wind: [sc-wind-speed] from [sc-wind-direction]
Pressure: [sc-pressure] and [sc-pressure-trend]

UV Index: [sc-uv-index] ([sc-uv-desc])

[sc-uv-remarks]

Air Quality: [sc-air-quality] – [sc-air-quality-desc]

Available Shortcodes

Shortcode	Description	Example Output
[sc-temperature]	Current temperature	72°F
[sc-humidity]	Current humidity	65%
[sc-wind-speed]	Wind speed	12 mph
[sc-wind-direction]	Wind direction	NW
[sc-pressure]	Barometric pressure	30.15 inHg
[sc-pressure-trend]	Pressure trend	Rising
[sc-uv-index]	UV index value	5.2
[sc-uv-desc]	UV index description	Moderate
[sc-uv-remarks]	UV safety remarks	Seek shade during midday…
[sc-air-quality]	Air quality index	45
[sc-air-quality-desc]	AQI description	Good

Shortcode Attributes

All current condition shortcodes support optional attributes:

• units="true/false" – Show or hide units (default: true)
• round="true/false" – Round numbers (default: true for temperature/humidity)

Examples:

[sc-temperature units="false"] → displays: 72
[sc-temperature round="false"] → displays: 72.3°F
[sc-humidity units="false" round="false"] → displays: 64.8

24-Hour Forecast

Display a complete 24-hour forecast table:

[scootercam-24]

This creates a responsive table with hourly weather data including conditions, temperature, wind, precipitation, visibility, and UV index.

7-Day Forecast

Display a visual 7-day forecast widget:

[scootercam_7day]

Customization

Override default display settings with shortcode attributes:

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

Available 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

Examples

Simple Current Conditions Display

<div class="current-weather">
    <h3>Current Conditions</h3>
    <p><strong>Temperature:</strong> [sc-temperature]</p>
    <p><strong>Humidity:</strong> [sc-humidity]</p>
    <p><strong>Wind:</strong> [sc-wind-speed] from the [sc-wind-direction]</p>
    <p><strong>Pressure:</strong> [sc-pressure] and [sc-pressure-trend]</p>
</div>

UV Information Widget

<div class="uv-widget">
    <h3>UV Index</h3>
    <p><strong>Current UV Index:</strong> [sc-uv-index] ([sc-uv-desc])</p>
    <div class="uv-advice">

[sc-uv-remarks]

</div> </div>

Complete Weather Page

<h2>Current Conditions</h2>
<p>
    Right now it's [sc-temperature] with [sc-humidity] humidity.
    Winds are [sc-wind-speed] from the [sc-wind-direction].
</p>

<h3>UV Index</h3>
<p>UV Index: [sc-uv-index] ([sc-uv-desc])</p>
<p>[sc-uv-remarks]</p>

<h2>24-Hour Forecast</h2>

[scootercam-24]

<h2>Week Ahead</h2>

[scootercam_7day]

Data Requirements

The plugin expects JSON files from Visual Crossing Weather API in the following formats:

summary.json (Current Conditions)

{
  "local": {
    "beach": {
      "temp_f": 72.5,
      "humidity": 65,
      "wind_mph": 12.3,
      "wind_dir": 315,
      "pressure_in": 30.15,
      "pressure_trend": 0.02,
      "uv_index": 5.2
    }
  },
  "air_quality": {
    "aqi": 45
  }
}

hourly.json (24-Hour Forecast)

{
  "forecast": [
    {
      "time": "3:00 PM",
      "temp": 75,
      "conditions": "Partly Cloudy",
      "icon": "partly-cloudy-day",
      "windSpeed": 10,
      "windDir": 270,
      "precipChance": 10,
      "visibility": 10.0,
      "uvindex": 6
    }
  ]
}

daily.json (7-Day Forecast)

{
  "forecast": [
    {
      "date": "2025-01-15",
      "tempHigh": 78,
      "tempLow": 62,
      "conditions": "Partly Cloudy",
      "icon": "partly-cloudy-day",
      "precipProb": 20
    }
  ]
}

Styling

The plugin uses W3.CSS for styling, which is automatically loaded. The 24-hour forecast uses responsive classes to hide certain columns on smaller screens:

• .w3-hide-small – Hides content on screens < 601px

You can override styles in your theme’s CSS:

/* Customize table styling */
.w3-table.w3-striped tbody tr:nth-child(odd) {
    background-color: #f9f9f9;
}

/* Customize 7-day widget */
.w3-card-2 {
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

Migration from Previous Plugins

If you were using the individual plugins (Scootercam Current Conditions, Scootercam 24-Hour Forecast, ScooterCam 7-Day Forecast), this consolidated plugin automatically migrates your settings on activation:

1. UV remarks are preserved
2. 7-day display settings are maintained
3. All shortcodes remain backward compatible

To complete migration:

1. Install and activate Scootercam Weather
2. Verify your settings in Settings → Scootercam Weather
3. Deactivate the old individual plugins
4. Test your pages to ensure everything works

Troubleshooting

No Data Displayed

1. Check file paths: Verify the paths in Settings → Scootercam Weather → Data Paths
2. Check file permissions: Ensure JSON files are readable by the web server
3. Check JSON validity: Ensure your JSON files contain valid data
4. Check error logs: Look in your WordPress debug log for error messages

Shortcodes Not Working

1. Verify shortcode syntax: Ensure square brackets are used [sc-temperature] not {sc-temperature}
2. Check plugin activation: Ensure the plugin is activated
3. Clear cache: Clear any caching plugins or browser cache

Styling Issues

1. Check W3.CSS loading: Verify W3.CSS is loading in your page source
2. Check theme conflicts: Some themes may override styling
3. Browser compatibility: Test in different browsers

Support

For issues or questions:

1. Check the Overview tab in plugin settings for quick reference
2. Review this README
3. Check your WordPress error logs
4. Contact: https://scootercam.com

Credits

• Author: Scootercam
• Version: 2.0.0
• License: GPL v2 or later
• Data Source: Visual Crossing Weather API
• Styling: W3.CSS

Changelog

Version 2.0.0

• Consolidated three separate plugins into one unified plugin
• Added centralized data handling and caching
• Created unified settings interface with tabbed navigation
• Maintained backward compatibility with all existing shortcodes
• Automatic migration of settings from previous plugins
• Improved code organization and maintainability

Previous Versions

• Individual plugins for Current Conditions, 24-Hour, and 7-Day forecasts