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 website owners may want to display a weather forecast to keep their users informed about weather conditions for specific locations.

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

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

Why and Who Needs Weather Forecast in WordPress?

Not all WordPress websites need to display a weather forecast to their users. However, some industries rely on people making decisions based on upcoming weather conditions.

This includes travel, events, hotels, bed & breakfasts and many others in the hospitality and tourism industries. Including a local weather forecast on your website may lead to extra business.

There are plenty of WordPress plugins that can pull weather information and display it beautifully on your website. You need to use a plugin that is fast, clutter-free, and doesn’t add links to weather services.

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

How to Show Weather Forecast in WordPress

Location Weather is a beginner friendly WordPress plugin that lets you add a weather forecast to any page, post, or widget. That’s helpful when you need to add forecasts for different locations throughout your website.

The free version includes the features many users need. However, if you wish to display multi-day forecasts or automatically detect the location of your visitors, then you’ll need to upgrade to the Pro version.

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 can work without an API key. However, it is recommended to create an OpenWeatherMap API key to improve performance and avoid timeouts.

To do that, simply navigate to Location Weather » Settings in your WordPress dashboard. Here you can click on a link to get your OpenWeather API key.

Link to OpenWeather API

Clicking the link will let you sign up for an account on the OpenWeatherMap website. After sign up, you need to visit your profile page and click on the API Keys tab.

OpenWeatherMap API Key

Here you’ll find your default API key. Clicking on the key will automatically copy it.

You’ll need to return to your WordPress backend and paste the key into the OpenWeather API Key text box.

Paste the OpenWeather API Key

Don’t forget to click on the Save button to store your settings.

You are now ready to create your weather reports. You can do this by visiting the Location Weather » Add New page to create your first weather report.

Location Weather's Add New Page

Start by entering your location. With the free version, you just need to use the format ‘City, Country’. This should work fine for most locations.

But Location Weather may choose the wrong city if your country has more than one with that name. In that case, you’ll need to upgrade to the Pro version and use the City ID, ZIP or coordinates to identify the right one.

You’ll also need the Pro version if you want Location Weather to automatically detect your visitor’s location.

You should scroll down the page to make sure your preferred units for temperature, pressure, and wind speed are being used.

The Display Options tab allows you to choose the information that will be displayed. For this tutorial, we’ll just stick with the default settings.

The Display Options Tab

Note that the free version will display today’s forecast. If you wish to display the forecast for more than one day, then you need to upgrade to a Pro plan.

You might like to scroll to the bottom of the page and switch the Weather Attribution setting to ‘Hide’. This makes sure the OpenWeatherMap link won’t be displayed on the forecast.

Remove the Link to the OpenWeatherMap Site

The Style Options tab lets you choose the background and text color. Again, we’ll stick with the defaults.

The Style Options Tab

Once you are finished, click on the Update button to save your weather report. You’ll also need to copy the shortcode by clicking on it.

Click the Update Button

You can now add this shortcode to any WordPress post or page. You can also add this shortcode to a sidebar widget.

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

Preview the Weather Forecast

You can repeat this process to create as many weather forecasts as you need.

We hope this tutorial helped you learn how to show a weather forecast in your WordPress website.

You may also want to learn how to create an email newsletter the right way, or see our expert pick of the best domain name registrars.

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.

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

4 CommentsLeave a Reply

  1. 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.

  2. 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 to Gail Issen Cancel 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.