Function the_weather.Wordpress weather box from openweathermap.org API. The API resutls are cached a day with Wordpress Transient API.

functions.php

/**
 * Returns a cached json object with forecast info of a city
 * forecast info from openweathermap.org api
 * you need and API key
 *
 * @param $city string with city name
 * @return mixed|string json object with forecast info
 */
function get_city_weather( $city ) {
/**
 * Icons:
 * http://openweathermap.org/wiki/API/Weather_Condition_Codes
 *
 * Precicción del dia
 * http://api.openweathermap.org/data/2.5/forecast/daily?q=Valencia&lang=sp&units=metric&cnt=1
 *
 * Parámetros
 * @param q = city
 * @param lang =sp language
 * @param units = metric (ºC)
 * @parmam cnt = 1 quantitiy
 * @param APPID = xxx
 *
 */
    if ( ! $forecast = get_transient('weather_' . sanitize_title($city))) {
        $remote = wp_remote_get("http://api.openweathermap.org/data/2.5/forecast/daily?q=$city&lang=sp&units=metric&cnt=1&APPID=xxx");
        $forecast = wp_remote_retrieve_body( $remote );

        set_transient( 'weather_' . sanitize_title($city), $forecast, 24*60*60);
    }
    return $forecast;
}

/**
 * Print out the weather widget
 *
 * @param $city
 */
function the_weather( $city ) {

    $forecast = get_city_weather ($city);
    if (!$forecast)
        return false;

    $forecast = json_decode($forecast);

    $temp = $forecast->list[0]->temp;
    $weather = $forecast->list[0]->weather[0];

    ?>
    <div class="weather-box" title="<?php echo $weather->description ?>">
        <div class="units">ºC</div>
        <div class="icon"><img src="http://openweathermap.org/img/w/<?php echo $weather->icon ?>.png" alt="<?php echo $weather->description ?>" title="<?php echo $weather->description ?>"/></div>
        <div class="temperature">
            <span class="min"><?php if (! empty ($temp)) echo round($temp->min) ?></span>
            <span class="separator">/</span>
            <span class="max"><?php if (! empty ($temp)) echo round($temp->max) ?></span>
        </div>
    </div>
    <?php
}

styles.scss

// ---------------------------------------------------------------------------
// Weather box
// ---------------------------------------------------------------------------

.weather-box{
  height: rem-calc(50);
  display: table;
  vertical-align: middle;

  div{
    display: table-cell;
    padding: 0 rem-calc(10);
    background-color: #F2F2F2;
  }

  .units{
    color: #FFF;
    font-weight: 700;
    background: $red;
    padding: 0 rem-calc(18);

  }
  .temperature{
    font-weight: 400;
    font-size: rem-calc(18);
    padding-left: 0;

    .separator{ color: #CCC}
    .min{color: $blue}
    .max{color: $red}
  }
}

template.php

// To call the function

the_weather($geo['address']);