Tony Brandão

<p>Enhance your WordPress site with a sleek, modern weather widget powered by the OpenWeatherMap API and animated Meteocons icons. This lightweight and easy-to-use plugin allows you to display real-time weather conditions for any location with a clean, customizable design. Perfect for adding a touch of functionality and style to your website, the plugin offers just the right amount of settings to tailor the widget to fit seamlessly into your site\’s aesthetic. Stay weather-savvy with this simple yet attractive solution!</p>


Animated Weather Widget

Enhance your WordPress site with a sleek, modern weather widget powered by the OpenWeatherMap API and animated Meteocons icons.

adminbergtourentipptirol

<h4>GENERAL</h4>
<p>The weather data for this widget will be retrieved from the <a href="https://openweathermap.org/api" rel="nofollow ugc">OpenWeatherMap API</a> with your own API key.</p>
<h4>OPENWEATHERMAP API</h4>
<p>⚠️ <strong>Important Note:</strong> OpenWeatherMap has transitioned from version One Call API 2.5 to the new <strong>One Call API 3.0</strong>.<br />
As of now, <strong>usage of the API is no longer possible without adding valid billing information (e.g. a credit card)</strong> to your OpenWeatherMap account – even for the free tier.</p>
<p>This means that the <strong>Weather Widget will not work anymore</strong> unless:<br />
– you switch to the new <strong>One Call 3.0 API</strong>, and<br />
– you have a valid payment method on file in your OpenWeatherMap account.</p>
<p>🔒 <strong>Recommendation:</strong><br />
To avoid unexpected charges, it is highly recommended to set a <strong>billing cap / usage limit</strong> in your OpenWeatherMap account under <a href="https://home.openweathermap.org/plans" rel="nofollow ugc">Billing Plans</a> after adding a payment method.</p>
<p>For pricing details and limits, visit: <a href="https://openweathermap.org/price" rel="nofollow ugc">Pricing – OpenWeatherMap</a></p>
<h4>INPUT DATA</h4>
<p>You can show the weather for a <strong>CITY</strong> (input data: city name) or for specific <strong>COORDINATES</strong> (input data: latitude & longitude coordinates) in the widget.</p>
<h4>PLACEMENT/SHORTCODE</h4>
<p>The weather widget can be implemented in a page, a post or into the widget area with the help of the shortcode <strong>[weather_forecast_widget]</strong>. Furthermore you´ll be able to pass different attributes to each shortcode to override your settings for this widget placement (e.g. manage widget title with an shortcode attribute).</p>
<h4>TEMPLATES</h4>
<p>Currently you can choose 3 templates for the widget.<br />
* <strong>Template 1</strong><br />
    * Current day´s weather with a weather forecast for the next 3 days<br />
* <strong>Template 2</strong><br />
    * <strong>Template 2 uses Bootstrap!</strong><br />
    * Current day´s weather with an hourly weather forecast and a weather forecast for the next 3 days<br />
* <strong>Template 3</strong><br />
    * <strong>Template 3 uses Bootstrap!</strong><br />
    * Weather for the current day and for the next 7 days, each with an hourly weather forecast and a weather forecast for the next 3 days<br />
* <strong>Alert Template 1</strong><br />
    * <strong>Alert Template 1 uses Bootstrap!</strong><br />
    * Active weather alerts</p>
<h4>BACKGROUND IMAGE</h4>
<p>For this widget, you´ll be able to choose <strong>your own background image</strong>. Either you set a static background image in the widget settings or you choose the dynamic variant (thumbnail of the page/post, where the shortcode is placed) will be used as a background image.</p>
<h4>WEATHER DATA</h4>
<p>In addition to the <strong>daily weather forecast</strong>, an <strong>hourly weather forecast</strong> can also be displayed in the widget. Both the daily and hourly weather forecast can be collapsed.</p>
<h4>WEATHER ALERTS</h4>
<p>The weather widget also shows weather alerts. These alerts are dismissable.</p>
<h4>WEATHER ICONS</h4>
<p>In the widget you´ll find awesome and beautiful weather icons. In the plugins settings page you can choose which weather icons you want to use for the widget.<br />
* <strong>Animated Icons Filled</strong><br />
* <strong>Animated Icons Not Filled</strong><br />
* <strong>Static Icons</strong></p>
<h4>LAZY LOADING</h4>
<p>You have the possibility to load the widget with <strong>lazy loading</strong> (ajax) to load the data only when necessary.</p>
<h4>CACHING</h4>
<p>Nowadays <strong>caching</strong> is an important topic. This weather forecast widget makes it possible to cache the received weather data for the next visitor, who will visit your website page/post next time. You´ll be able to set your desired caching time in the settings (caching time possible up to 1 hour => this should ensure that the weather data in the widget is as current as possible). With this caching possibility you´ll also save API calls.</p>
<h4>SHORTCODE EXAMPLES</h4>
<ul>
<li>Retrieve weather data for a city
<ul>
<li><strong>[weather_forecast_widget city=”Kufstein”]</strong></li>
</ul>
</li>
<li>Retrieve weather data for a city and show city name as title text
<ul>
<li><strong>[weather_forecast_widget city=”Kufstein” title_cityname=”X”]</strong></li>
</ul>
</li>
<li>Retrieve weather data for specific coordinates
<ul>
<li><strong>[weather_forecast_widget lat=”47.5824″ lon=”12.1627″]</strong></li>
</ul>
</li>
<li>Retrieve weather data for specific coordinates and show “Weather for Weather Widget” as title text
<ul>
<li><strong>[weather_forecast_widget lat=”47.5824″ lon=”12.1627″ title_overwrite=”Weather for Weather Widget”]</strong></li>
</ul>
</li>
<li>Retrieve weather data with lazy loading and template 3 for specific coordinates and expand the hourly and daily forecast initially
<ul>
<li><strong>[weather_forecast_widget lazy_loading=”X” template=”3″ hourly_forecast=”show” daily_forecast=”show” lat=”47.5824″ lon=”12.1627″]</strong></li>
</ul>
</li>
<li>Retrieve weather alerts with lazy loading and alert template 1 for specific coordinates and expand the weather alerts initially
<ul>
<li><strong>[weather_forecast_widget lazy_loading=”X” template=”alert_1″ alerts=”show” lat=”47.5824″ lon=”12.1627″ max_width=”500px”]</strong></li>
</ul>
</li>
</ul>
<h4>SETTINGS</h4>
<ul>
<li>Input box for your <strong>OPEN WEATHER MAP API key</strong> (the api key will be tested for validity while saving!)</li>
<li>Dropdown box to choose if caching of the weather data is necessary and if yes, which <strong>CACHE TIME</strong> should be used.</li>
<li>Media uploader/selector to choose a <strong>BACKGROUND IMAGE</strong> for the widget (optional – otherwise the page/post thumbnail will be used)</li>
<li>Radiobuttons to select the <strong>WIDGET TITLE TEXT</strong>, which will be displayed in the widget. This setting will be used as <strong>a default if nothing else will be passed in the shortcode</strong>. If you´ll pass <strong>title_cityname</strong> or <strong>title_overwrite</strong> as a shortcode attribute, this attribute will be processed in the widget output.</li>
<li>Dropdown to choose the <strong>POST META FIELD</strong> for the title text, if you selected the readio button “<strong>Post Meta Field (choose one of the dropdown below)</strong>“</li>
<li>Choose, which <strong>WEATHER VALUES</strong> should be shown in the widget</li>
<li>Choose, which <strong>UNITS</strong> should be used to display the weather values</li>
<li>Choose, which <strong>WEATHER ICONS</strong> should be used for the widget</li>
</ul>
<h4>TRANSLATIONS</h4>
<ul>
<li>German – adminbergtourentipptirol</li>
</ul>
<h3>Credits</h3>
<ul>
<li>Static Weather Icons provided from <strong><a href="https://github.com/erikflowers/weather-icons" rel="nofollow ugc">Erik Flowers Weather Icons</a></strong></li>
<li>Animated Weather Icons provided from <strong><a href="https://github.com/basmilius/weather-icons" rel="nofollow ugc">Basmilius Weather Icons</a></strong></li>
</ul>


Weather Forecast Widget

"Weather Forecast Widget" displays current weather and hourly/daily forecasts in a widget using a shortcode.

Animated Weather Widget vs Weather Forecast Widget