Beginner's Guide for WordPress / Start your WordPress Blog in minutes

How to Show Weather Forecast in WordPress (Beginner’s Guide)

Do you want to show a weather forecast in WordPress?

Some websites may need to show the upcoming weather forecast to visitors. These include hospitality sites like travel agents and hotel booking websites.

In this article, we will show you how to easily add a weather forecast to WordPress.

How to Add a Weather Widget to WordPress (Step by Step)

Who Needs a Weather Forecast in WordPress?

Not all websites need to show a weather forecast to their users. However, sometimes people may make a decision based on upcoming weather conditions.

If you run a website in the travel, event, hotel, bed & breakfast, or similar industry, then visitors may be interested in the upcoming weather.

By showing this information on your website, you can provide a better user experience. This can keep people on your website for longer, which helps you get conversions.

For example, a visitor may decide to complete your hotel booking form if they see the weather is forecast as hot and sunny.

An example of a weather forecast on a booking form

Even if you don’t run a travel or hospitality website, a weather forecast may still be useful for your visitors.

For example, if you run a travel blog, then readers may use the upcoming forecast to plan their trip.

There are plenty of plugins that can get the latest weather information and then show it beautifully on your website. However, for the best results, you need to find a WordPress plugin that’s fast, clutter-free, and doesn’t add lots of links to external weather services.

That being said, let’s take a look at how to easily add a weather forecast to your WordPress posts, pages, and sidebar widgets.

How to Show Weather Forecast in WordPress

Location Weather is a beginner-friendly WordPress plugin that allows you to add a weather forecast to any page or post, or widget-ready area. Using this plugin, you can show the wind speed, temperature, air pressure, visibility, and more.

A example of a weather forecast, added to a WordPress website

You can even show the weather report for multiple locations on the same page.

In this guide, we will be using the free plugin, as it has everything you need to show the weather forecast in WordPress. If you want to show multi-day forecasts or automatically detect the visitor’s location, then there’s also Location Weather Pro.

The first thing you need to do is install and activate the Location Weather plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

Location Weather gets its forecasts from an online weather service called OpenWeather. To access OpenWeather, you will need to create an API key and then add it to the plugin’s settings.

To create a key, go to Location Weather » Settings in the WordPress dashboard. Here, click on the ‘Get API key’ link.

Link to OpenWeather API

This will take you to a screen where you can create a free OpenWeatherMap account by entering your email address and creating a password.

After signing into your OpenWeatherMap account, just click on your name in the toolbar and then select ‘My API keys’.

Getting a weather forecast API key for your WordPress website

On this screen, you will see a default API key.

Simply go ahead and copy the key.

OpenWeatherMap API Key

Now, switch back to your WordPress dashboard and paste the API key into the OpenWeather API Key box.

With that done, click on the ‘Save Settings’ button to store the API key.

An OpenWeather API key

Now, you are ready to add a weather forecast to WordPress by going to Location Weather » Add New.

To start, type in a title for the weather forecast. This will appear above the weather forecast on your WordPress website, so it will be visible to visitors.

How to add a weather forecast to your WordPress website

After that, you need to scroll to ‘City Name’ and type in the location of your weather forecast.

Since we are using the free version, you will need to use the ‘City, Country’ format. This should work fine for most locations.

Configuring a weather forecast using a free WordPress plugin

If multiple locations have the same name, then the plugin might choose the wrong city. If that happens, then you will need to upgrade to Location Weather Pro and then enter the City ID, ZIP, or location coordinates.

Once you have done that, check the units that Location Weather is using for temperature, pressure, and wind speed, and make any necessary changes.

Changing units in a weather forecast including temperature, wind speed, and more

Next, you must select the ‘Display Options’ tab and choose what information you want to show on your WordPress blog.

Most of these settings are straightforward, so you can look through them and make any changes you want.

The Display Options Tab

By default, Weather Location will show a ‘Weather from OpenWeatherMap’ message below the forecast.

If you want to hide this text, then scroll to the bottom of the Display Options screen and click to disable the ‘Weather Attribution’ switch.

Remove the Link to the OpenWeatherMap Site

The next tab is ‘Style Options’, which lets you change the background color and the text color in WordPress.

You can also add a colored border or change the radius to create curved corners.

The Style Options Tab

When you are happy with how the weather forecast is set up, just click on the ‘Publish’ button.

After that, copy the shortcode that Location Weather creates automatically.

Adding a weather forecast to WordPress using shortcode

You can now add the shortcode to any WordPress post or page or even a widget-ready area. For example, you can add the shortcode to a sidebar widget so that the weather forecast appears across your entire website.

For step-by-step instructions on how to place the shortcode, please see our guide on how to add a shortcode in WordPress.

If you are using a block-enabled theme, then you can add the weather forecast to any area of your site using the full-site editor. This includes areas you cannot edit using the standard WordPress content editor.

For example, you might use a weather forecast to improve your 404 page template.

After that, you can visit your website to see the weather forecast in action.

Preview the Weather Forecast

We hope this tutorial helped you learn how to show a weather forecast on your WordPress website. You may also want to learn how to create an email newsletter the right way or see our expert picks for the best web push notification software.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

5 CommentsLeave a Reply

  1. Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. OpenWeatherMap works better in some countries than others. I tried using it for thunderstorm warnings but the closest it got in my area (eastern Canada) was “strong rain” so I ended up using the Environment Canada’s Weather Office applets.

  3. This article is very informative. I’m working on a blog for a client whose customers are very aware of the weather. I will definitely add the weather to the sidebar. It will add valuable information to the blog.

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.