4wpdev

Anatoliy Dovgun

Show live weather on any page or template with a native Gutenberg block—no iframe embeds and no API keys in the browser.
4WP Weather fetches current conditions through WordPress (REST + server cache), stores your OpenWeatherMap key safely in the admin, and renders a clean widget you can style with block colors, typography, and spacing.
A plugin by <a href="https://4wp.dev/" rel="nofollow ugc">4wp.dev</a>.
<h4>Perfect for</h4>
<ul>
<li>A sidebar or footer weather snippet with temperature, humidity, wind, and more</li>
<li>Landing pages that need local conditions without a third-party widget</li>
<li>Block themes and Full Site Editing layouts</li>
<li>Editors who want icon + text labels per field, editable inline in the block</li>
</ul>
<h4>How it works</h4>
<ol>
<li>Install and activate 4WP Weather.</li>
<li>Open 4WP Weather in the admin menu → Providers, add your OpenWeatherMap API key, and save.</li>
<li>Insert the 4WP Weather block in the editor.</li>
<li>Pick a widget template (Small, Compact, or Advanced) and style (Dark or White).</li>
<li>Choose which parameters to show and how each label appears (icon, icon + text, or text).</li>
<li>Publish—the block loads data on the front end via your server.</li>
</ol>
<h4>Key features</h4>
<ul>
<li>Gutenberg block with block supports: background/text colors, typography, spacing, border, wide/full align</li>
<li>Widget templates — Small (location + temperature), Compact (core fields), Advanced (all nine parameters)</li>
<li>Per-field presentation — built-in weather icons, icon + text, text-only, or custom SVG from the Media Library</li>
<li>Editable labels — customize parameter names inline in the editor (Text and Icon + text modes)</li>
<li>OpenWeatherMap provider (live); additional providers registered for future releases</li>
<li>Visitor location — optional browser geolocation (automatic or button prompt) with coordinate fallback</li>
<li>Location search — optional city/place search on the front end</li>
<li>React admin — Providers, Settings (default template), and Documentation tabs</li>
<li>Server-side requests with transient cache; API key never exposed to visitors</li>
<li>Optional JSON-LD structured data (<code>Observation</code>) for SEO</li>
<li>Optional admin bar weather preview for administrators</li>
<li>WP-CLI: <code>wp forwp-weather flush-cache</code></li>
</ul>
<h4>Privacy</h4>
The API key is stored as a WordPress option and is not exposed to front-end HTML or JavaScript. The block calls <code>forwp-weather/v1/weather</code>; PHP performs the remote request. See External services below.
4WP is our project brand; the letters “WP” appear only as part of that brand name, not as a reference to WordPress. This plugin is not affiliated with, endorsed, or sponsored by WordPress.
Source code: <a href="https://github.com/4wpdev/4wp-weather" rel="nofollow ugc">github.com/4wpdev/4wp-weather</a>
<h3>External services</h3>
This plugin connects to the OpenWeatherMap Current Weather API to fetch conditions shown in the weather block, admin live preview, and optional JSON-LD.
When a visitor loads a page with the block (or when an administrator uses the live preview), WordPress sends a server-side HTTPS request to <code>https://api.openweathermap.org/data/2.5/weather</code>. The request includes:
<ul>
<li>Your stored API key (<code>appid</code> query parameter), configured in the admin.</li>
<li>Geographic coordinates (<code>lat</code>, <code>lon</code>) from block settings, browser geolocation when the visitor allows it, or a default location you configure.</li>
<li>Or a city name (<code>q</code>) when location search is used.</li>
</ul>
This plugin does not send visitor IP addresses in the API request. OpenWeatherMap may log requests according to their own policies. Responses are cached on your server (WordPress transients) to reduce repeat API calls.
This service is provided by OpenWeather Ltd. (OpenWeatherMap):
<ul>
<li>Terms of use: https://openweathermap.org/terms</li>
<li>Privacy policy: https://openweather.co.uk/privacy-policy</li>
</ul>

4WP Weather

Add a customizable Gutenberg weather widget to WordPress—live conditions, icon labels, and secure server-side API calls.

ajdethemes

This plugin allows you to show the current weather info for any location. You can show the temperature in Celsius or Fahrenheit units, show wind speed, max & min temperature, weather description, date and weather icon. 
You can use this plugin as a block (with a name “Weather Widget WP”) in the WordPress block editor in a page, post or as a widget in a sidebar, or as a shortcode – example <code>[weather_widget_wp_location city="London" title="London, UK"]</code>.
<h4>Customization</h4>
You can customize the weather widget however you like. The widget have two styles: minimal & expanded that show different amount of data.
When using the custom block, click the gear icon (top right) to show the settings, under Customize Style there numerous settings to style the widget in order to match your website style.
<h4>API Key</h4>
The plugin gets the weather data from Open Weather API, so you will need to have account & API key to use it. If you don’t have an account follow the instructions in the plugin settings page to setup an account.
Also, keep in mind that newly created API keys will need ~ 15 min to be activated and show data, so you might see an API error in meantime.
<h4>Caching</h4>
You can utilize the caching feature from the plugin settings page, to save (cache) the weather data for number of hours, so you don’t exceed the you API free tier rate too fast. 
This is enable by default, so the weather data on the front-end might not match the back-end editor (this is because of the caching). 
Setting the cache setting to 0 will disable the caching – not recommended.
<h4>Shortcode [weather_widget_wp_location]</h4>
Recommended use of this plugin is as a block via the WordPress block editor – for ease of use, but you can use the plugin also as a shortcode, bellow are all the shortcode attributes explained.
Example: <code>[weather_widget_wp_location city="Santorini" title="Santorini, Greece" style="style-minimal" units="F" desc=1 icon=0]</code>
<ul>
<li><code>style</code> – two options: ‘style-expanded’ or ‘style-minimal’, e.g. <code>style="style-minimal"</code>;</li>
<li><code>city</code> – location for which the weather data will be shown e.g <code>city="london"</code>;</li>
<li><code>title</code> – the title inside the widget e.g. <code>title="London, UK"</code>;</li>
<li><code>units</code> – temperature units, two options Celsius or Fahrenheit, e.g. <code>units="C"</code>;</li>
<li><code>desc</code> – show short weather description (1 – enable, 0 – disable), e.g. <code>desc=0</code>;</li>
<li><code>icon</code> – show weather icon (1 – enable, 0 – disable), e.g. icon=0;</li>
<li><code>date</code> – show the current date (1 – enable, 0 – disable), e.g. <code>date=0</code>;</li>
<li><code>wind</code> – show the wind speed (1 – enable, 0 – disable), e.g. <code>wind=0</code>;</li>
<li><code>max</code> – show the max. temperature prediction (1 – enable, 0 – disable), e.g. <code>max=0</code>;</li>
<li><code>min</code> – show the min. temperature prediction (1 – enable, 0 – disable), e.g. <code>min=0</code>;</li>
<li><code>block_align</code> – alignment of the widget (left, right, center, wide, full);</li>
<li><code>css_class</code> – add custom css class;</li>
<li><code>css_style</code> – add custom inline style;</li>
</ul>
<h4>Errors (API Errors)</h4>
<ul>
<li>Most common error is the “new API key” – does not show any weather data and it says “Weather API Error” each new API key created will need (around) 15 minutes to be active and show data so please be patient and check again after 15 min.;</li>
<li>Typo in the location input field, make sure your location is correctly written;</li>
<li>It is (rare) possibility that the Open Weather API currently down;</li>
<li>You have exceeded the free tier of you Open Weather account and they are rate limiting you – this is possible if you have a huge amount of visitors to your website, 
so make sure you are utilizing the caching feature in the plugin settings page.</li>
</ul>

Weather Widget WP

Display weather information for a specific location.

4WP Weather vs Weather Widget WP