Weather Forecast Widget / Shortcode

First of all, look at the example. While writing this post, I was located in Saint Petersburg, and here is the weather forecast for that city for today.

[weather city=”SaintPetersburg,ru”]

For simpleness let me split this post into steps.

Step 1. Choose the Weather API

Yes, first of all we have to choose the service we will work with. I thought to use Yahoo, but it looks more complicated and I decided to use openweathermap.org.

So, register for a free plan there, go to your member area and there you will find API keys. You can create a new key as well.

Openweathermap API keys in member area

Once your API key is created, make a cup of coffee (or tea) to yourself, because it takes near 10 minutes for your API keys to become live.

Check if your API key is live by going to the URL http://api.openweathermap.org/data/2.5/weather?q={City,Country Code}&APPID={API key}. Is the JSON data appeared? Proceed to the next step.

Step 2. Create a WordPress Shortcode

Well, our main task is to understand how to connect to Weather API and print the response correctly, so there is no difference what to use – widget or shortcode. I decided to use shortcode because its code much more simpler and it allows us to focus at our interaction with the weather API.

If you can not create code for widget – just ask me in comments, I will send it to you without problems.

I strongly recommend to use transients to cache the returned value. You can cache the forecast even for 15 minutes, but it should be used.

Oh, the code is for your functions.php if you still do not know.


add_shortcode( 'weather', 'misha_weather_shortcode' ); // [weather location="London,uk"]

function misha_weather_shortcode( $atts ) {
	$params = shortcode_atts( array( // if you need a default value, set it here
		'location' => 'SaintPetersburg,ru',
	), $atts );

	
	$cache_key = 'misha_forecast1';
	$forecast_str = get_transient( $cache_key );
	
	// if no data in the cache
	if ( $forecast_str === false ) {
	
		// build the URL for wp_remote_get() function
		$forecast = wp_remote_get( add_query_arg( array(
    			'q' => $params['location'], // City,Country code
    			'APPID' => '', // do not forget to set your API key here
			'units' => 'metric' // if I want to show temperature in Degrees Celsius
		), 'http://api.openweathermap.org/data/2.5/weather' ) );
		
		
		if ( !is_wp_error( $forecast ) && wp_remote_retrieve_response_code( $forecast ) == 200 ) {
		
			$forecast = json_decode( wp_remote_retrieve_body( $forecast ) );
			$forecast_str = $forecast->main->temp . ' °С <img src="' . $forecast->weather[0]->icon . '.svg">';  
			// print_r( $forecast ); // use it to see all the returned values!
	
			set_transient( $cache_key, $forecast_str, 7200 ); // 2 hours cache
		} else {
			return; // you can use print_r( $forecast ); here for debugging
		}
		
	}
	return $forecast_str;
}

Step 3. Icons

Our main task is to connect icon weather codes we receive from the API with our beautiful icons. I recommend to use Meteocons set. API weather codes you will find here.

Use any of this options:

And remember, I’m opened to any questions in comments.

# WordPress

Misha Rudrastyh

Misha Rudrastyh

Hey guys and welcome to my website. For more than 10 years I've been doing my best to share with you some superb WordPress guides and tips for free.

Need some developer help? Contact me

Follow me on X