Seth Smigelski

Under The Weather is a powerful yet simple plugin designed to display location-specific weather forecasts on your WordPress site. Featuring a dedicated “Under The Weather Forecast” block to add and customize weather widgets directly in the WordPress editor for a seamless workflow.
With performance in mind, Under The Weather uses a server-side caching system (WordPress Transients) to minimize API calls and ensure your site remains fast. Under The Weather is completely “vanilla” on the front-end, meaning it does not rely on jQuery or any other JavaScript frameworks. Built with modern security practices, including input validation, CSRF protection, and optional rate limiting to protect your site and API quota.
This plugin is ideal for travel blogs, outdoor activity sites, or any website that needs to display weather conditions for specific locations without the bloat of heavy, multi-dependency plugins.
Key Features:
<ul>
<li>Stylish Weather Widgets: Choose between default OpenWeather images, crisp Weather Icons font set, and two Animated SVG icon sets (Fill and Outline).</li>
<li>Easy to Use: Add weather widgets using the WordPress block editor or by placing a simple <code><div></code> with data attributes anywhere on your site.</li>
<li>Server-Side Caching: All API calls are cached on your server, dramatically reducing calls to the OpenWeather API and speeding up page loads for all users.</li>
<li>Smart Caching: In addition to a configurable cache duration, the plugin automatically resets the forecast after midnight in the location’s timezone, ensuring your visitors always see the current day’s weather.</li>
<li>Visual Performance Report: Monitor your site’s API usage with a bar chart that displays a 7-day history of cached requests versus new calls to the OpenWeather API – a clear look at how the caching system is working to keep your site fast and your API calls low.</li>
<li>Customizable Display: Use the main display to show either the current live weather or the high/low forecast for the current day, and set the number of days to include in the forecast ahead.</li>
<li>Imperial & Metric Units: Display weather in Fahrenheit/mph or Celsius/kph on a per-widget basis.</li>
<li>Extra Details: Optionally display “Feels Like” temperature and detailed wind information.</li>
<li>Weather Alerts: Display official severe weather alerts directly in the widget to keep visitors informed. </li>
<li>Sunrise & Sunset Times: Optionally show daily sunrise and sunset times, with 12-hour and 24-hour format options.</li>
<li>Color Picker: Customize the color of the “Weather Icons Font” set directly from the settings page.</li>
<li>Lightweight: Enqueues assets only when needed and does not rely on heavy JavaScript libraries.</li>
<li>Settings Page Coordinate Finder: An easy-to-use tool on the settings page retrieves coordinates by location name and generates ready-to-use widget <code><div></code> code.</li>
<li>Block Editor Coordinate Finder: Search for locations by name and automatically fill in coordinates without ever leaving the block editor.</li>
</ul>
<h3>Usage</h3>
The Under The Weather plugin offers two ways to add a weather forecast: using the block editor or manually placing a <code><div></code>.
Using the Block Editor (Recommended)
<ol>
<li>Open the post or page where you want to display the weather.</li>
<li>Click the block inserter icon (+) to add a new block.</li>
<li>Search for “Under The Weather Forecast” and add the block.</li>
<li>Configure your location using either:
<ul>
<li>Manual entry of coordinates in the block settings sidebar</li>
<li>The built-in coordinate finder that searches by location name and fills in the coordinates for you</li>
</ul>
</li>
<li>Choose your preferred units (Imperial/Fahrenheit or Metric/Celsius)</li>
<li>Publish or update your post – the weather will display automatically!</li>
</ol>
Manual Placement (Classic Editor & Themes)
To display the weather widget on a post, page, or in a template file, add a simple <code><div></code> element with the class <code>weather-widget</code> and the required data attributes.
<ul>
<li><code>data-lat</code>: The latitude for the forecast.</li>
<li><code>data-lon</code>: The longitude for the forecast.</li>
<li><code>data-location-name</code>: The city or location name you want to display as the title of the widget. (Beyond its display purpose, the ‘data-location-name’ is also used to create the shared cache key).</li>
<li><code>data-unit</code> (optional): The unit system for temperature and wind speed. Accepts <code>metric</code> or <code>imperial</code>. The default unit is <code>imperial</code> if not provided.</li>
</ul>
Examples:
<pre><code> <div class="weather-widget" 
 data-lat="34.1186" 
 data-lon="-118.3004" 
 data-location-name="Los Angeles, California">
 </div>
</code></pre>
To show the weather for a location in Celsius, you would add <code>data-unit="metric"</code>:
<pre><code> <div class="weather-widget" 
 data-lat="48.8566" 
 data-lon="2.3522" 
 data-location-name="Paris, France"
 data-unit="metric">
 </div>
</code></pre>
The plugin’s JavaScript will automatically find this element and populate it with the forecast.
Using the Shortcode (Classic Editor & Widgets)
You can also display the weather by using the <code>[under_the_weather]</code> shortcode. This is ideal for the Classic Editor, text widgets, or other page builders.
Available attributes:
<ul>
<li><code>lat</code>: (Required) The latitude for the forecast.</li>
<li><code>lon</code>: (Required) The longitude for the forecast.</li>
<li><code>location_name</code>: (Required) The name to display for the location.</li>
<li><code>unit</code>: (Optional) The unit system. Accepts <code>metric</code> or <code>imperial</code>. Defaults to <code>imperial</code>.</li>
</ul>
Example: <code>[under_the_weather lat="48.8566" lon="2.3522" location_name="Paris, France" unit="metric"]</code>
<h3>Configuration</h3>
Before you begin, go to <a href="openweathermap.org" rel="nofollow ugc">https://home.openweathermap.org/</a> and sign up for an API key and register for the One Call API 3.0 subscription. Paste your API key into the Under the Weather Settings Page.
API & Cache
Cache Expiration Time: 
Use the slider to set the maximum time weather data is stored before fetching a new forecast, from 30 minutes to 8 hours.
The plugin also features a smart caching system that automatically ensures the cache expires after midnight in the location’s local timezone. This prevents showing a stale forecast from the previous day, regardless of your slider setting.
For displaying live conditions (using the Primary Display or Extra Details options), a shorter cache time of 1 or 2 hours is recommended. 
For displaying only the daily high/low, a longer cache time of 3 or 8 hours is effective at reducing API calls.
Widget Display & Style
Icon & Style Set: 
Pick the style that suits you best. Choose between four weather icon options: 
* Recognizable Default images (PNGs) provided by OpenWeather. 
* Sharp, modern Weather Icons fonts created by Erik Flowers. 
* Two Animated SVG icon sets (Fill and Outline) by Bas Milius. 
Note: Selecting the icon font will load an additional small CSS file.
Icon Font Color: 
Use the color picker to customize the color of the “Weather Icons Font” set to perfectly match your theme. This setting only has a visible effect when the “Weather Icons Font” style is selected (it does not impact PNGs or SVGs). If left at the default, the icons will use the gray color specified in the plugin’s stylesheet.
Primary Display: 
Select whether the main display of the widget shows the Current live temperature or Today’s Forecast (the high and low for the day).
Number of Forecast Days: 
Adjust the number of days shown in the extended forecast row, from 2 to 6 days.
Extra Details: 
Selecting this option will display ‘Feels Like’ and wind (direction and speed) information beneath the primary display. This setting adds nuance to the current weather conditions display.
Sunrise & Sunset: This setting allows you to display the local sunrise and sunset times for the location, which is useful for planning outdoor activities. Choose to show the times in a 12-hour (e.g., 6:30 AM) or 24-hour (e.g., 18:30) format.
Weather Alerts: When enabled, the widget will display any active severe weather alerts (e.g., thunderstorm warnings, flood advisories) issued by official authorities for the specified location. This provides critical, at-a-glance information for your visitors.
Display Timestamp: 
Indicates the time elapsed since the weather data was last updated from the source. This option helps readers see how recently the weather widget obtained its information.
Display Unit Symbol: 
Adds the unit symbol (F or C) next to the main temperature. This option allows you to select whether or not the widget should include the temperature unit symbol in the primary temperature display.
Advanced Settings 
Enable Cache: You can uncheck this box, if you would like to use this plugin without the benefit of the caching function.
Enable Rate Limiting: Check this box to protect your site against excessive API requests from a single IP address. You can set the maximum number of requests per hour (default is 100). This helps prevent malicious traffic from exhausting your API quota.
Asset Loading: For the plugin to function correctly, the Load Plugin CSS and Load Plugin JavaScript boxes should normally remain checked. However, you can uncheck them if you prefer to include the plugin’s CSS and JS files as part of your theme’s own optimized assets.
If you uncheck Load Plugin JavaScript, you can load the Under The Weather scripts manually on select pages by adding the following template tag to your theme files (e.g., footer.php):
<pre><code> <?php
 if ( function_exists( 'under_the_weather_load_scripts_manually' ) ) {
 under_the_weather_load_scripts_manually(); 
 } 
 ?>
</code></pre>
For most users, simply leaving these boxes checked is the best way to use the weather widget.
<h3>Coordinate Finder</h3>
Don’t know the latitude and longitude for your desired location? No problem. The Under The Weather plugin will find coordinates for you.
<h4>In the WordPress Block Editor</h4>
<ol>
<li>Add an “Under The Weather Forecast” block to your post or page. </li>
<li>Open the Block Settings</li>
<li>Click the “Find Coordinates by Name” button.</li>
<li>Type in the name of your location.</li>
<li>Press “Search.”</li>
<li>When search results appear, click on your desired location.</li>
<li>The location’s coordinates will be automatically entered into the latitude and longitude settings for the weather forecast.</li>
</ol>
<h4>In the Plugin Settings Page</h4>
<ol>
<li>Navigate to Settings > Under The Weather and click on the Coordinate Finder tab.</li>
<li>Type a location name into the search box (e.g., “Los Angeles, CA”).</li>
<li>Click the “Find Coordinates” button.</li>
<li>The tool will display the generated <code><div></code> with the correct coordinates and location name.</li>
<li>Use the “Copy Code” button to copy the ready-to-use widget HTML and paste it into a post, page, or widget.</li>
</ol>
The tool automatically saves a history of your last 5 searches, which persists between sessions. You can easily copy code from previous searches without having to look them up again.
<h3>Performance Report</h3>
The Under The Weather plugin includes a powerful Performance Report tab in the settings page (Settings > Under The Weather > Performance Report) to give you clear insight into the plugin’s efficiency and API usage. The main feature is a 7-day bar chart that provides a visual comparison of cached hits versus new calls to the OpenWeather API.
The performance report demonstrates how the caching system is working to reduce external requests and keep your site fast. Use this report to fine-tune your Cache Expiration Time and observe the impact on your API call rate.
The report also includes a status indicator that shows whether the optional Rate Limiting feature is currently active. If rate limiting is enabled and requests are being blocked, the raw data table at the bottom of the report will log these events. This can help you identify unusual traffic patterns or potential misuse of your API key.
<h3>Credits</h3>
<ul>
<li>Weather Data: OpenWeather</li>
<li>Weather Icon Font: Weather Icons by Erik Flowers</li>
<li>Animated Weather Icons: Meteocons by Bas Milius</li>
<li>Geocoding & Map Data: Data © OpenStreetMap contributors</li>
<li>Block Icons: Phosphor</li>
</ul>
<h3>External Services</h3>
<ul>
<li>
OpenWeatherMap API: This plugin connects to the <a href="https://openweathermap.org/api" rel="nofollow ugc">OpenWeatherMap API</a> to retrieve weather forecast data. To provide weather information, the following data is sent to the service:
</li>
<li>
Location Coordinates: The latitude and longitude provided in the widget settings are sent to fetch the weather for that specific location.
</li>
<li>API Key: Your OpenWeatherMap API key is sent to authenticate the request.</li>
</ul>
Here are the links to their terms of service and privacy policy: 
* Terms of Service: <a href="https://openweather.co.uk/storage/app/media/Terms/Openweather_terms_and_conditions_of_sale.pdf" rel="nofollow ugc">https://openweather.co.uk/storage/app/media/Terms/Openweather_terms_and_conditions_of_sale.pdf</a> 
* Privacy Policy: <a href="https://openweather.co.uk/privacy-policy" rel="nofollow ugc">https://openweather.co.uk/privacy-policy</a>
<ul>
<li>Nominatim (OpenStreetMap) API: The Coordinate Finder tool sends the location name entered by the administrator to the Nominatim geocoding service to retrieve latitude and longitude coordinates.</li>
</ul>
Here is the link to their privacy policy: 
* Privacy Policy: <a href="https://osmfoundation.org/wiki/Privacy_Policy" rel="nofollow ugc">https://osmfoundation.org/wiki/Privacy_Policy</a>

Under The Weather

A lightweight and customizable weather widget, powered by the OpenWeather API, that caches and presents weather data with multiple style options.

François Yerg

Transform your website with beautiful weather displays that your visitors will love!
FYP Weather is a professional WordPress plugin that brings stunning, real-time weather information to your website. With its modern gradient design, smooth animations, and responsive layout, this plugin delivers both functionality and visual appeal.
Built for performance and ease of use, FYP Weather features intelligent caching through WordPress transients, automatic language detection supporting 30+ languages, and a comprehensive admin interface that makes configuration simple and straightforward.
Why Choose FYP Weather?
🌟 Beautiful Visual Design – Modern gradient backgrounds with weather icons and elegant typography 
🚀 Performance Optimized – Built-in transient caching system (1-hour cache) reduces API calls 
🌍 Multilingual Support – Automatic language detection for 30+ languages based on WordPress locale 
📱 Fully Responsive – Mobile-first design that works perfectly on all devices 
⚙️ Easy Configuration – Comprehensive admin interface under FYPlugins → Weather 
🎨 Theme Integration – Works seamlessly with any WordPress theme 
🔧 Professional Code – Clean, secure, and following WordPress coding standards
Key Features:
<ul>
<li>🎨 Modern Weather Widget: Gradient backgrounds, weather icons from OpenWeatherMap, and smooth CSS animations</li>
<li>⚡ Smart Caching System: 1-hour WordPress transient caching improves performance and reduces API usage</li>
<li>🌐 True Multilingual Support: Automatic language detection for weather descriptions in 30+ languages</li>
<li>📊 Complete Weather Data: Temperature, weather description, humidity, wind speed, and weather icons</li>
<li>🎛️ Flexible Display Options: Show/hide weather elements with customizable labels via admin settings</li>
<li>📐 Multiple Unit Systems: Metric (°C), Imperial (°F), and Standard (Kelvin) temperature units</li>
<li>🎯 Powerful Shortcode: <code>[fyplugins_weather]</code> with extensive customization parameters</li>
<li>📱 Responsive Design: Mobile-optimized layout that adapts to any screen size</li>
<li>⚙️ Professional Admin Interface: Clean settings panel with API configuration and default options</li>
<li>🔒 Secure & Reliable: Proper error handling, data validation, and secure API integration</li>
<li>** CSS Customization:** Additional CSS classes and built-in styling options</li>
<li>** ️ Clean Uninstall:** Properly removes all options and cached data when uninstalled</li>
</ul>
This plugin is part of the FYPlugins ecosystem, designed to provide high-quality WordPress solutions with exceptional performance and user experience.
<h3>Usage</h3>
🚀 Quick Start:
<ol>
<li>Get your FREE API key from <a href="https://openweathermap.org/appid" rel="nofollow ugc">OpenWeatherMap</a> (1,000 free calls/day)</li>
<li>Configure the plugin at WordPress Dashboard → FYPlugins → Weather</li>
<li>Add weather anywhere using the <code>[fyplugins_weather]</code> shortcode</li>
</ol>
📋 Basic Examples: 
 <code>[fyplugins_weather] 
[fyplugins_weather city="Paris, France" units="metric"] 
[fyplugins_weather city="New York, NY" units="imperial" show_humidity="false"]</code>
🎨 Styling Examples: 
 <code>[fyplugins_weather class="dark"] 
[fyplugins_weather class="light custom-weather"]</code>
<h3>Shortcode Parameters</h3>
🌡️ Weather Shortcode – <code>[fyplugins_weather]</code>
<pre><code>city string (default: Empty or Set in settings) City name for weather data (e.g., "London, UK")
api_key string (default: Empty or Set in settings) Your OpenWeatherMap API key
units string (default: metric or Set in settings) Temperature units: `metric` (°C), `imperial` (°F), `standard` (K)
language string (default: Auto-detected) Language code for weather descriptions
show_description boolean (default: true or Set in settings) Display weather description
show_humidity boolean (default: true or Set in settings) Display humidity information
humidity_label string (default: "Humidity:" or Set in settings) Custom label for humidity display
show_wind boolean (default: true or Set in settings) Display wind speed information
wind_label string (default: "Wind Speed:" or Set in settings) Custom label for wind speed display
class string | Empty (default: Empty or Set in settings) Additional CSS classes for styling
</code></pre>
📝 Advanced Examples:
<pre><code>// Different cities with custom styling
[fyplugins_weather city="Tokyo, Japan" class="dark"]
[fyplugins_weather city="Sydney, Australia" units="imperial" class="light"]

// Minimal display
[fyplugins_weather show_description="false" show_humidity="false" show_wind="false"]

// Custom labels in different languages
[fyplugins_weather humidity_label="Humidité:" wind_label="Vent:" language="fr"]

// Multiple weather widgets on same page
[fyplugins_weather city="London, UK" class="weather-london"]
[fyplugins_weather city="Paris, France" class="weather-paris"]
</code></pre>
🌍 Supported Languages: 
English, French, German, Spanish, Italian, Portuguese, Russian, Chinese (Simplified & Traditional), Japanese, Korean, Dutch, Swedish, Danish, Norwegian, Finnish, Polish, Czech, Slovak, Hungarian, Romanian, Bulgarian, Croatian, Slovenian, Estonian, Latvian, Lithuanian, Ukrainian, Greek, Turkish, Arabic, Hebrew, Hindi, Thai, Vietnamese
Language support is based on the WordPress locale and OpenWeatherMap API capabilities.
<h3>External Services</h3>
🌐 OpenWeatherMap API Integration
This plugin connects to the OpenWeatherMap API to retrieve current weather information. This external service is essential for providing accurate, real-time weather data.
🔒 Privacy & Data Protection: 
– No user data collection: The plugin only sends the city name, your API key, WordPress language setting, and units preference 
– No personal information: No user IPs, emails, or browsing data is transmitted 
– Secure connections: All API calls use HTTPS encryption 
– Local caching: Weather data is cached locally using WordPress transients for 1 hour
📋 Service Details: 
– Provider: OpenWeatherMap (<a href="https://openweathermap.org/" rel="nofollow ugc">openweathermap.org</a>) 
– Terms of Service: <a href="https://openweathermap.org/terms" rel="nofollow ugc">OpenWeather Terms & Conditions</a> 
– Privacy Policy: <a href="https://openweather.co.uk/privacy-policy" rel="nofollow ugc">OpenWeather Privacy Policy</a> 
– Rate Limits: Free tier provides 1,000 API calls per day
⚙️ What Data is Sent: 
– City name (as specified in shortcode or settings) 
– API key (your personal OpenWeatherMap key) 
– Language code (WordPress locale for localized weather descriptions) 
– Temperature units preference (metric/imperial/standard)
<h3>Roadmap & Future Enhancements</h3>
🚀 Version 1.1 – Enhanced Caching & Performance 
* Configurable cache duration options in admin settings 
* Background API refresh to eliminate user-facing delays 
* Database optimization for better transient management
🌤️ Version 1.2 – Extended Weather Features 
* 5-day weather forecast display option 
* Additional weather parameters (feels like temperature, pressure) 
* Weather alerts and warnings integration
🎨 Version 1.3 – Design & Customization 
* More built-in theme variants and color schemes 
* Custom weather icon sets 
* Enhanced CSS customization options in admin
🔧 Version 1.4 – WordPress Integration 
* Gutenberg block for visual editor integration 
* WordPress Widget support for sidebar placement 
* Enhanced shortcode builder with live preview
🌍 Version 1.5 – Advanced Features 
* Geolocation-based automatic city detection 
* Multiple weather data provider support 
* Air quality index integration
💡 Have Feature Ideas? 
We welcome feedback and feature requests! Contact us through the <a href="https://wordpress.org/support/plugin/fyp-weather/" rel="ugc">WordPress support forum</a> or visit <a href="https://francoisyerg.net" rel="nofollow ugc">francoisyerg.net</a> for direct contact.

FYP Weather

A beautiful, lightweight weather plugin with stunning visual design, smart caching, and comprehensive multilingual support.

Under The Weather vs FYP Weather