Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

Editorial Note: We earn a commission from partner links on WPBeginner. Commissions do not affect our editors' opinions or evaluations. Learn more about Editorial Process.

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 data 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 WordPress weather widget 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 most current 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, user-friendly, 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 update forecast to your WordPress posts, pages, and sidebar widgets. You can use the quick links below to skip to a specific step:

Step 1: Install and Set Up a Location Weather Account

Location Weather is a beginner-friendly WordPress weather plugin that allows you to add a daily 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 real-time 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

Step 2: Add a Weather Forecast to WordPress

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.

For example, if you live in the US, then you will need to use Fahrenheit.

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 the weather forecast customization options, just click on the ‘Publish’ button.

After that, copy the shortcode that the weather forecast plugin creates automatically.

Adding a weather forecast to WordPress using shortcode

Step 3: Display the Weather Forecast on Your WordPress Site

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 so that the weather forecast widget 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 and how to add and use WordPress widgets.

If you are using a block-enabled WordPress 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 WordPress weather widget 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.

Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

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

9 CommentsLeave a Reply

  1. Syed Balkhi says

    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. Mohamed Shamir says

    What a fantastic tutorial! Adding a weather forecast to a WordPress site using the Location Weather plugin seems like a breeze, thanks to the clear instructions provided. I’m curious, though does the plugin offer any customization options for the design of the weather widget itself, like font styles or icon sizes?

    Thanks for sharing this valuable information. It’s definitely going to elevate the user experience on my website!

  3. Jemal Bakars says

    Hello , thanks for the documentation, But ,what if I want to create a website only focused on ” showing weather forecast”
    Can I put AdSense monetisation on my weather forecast website ?

    • WPBeginner Support says

      You would either need to create a post or custom post type for the different pages and if your site is approved for Adsense you could use it on your site.

      Admin

  4. schultzter says

    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.

  5. Gail Issen says

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

WPBeginner Assistant
How can I help you?

By chatting, you consent to this chat being stored according to our privacy policy and your email will be added to receive weekly WordPress tutorials from WPBeginner.