What's WP
Find Everything Related to WordPress - Best Tutoriasl on WordPress!
How to Add a Weather Widget in WordPress Website

How to Add a Weather Widget in WordPress Website

A weather forecast widget reminds visitors of the current and future weather conditions. It is worth trying to display a functional weather widget in your WordPress website so as to enable better user experience. The most effective way to achieve that purpose is the use of a plugin. WordPress has launched a large number of rich-featured plugins to showcase the latest weather information, among which the Awesome Weather Widget is selected in this guide.

Enable Awesome Weather Widget on Your Site

Awesome Weather Widget is one of the most popular weather plugins in WordPress, trusted by thousands of users. This plugin enables you to create a beautiful widget for weather forecast and that also delivers accurate weather information currently. Accordingly, visitors are able to adjust their activities wisely whatever the state of weather may be.

After having this plugin installed and activated, a new option called “Awesome Weather Widget” appears on the widgets list. Go to Appearance > Widgets and drag & drop the Awesome Weather Widget to the right sidebar.

Move Awesome Weather Widget to Sidebar

Set Up Awesome Weather Widget

Once moving the widget to the right sidebar, a list of settings is expanded automatically for widget customization. First of all, customize the basic information as required. It is necessary to type your accurate location, which should be in the format of “city, state”, for example, New York City, NY or London, UK.

And then, an ID number of your city is found and it is set automatically in the OpenWeatherMap City ID field. Override the default title of this weather widget if needed and that will be visible to all visitors.

Weather Widget Basic Settings

Go on with the rest settings. Make a decision on the unit of temperature and that can be “F” or “C”. Note that, the “F” refers to Fahrenheit degree while the “C” refers to Centigrade degree. The default size of this widget is “wide”, which can be replaced with “tall”. Determine how many days of weather forecast should be shown on the website, no more than 5 days.

It is optional to add a background image to this widget. Upload an image to the Media Library and copy & paste the image URL to “Background Image” field. Perhaps, you can leave a single color to this weather widget and override the default color if needed.

Set Up Weather Widget

When checking the option “Hide Stats”, the atmosphere, humidity, wind velocity and the highest & lowest temperature are hidden from visitors. We suggest you not to check this option so as to reserve those details. Check “Link to OpenWeatherMap” to display a link on the widget, which directs visitors to an extended forecast page for weather conditions in the next few days. You can customize the widget title according to personal needs.

Finally, click “Save” button to save all settings and check the weather widget from the website front-end. Here comes an example made by following the above step-by-step guide. The current temperature and an array of forecast information in the next 5 days are shown on the widget.

Weather Widget Example

The “extended forecast” link directs visitors to the “OpenWeatherMap Weather in your city” page. The weather conditions in the next hours and next days are displayed clearly. An analysis of wind, cloudiness, pressure, humidity, sunrise, sunset and geo coords is also available here. Note that, it is possible to check weather conditions in the next 12 days.

OpenWeatherMap Weather Forecast

Add Weather Widget to a Page or Post

Besides displaying a weather widget in the sidebar, Awesome Weather Widget also allows users to insert it into a page or post by using the shortcode as below. Modify the parameters for location, units, the number of forecast days, background image, the size of widget, and so son. That depends. Copy and paste the shortcode to any page or post as you want.

[awesome-weather location="New York City" units="C" size="wide" override_title="NY" forecast_days="5" hide_stats="1" background="background image URL" custom_bg_color="#7fb761" inline_style="width: 250px; margin: 30px; float: left;" background_by_weather="1"]


Lucy has been a very experienced SEOer, technical writer, web developer, c# developer since 2002. Now she owns a startup in San Francisco, CA, focusing on running a couple of blogs to share knowledge and experience with global readers and deliver exceptional results to global sponsors by leveraging the power of Internet.