{"id":764,"date":"2025-10-24T14:55:25","date_gmt":"2025-10-24T18:55:25","guid":{"rendered":"https:\/\/scootercam.net\/notes\/?p=764"},"modified":"2025-10-24T14:55:26","modified_gmt":"2025-10-24T18:55:26","slug":"scootercam-weather-plugin","status":"publish","type":"post","link":"https:\/\/scootercam.net\/blog\/scootercam-weather-plugin\/","title":{"rendered":"Scootercam Weather Plugin"},"content":{"rendered":"\n<p>A comprehensive WordPress plugin for displaying weather information from Visual Crossing data, including current conditions, 24-hour forecasts, and 7-day forecasts.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Features<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Current Conditions<\/h3>\n\n\n\n<p>Display individual weather data points using simple shortcodes:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Temperature<\/li>\n\n\n\n<li>Humidity<\/li>\n\n\n\n<li>Wind speed and direction<\/li>\n\n\n\n<li>Barometric pressure and trend<\/li>\n\n\n\n<li>UV index with safety remarks<\/li>\n\n\n\n<li>Air quality index (AQI)<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">24-Hour Forecast<\/h3>\n\n\n\n<p>Display a detailed hourly forecast table showing:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Time<\/li>\n\n\n\n<li>Weather icon<\/li>\n\n\n\n<li>Conditions<\/li>\n\n\n\n<li>Temperature<\/li>\n\n\n\n<li>Wind speed and direction<\/li>\n\n\n\n<li>Precipitation chance<\/li>\n\n\n\n<li>Visibility<\/li>\n\n\n\n<li>UV index<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">7-Day Forecast<\/h3>\n\n\n\n<p>Display a visual weekly forecast widget with:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Day names<\/li>\n\n\n\n<li>Weather icons<\/li>\n\n\n\n<li>High\/low temperatures<\/li>\n\n\n\n<li>Precipitation probability<\/li>\n\n\n\n<li>Customizable styling<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Installation<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Upload the <code>scootercam-weather<\/code> folder to <code>\/wp-content\/plugins\/<\/code><\/li>\n\n\n\n<li>Activate the plugin through the &#8216;Plugins&#8217; menu in WordPress<\/li>\n\n\n\n<li>Go to <strong>Settings \u2192 Scootercam Weather<\/strong> to configure<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Configuration<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Data Paths<\/h3>\n\n\n\n<p>Navigate to <strong>Settings \u2192 Scootercam Weather \u2192 Data Paths<\/strong> to configure your weather data file locations:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Base Path<\/strong>: Absolute path to your website root (default: <code>\/home\/scootercam\/public_html<\/code>)<\/li>\n\n\n\n<li><strong>Summary File<\/strong>: Current conditions data (default: <code>wx\/summary.json<\/code>)<\/li>\n\n\n\n<li><strong>Hourly File<\/strong>: 24-hour forecast data (default: <code>wx\/hourly.json<\/code>)<\/li>\n\n\n\n<li><strong>Daily File<\/strong>: 7-day forecast data (default: <code>wx\/daily.json<\/code>)<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">UV Remarks<\/h3>\n\n\n\n<p>Customize safety messages for different UV index levels in <strong>Settings \u2192 Scootercam Weather \u2192 Current Conditions<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">7-Day Display<\/h3>\n\n\n\n<p>Adjust font sizes, icon sizes, and styling for the 7-day forecast widget in <strong>Settings \u2192 Scootercam Weather \u2192 7-Day Display<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Usage<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Current Conditions Shortcodes<\/h3>\n\n\n\n<p>Display individual weather data points:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Temperature: &#91;sc-temperature]\nHumidity: &#91;sc-humidity]\nWind: &#91;sc-wind-speed] from &#91;sc-wind-direction]\nPressure: &#91;sc-pressure] and &#91;sc-pressure-trend]\n\nUV Index: &#91;sc-uv-index] (&#91;sc-uv-desc])<\/code><\/pre>\n\n\n<p>[sc-uv-remarks]<\/p>\n\n\n\n<p>Air Quality: [sc-air-quality] &#8211; [sc-air-quality-desc]<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Available Shortcodes<\/h4>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Shortcode<\/th><th>Description<\/th><th>Example Output<\/th><\/tr><\/thead><tbody><tr><td><code>[sc-temperature]<\/code><\/td><td>Current temperature<\/td><td>72\u00b0F<\/td><\/tr><tr><td><code>[sc-humidity]<\/code><\/td><td>Current humidity<\/td><td>65%<\/td><\/tr><tr><td><code>[sc-wind-speed]<\/code><\/td><td>Wind speed<\/td><td>12 mph<\/td><\/tr><tr><td><code>[sc-wind-direction]<\/code><\/td><td>Wind direction<\/td><td>NW<\/td><\/tr><tr><td><code>[sc-pressure]<\/code><\/td><td>Barometric pressure<\/td><td>30.15 inHg<\/td><\/tr><tr><td><code>[sc-pressure-trend]<\/code><\/td><td>Pressure trend<\/td><td>Rising<\/td><\/tr><tr><td><code>[sc-uv-index]<\/code><\/td><td>UV index value<\/td><td>5.2<\/td><\/tr><tr><td><code>[sc-uv-desc]<\/code><\/td><td>UV index description<\/td><td>Moderate<\/td><\/tr><tr><td><code>[sc-uv-remarks]<\/code><\/td><td>UV safety remarks<\/td><td>Seek shade during midday&#8230;<\/td><\/tr><tr><td><code>[sc-air-quality]<\/code><\/td><td>Air quality index<\/td><td>45<\/td><\/tr><tr><td><code>[sc-air-quality-desc]<\/code><\/td><td>AQI description<\/td><td>Good<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Shortcode Attributes<\/h4>\n\n\n\n<p>All current condition shortcodes support optional attributes:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>units=\"true\/false\"<\/code> &#8211; Show or hide units (default: true)<\/li>\n\n\n\n<li><code>round=\"true\/false\"<\/code> &#8211; Round numbers (default: true for temperature\/humidity)<\/li>\n<\/ul>\n\n\n\n<p><strong>Examples:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#91;sc-temperature units=\"false\"] \u2192 displays: 72\n&#91;sc-temperature round=\"false\"] \u2192 displays: 72.3\u00b0F\n&#91;sc-humidity units=\"false\" round=\"false\"] \u2192 displays: 64.8\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">24-Hour Forecast<\/h3>\n\n\n\n<p>Display a complete 24-hour forecast table:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#91;scootercam-24]\n<\/code><\/pre>\n\n\n\n<p>This creates a responsive table with hourly weather data including conditions, temperature, wind, precipitation, visibility, and UV index.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">7-Day Forecast<\/h3>\n\n\n\n<p>Display a visual 7-day forecast widget:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#91;scootercam_7day]\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Customization<\/h4>\n\n\n\n<p>Override default display settings with shortcode attributes:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#91;scootercam_7day day_font_size=\"13px\" temp_high_size=\"18px\" icon_size=\"32\"]\n<\/code><\/pre>\n\n\n\n<p><strong>Available Attributes:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Attribute<\/th><th>Description<\/th><th>Default<\/th><\/tr><\/thead><tbody><tr><td><code>day_font_size<\/code><\/td><td>Font size for day names<\/td><td>11px<\/td><\/tr><tr><td><code>temp_high_size<\/code><\/td><td>Font size for high temperature<\/td><td>16px<\/td><\/tr><tr><td><code>temp_low_size<\/code><\/td><td>Font size for low temperature<\/td><td>12px<\/td><\/tr><tr><td><code>precip_size<\/code><\/td><td>Font size for precipitation %<\/td><td>11px<\/td><\/tr><tr><td><code>icon_size<\/code><\/td><td>Icon width\/height in pixels<\/td><td>28<\/td><\/tr><tr><td><code>card_padding<\/code><\/td><td>Padding inside each day card<\/td><td>6px 3px<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Examples<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Simple Current Conditions Display<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"current-weather\"&gt;\n    &lt;h3&gt;Current Conditions&lt;\/h3&gt;\n    &lt;p&gt;&lt;strong&gt;Temperature:&lt;\/strong&gt; &#91;sc-temperature]&lt;\/p&gt;\n    &lt;p&gt;&lt;strong&gt;Humidity:&lt;\/strong&gt; &#91;sc-humidity]&lt;\/p&gt;\n    &lt;p&gt;&lt;strong&gt;Wind:&lt;\/strong&gt; &#91;sc-wind-speed] from the &#91;sc-wind-direction]&lt;\/p&gt;\n    &lt;p&gt;&lt;strong&gt;Pressure:&lt;\/strong&gt; &#91;sc-pressure] and &#91;sc-pressure-trend]&lt;\/p&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">UV Information Widget<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"uv-widget\"&gt;\n    &lt;h3&gt;UV Index&lt;\/h3&gt;\n    &lt;p&gt;&lt;strong&gt;Current UV Index:&lt;\/strong&gt; &#91;sc-uv-index] (&#91;sc-uv-desc])&lt;\/p&gt;\n    &lt;div class=\"uv-advice\"&gt;<\/code><\/pre>\n\n\n<p>[sc-uv-remarks]<\/p>\n\n\n\n<p>&lt;\/div&gt; &lt;\/div&gt;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Complete Weather Page<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;h2&gt;Current Conditions&lt;\/h2&gt;\n&lt;p&gt;\n    Right now it's &#91;sc-temperature] with &#91;sc-humidity] humidity.\n    Winds are &#91;sc-wind-speed] from the &#91;sc-wind-direction].\n&lt;\/p&gt;\n\n&lt;h3&gt;UV Index&lt;\/h3&gt;\n&lt;p&gt;UV Index: &#91;sc-uv-index] (&#91;sc-uv-desc])&lt;\/p&gt;\n&lt;p&gt;&#91;sc-uv-remarks]&lt;\/p&gt;\n\n&lt;h2&gt;24-Hour Forecast&lt;\/h2&gt;<\/code><\/pre>\n\n\n<p>[scootercam-24]<\/p>\n\n\n\n<p>&lt;h2&gt;Week Ahead&lt;\/h2&gt;<\/p>\n\n\n<p>[scootercam_7day]<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Data Requirements<\/h2>\n\n\n\n<p>The plugin expects JSON files from Visual Crossing Weather API in the following formats:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">summary.json (Current Conditions)<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n  \"local\": {\n    \"beach\": {\n      \"temp_f\": 72.5,\n      \"humidity\": 65,\n      \"wind_mph\": 12.3,\n      \"wind_dir\": 315,\n      \"pressure_in\": 30.15,\n      \"pressure_trend\": 0.02,\n      \"uv_index\": 5.2\n    }\n  },\n  \"air_quality\": {\n    \"aqi\": 45\n  }\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">hourly.json (24-Hour Forecast)<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n  \"forecast\": &#91;\n    {\n      \"time\": \"3:00 PM\",\n      \"temp\": 75,\n      \"conditions\": \"Partly Cloudy\",\n      \"icon\": \"partly-cloudy-day\",\n      \"windSpeed\": 10,\n      \"windDir\": 270,\n      \"precipChance\": 10,\n      \"visibility\": 10.0,\n      \"uvindex\": 6\n    }\n  ]\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">daily.json (7-Day Forecast)<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n  \"forecast\": &#91;\n    {\n      \"date\": \"2025-01-15\",\n      \"tempHigh\": 78,\n      \"tempLow\": 62,\n      \"conditions\": \"Partly Cloudy\",\n      \"icon\": \"partly-cloudy-day\",\n      \"precipProb\": 20\n    }\n  ]\n}\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Styling<\/h2>\n\n\n\n<p>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:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>.w3-hide-small<\/code> &#8211; Hides content on screens &lt; 601px<\/li>\n<\/ul>\n\n\n\n<p>You can override styles in your theme&#8217;s CSS:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* Customize table styling *\/\n.w3-table.w3-striped tbody tr:nth-child(odd) {\n    background-color: #f9f9f9;\n}\n\n\/* Customize 7-day widget *\/\n.w3-card-2 {\n    box-shadow: 0 4px 10px rgba(0,0,0,0.2);\n}\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Migration from Previous Plugins<\/h2>\n\n\n\n<p>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:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>UV remarks are preserved<\/li>\n\n\n\n<li>7-day display settings are maintained<\/li>\n\n\n\n<li>All shortcodes remain backward compatible<\/li>\n<\/ol>\n\n\n\n<p><strong>To complete migration:<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Install and activate Scootercam Weather<\/li>\n\n\n\n<li>Verify your settings in <strong>Settings \u2192 Scootercam Weather<\/strong><\/li>\n\n\n\n<li>Deactivate the old individual plugins<\/li>\n\n\n\n<li>Test your pages to ensure everything works<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Troubleshooting<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">No Data Displayed<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Check file paths<\/strong>: Verify the paths in <strong>Settings \u2192 Scootercam Weather \u2192 Data Paths<\/strong><\/li>\n\n\n\n<li><strong>Check file permissions<\/strong>: Ensure JSON files are readable by the web server<\/li>\n\n\n\n<li><strong>Check JSON validity<\/strong>: Ensure your JSON files contain valid data<\/li>\n\n\n\n<li><strong>Check error logs<\/strong>: Look in your WordPress debug log for error messages<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Shortcodes Not Working<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Verify shortcode syntax<\/strong>: Ensure square brackets are used <code>[sc-temperature]<\/code> not <code>{sc-temperature}<\/code><\/li>\n\n\n\n<li><strong>Check plugin activation<\/strong>: Ensure the plugin is activated<\/li>\n\n\n\n<li><strong>Clear cache<\/strong>: Clear any caching plugins or browser cache<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Styling Issues<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Check W3.CSS loading<\/strong>: Verify W3.CSS is loading in your page source<\/li>\n\n\n\n<li><strong>Check theme conflicts<\/strong>: Some themes may override styling<\/li>\n\n\n\n<li><strong>Browser compatibility<\/strong>: Test in different browsers<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Support<\/h2>\n\n\n\n<p>For issues or questions:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Check the <strong>Overview<\/strong> tab in plugin settings for quick reference<\/li>\n\n\n\n<li>Review this README<\/li>\n\n\n\n<li>Check your WordPress error logs<\/li>\n\n\n\n<li>Contact: https:\/\/scootercam.com<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Credits<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Author<\/strong>: Scootercam<\/li>\n\n\n\n<li><strong>Version<\/strong>: 2.0.0<\/li>\n\n\n\n<li><strong>License<\/strong>: GPL v2 or later<\/li>\n\n\n\n<li><strong>Data Source<\/strong>: Visual Crossing Weather API<\/li>\n\n\n\n<li><strong>Styling<\/strong>: W3.CSS<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Changelog<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Version 2.0.0<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Consolidated three separate plugins into one unified plugin<\/li>\n\n\n\n<li>Added centralized data handling and caching<\/li>\n\n\n\n<li>Created unified settings interface with tabbed navigation<\/li>\n\n\n\n<li>Maintained backward compatibility with all existing shortcodes<\/li>\n\n\n\n<li>Automatic migration of settings from previous plugins<\/li>\n\n\n\n<li>Improved code organization and maintainability<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Previous Versions<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Individual plugins for Current Conditions, 24-Hour, and 7-Day forecasts<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>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: 24-Hour Forecast Display a detailed hourly forecast table showing: 7-Day Forecast Display a visual weekly forecast widget with: Installation Configuration Data Paths Navigate to &#8230; <a title=\"Scootercam Weather Plugin\" class=\"read-more\" href=\"https:\/\/scootercam.net\/blog\/scootercam-weather-plugin\/\" aria-label=\"Read more about Scootercam Weather Plugin\">Read more<\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[38],"tags":[],"class_list":["post-764","post","type-post","status-publish","format-standard","hentry","category-plugins"],"_links":{"self":[{"href":"https:\/\/scootercam.net\/blog\/wp-json\/wp\/v2\/posts\/764","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/scootercam.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/scootercam.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/scootercam.net\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/scootercam.net\/blog\/wp-json\/wp\/v2\/comments?post=764"}],"version-history":[{"count":2,"href":"https:\/\/scootercam.net\/blog\/wp-json\/wp\/v2\/posts\/764\/revisions"}],"predecessor-version":[{"id":766,"href":"https:\/\/scootercam.net\/blog\/wp-json\/wp\/v2\/posts\/764\/revisions\/766"}],"wp:attachment":[{"href":"https:\/\/scootercam.net\/blog\/wp-json\/wp\/v2\/media?parent=764"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/scootercam.net\/blog\/wp-json\/wp\/v2\/categories?post=764"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/scootercam.net\/blog\/wp-json\/wp\/v2\/tags?post=764"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}