Under The Weather displays location-specific weather forecasts on your WordPress site. It includes a dedicated “Under The Weather Forecast” block to add and customize weather widgets directly in the WordPress editor.

Under The Weather is ideal for travel blogs, outdoor activity sites, or any website that needs to showcase stylish forecasts without the bloat of heavy, multi-dependency plugins.

Built for Performance, Rain or Shine

Works with the highly reliable OpenWeather One Call API 4.0 and 3.0
Uses server-side caching to minimize API calls and maximize speed
Employs modern security practices, including input validation, CSRF protection, and optional rate limiting to protect your site and API quota
JavaScript is completely “vanilla” on the front-end, meaning it does not rely on jQuery or any other JS frameworks

Key Features

Easy Integration: Add weather widgets in the WordPress editor by using a dedicated weather block, an [under_the_weather] shortcode, or by placing a simple <div> with data attributes anywhere on your site.
Beautiful Display Options: Choose from 4 different sets of forecast visuals:
- Default OpenWeather images
- A Crisp Weather Icons font
- 2 Animated SVG icon sets
Styled to Match Your Site: Seamlessly fit the widget into any site design using the Light Mode or Dark Mode and icon font color picker.
Fully Customizable Layouts: Choose whether the widget’s main focal point highlights the live current conditions or today’s high and low temperatures. Build out the widget to meet your goals, from a compact day-of weather widget to a full weather hub, displaying:
- Extended forecasts
- “Feels like” temperatures
- Wind speeds and directions
- Weather alerts
- Sunrise & sunset times
Visual Performance Report: Monitor API usage with a 7-day bar chart displaying 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.
Intelligent, Adjustable Caching: All API calls are cached on your server using WordPress transients, significantly reducing calls to the OpenWeather API and speeding up page loads for visitors. Plus, forecasts with the same location name automatically share the same cached data across your entire site, rather than requesting new data for each widget.
Fast Weather Location Lookup: An easy-to-use Coordinate Finder in the settings page and the Block Editor retrieves coordinates by location name worldwide. The tool generates ready-to-use widget <div> code from the settings page and automatically fills coordinates in the block editor.
Fahrenheit & Celsius Forecasts with Interactive Unit Toggle: Display weather in Imperial (°F/mph) or Metric (°C/kph) on a per-widget basis. Optionally, let visitors switch between units on the fly with a zero-latency frontend toggle that remembers their choice for future visits.

Performance First: Built for Core Web Vitals

Page Speed Optimized: Unlike other popular weather plugins that load hundreds of kilobytes of external libraries, Under The Weather is engineered specifically for speed and SEO, using native script deferral, smart font preloading, conditional asset enqueues, and optional async CSS loading.
Zero Dependencies: While many weather plugins require your site to load heavy external libraries like jQuery, Vue.js, or Swiper.js just to show a simple forecast, Under The Weather requires exactly 1 script request, written in pure, vanilla JavaScript. This guarantees faster loading and zero risk of library conflicts.
Ultra-Lightweight Footprint: At roughly 10 KB, the JavaScript payload is up to 25x smaller than many other weather widgets for WordPress, without sacrificing features.
Zero Layout Shift (CLS): Using an intelligent, dynamic skeleton loading UI and modern CSS containment, the widget claims its vertical space immediately, preventing the page from “jumping” when the weather data arrives and eliminating Cumulative Layout Shift (CLS) issues detrimental to Core Web Vitals.
Server-Side Caching: API requests to OpenWeather are handled safely by your server, not the visitor’s browser. Data is securely cached in WordPress transients to deliver fast results, reduce API calls, and protect your OpenWeather quota.

Usage

The Under The Weather plugin offers three ways to add a weather forecast: using the block editor or manually placing a <div> or shortcode.

Using the Block Editor (Recommended)

Open the post or page where you want to display the weather.
Click the block inserter icon (+) to add a new block.
Search for “Under The Weather Forecast” and add the block.
Configure your location using either:
- Manual entry of coordinates in the block settings sidebar
- The built-in coordinate finder that searches by location name and fills in the coordinates for you
Choose your preferred units (Imperial/Fahrenheit or Metric/Celsius)
Publish or update your post – the weather will display automatically!

Manual Placement (Classic Editor & Themes)

To display the weather widget on a post, page, or in a template file, add a simple <div> element with the class weather-widget and the required data attributes.

data-lat: The latitude for the forecast.
data-lon: The longitude for the forecast.
data-location-name: The city or location name you want to display as the title of the widget. (Beyond its display purpose, ‘data-location-name’ serves as a shared cache key.)
data-unit (optional): The unit system for temperature and wind speed. Accepts metric or imperial. The default unit is imperial if not provided.

Examples:

        <div class="weather-widget" 
           data-lat="34.1186" 
           data-lon="-118.3004" 
           data-location-name="Los Angeles, California">
        </div>

To show the weather for a location in Celsius, you would add data-unit="metric":

        <div class="weather-widget" 
           data-lat="48.8566" 
           data-lon="2.3522" 
           data-location-name="Paris, France"
           data-unit="metric">
        </div>

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 [under_the_weather] shortcode. This is ideal for the Classic Editor, text widgets, or other page builders.

Available attributes:

lat: (Required) The latitude for the forecast.
lon: (Required) The longitude for the forecast.
location_name: (Required) The name to display for the location.
unit: (Optional) The unit system. Accepts metric or imperial. Defaults to imperial.

Example: [under_the_weather lat="48.8566" lon="2.3522" location_name="Paris, France" unit="metric"]

Configuration

Before you begin, go to openweathermap.org and sign up for an API key. You must register for the “One Call by Call” API subscription. Paste your API key into the Under the Weather Settings Page.

API & Cache

API Version Selection:
OpenWeather currently supports two versions of its One Call API.

One Call 3.0: Uses a single API call to retrieve all weather data, resulting in fewer API calls.
One Call 4.0: Uses a modular structure requiring separate API calls for current conditions, daily forecasts, and weather alerts.

Cache Expiration Time:
Use the slider to set the maximum time weather data is stored before fetching a new forecast. When showing live conditions, consider a shorter cache time of 30 minutes to 2 hours. For daily high/low forecasts, a longer cache time of 3 or 8 hours greatly reduces API calls.

The smart caching system automatically expires the cache after midnight in the location’s local time zone, ensuring your visitors always see the current day’s weather, regardless of your slider setting.

Widget Display & Style

Tailor the widget to perfectly match your website’s aesthetic and your users’ needs:

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.

Icon Font Color:
Apply a custom color to the “Weather Icons Font” with the Color Picker for an individualized integration. The selected color also appears when a visitor uses the units toggle, when that option is enabled. If left at the default, the icons will use the gray color specified in the plugin’s stylesheet.

Widget Mode:
The weather widgets are designed to look good on light or dark backgrounds. Select Light Mode when displaying weather widgets on white and light backgrounds. Switch to Dark Mode to display weather widgets on black or dark backgrounds.

Primary Display:
Select between showing the Current live temperature or Today’s Forecast (the high and low for the day) as the focal point of the widget.

Number of Forecast Days:
Adjust the number of days shown in the extended forecast row from 2 to 6. When set to 0 days, the widget’s forecast area disappears, leaving a compact widget showing the current day’s weather.

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 displays the location’s sunrise and sunset times, useful for planning outdoor activities. Choose to show the times in a 12-hour or 24-hour format.

Weather Alerts:
When enabled, the widget displays active severe weather alerts, like thunderstorm warnings and flood advisories, issued by official authorities for the specified location, providing critical, at-a-glance information for your visitors.

Timestamp:
Display the time elapsed since the weather data was last updated from the source, so readers can see how recently the widget obtained its information.

Unit Symbol:
This option lets you choose whether the widget includes the temperature unit symbol (F or C) next to the primary temperature display.

Unit Toggle Switch:
Display an interactive toggle in the corner of the widget that allows visitors to choose between viewing the forecast in °F or °C and have that preference saved.

Advanced Settings
Enable Cache:
Only uncheck this box if you want to use this plugin without the benefit of caching.

Enable Rate Limiting:
Check this box to protect your site against excessive API requests from a single IP address. Set the maximum number of requests per hour (default is 100) to 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 in your theme’s optimized assets.

Developers who uncheck Load Plugin JavaScript can load the Under The Weather scripts manually on select pages. For most users, simply leaving these boxes checked is the best way to use the weather widget.

Async CSS Loading:
Enable this option to reduce render-blocking resources for faster initial page loading.
* Leave this unchecked if your weather widget is located “above the fold” (near the top of the page) to prevent layout shifting or a flash of unstyled content.
* When async loading is enabled, you may add a “min-height” rule for “.weather-widget” to your theme’s custom CSS to reserve the widget’s vertical space while the stylesheet loads. Example: .weather-widget{min-height:300px}

Shimmer While Loading:
This visual placeholder keeps the layout stable before the weather data arrives. Uncheck this box to instead display a clear, transparent widget area before the weather data arrives.

Coordinate Finder

Don’t know the latitude and longitude for your desired location? No problem. The Under The Weather plugin will find coordinates for you.

In the WordPress Block Editor

Add an “Under The Weather Forecast” block to your post or page.
Open the Block Settings
Click the “Find Coordinates by Name” button.
Type in the name of your location.
Press “Search.”
When search results appear, click on your desired location.
The location’s coordinates will be automatically entered into the latitude and longitude settings for the weather forecast.

In the Plugin Settings Page

Navigate to Settings > Under The Weather, then click on the Coordinate Finder tab.
Type a location name into the search box (e.g., “Los Angeles, CA”).
Click the “Find Coordinates” button.
The tool will display the generated <div> with the correct coordinates and location name.
Use the “Copy Code” button to copy the ready-to-use widget HTML and paste it into a post, page, or widget.

The tool automatically saves a history of your last 5 searches, so you can easily copy code from previous searches without looking them up again.

Performance Report

The Under The Weather plugin includes a Performance Report tab on the settings page (Settings > Under The Weather > Performance Report) to provide clear insight into the plugin’s efficiency and API usage.

Average Daily Usage: A daily average pie chart provides a snapshot of how frequently weather data is served from the cache versus making new calls to the OpenWeatherMap One Call API (which offers a free tier of 1,000 API calls per day).
Last 7 Days of Activity: A 7-day bar chart that displays a more detailed comparison of cached hits versus new calls to the OpenWeather API. This chart includes today’s usage, which isn’t factored into the daily average.

The performance report shows how caching reduces external requests and keeps 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 showing whether the optional Rate Limiting feature is 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.

Credits

Weather Data: OpenWeather
Weather Icon Font: Weather Icons by Erik Flowers
Animated Weather Icons: Meteocons by Bas Milius
Block Icons: Phosphor

External Services

OpenWeatherMap API: This plugin connects to the OpenWeatherMap API to retrieve weather forecast data. To provide weather information, the following data is sent to the service:
Location Coordinates: The latitude and longitude provided in the widget settings are sent to fetch the weather for that specific location.
API Key: Your OpenWeatherMap API key is sent to authenticate the request.

Here are the links to their terms of service and privacy policy:
* Terms of Service: https://openweather.co.uk/storage/app/media/Terms/Openweather_terms_and_conditions_of_sale.pdf
* Privacy Policy: https://openweather.co.uk/privacy-policy

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.

Here is the link to their privacy policy:
* Privacy Policy: https://osmfoundation.org/wiki/Privacy_Policy

Privacy & Data

Under The Weather is built to respect user privacy and does not track or collect personally identifiable information.

Local Storage: If the “Unit Toggle Switch” is enabled, the widget uses the browser’s Local Storage to save the visitor’s preferred temperature scale (°F or °C). This is strictly a functional UI preference that lets the widget remember their choice as they navigate between pages. It does not track personal data.
No Tracking Cookies: The plugin does not set any analytics, tracking, or marketing cookies.
IP Addresses: If “Rate Limiting” is enabled, IP addresses are temporarily processed on your own server to prevent API abuse, but this data is not sent to external third parties for tracking.

Under The Weather

About this plugin