simpleWeather wordpress sidebar widget with User defined locations

There are dozens WordPress plugins for weather forecast but non of them allow your visitor to change weather locations.
Then I found simpleWeather – a simple jQuery plugin to display current weather data for any location from Yahoo!
The example of how this plugin works you can see in my right sidebar.

Introducing simpleWeather

See the Pen simpleWeather.demo.js v3.1.0 by James Fleeting (@fleeting) on CodePen.

I’m going to show you how can you use this plugin for self-hosted WordPress site.

Getting Started

1. Download simpleWeather.

2. Upload the archive content to your hosting. For example here:
/wp-content/simple-weather/js/

3. Create two empty files:

  • simple-weather.js (this will be responsible for fetching and display weather data)
  • simple-weather.css (this file responsible for styling)

and upload them to /wp-content/simple-weather/

4. You should tell your WordPress website to load JavaScript files and CSS styles and that’s why you should install Header and Footer plugin and fill the < HEAD > SECTION INJECTION:

simpleweather

<script type="text/javascript" src="/wp-content/simple-weather/js/jquery.simpleWeather.min.js"></script>
<script type="text/javascript" src="/wp-content/simple-weather/simple-weather.js"></script>
<link rel="stylesheet" href="/wp-content/simple-weather/simple-weather.css" type="text/css" media="all">

The first line loads simpleWeather plugin.
The second and the third lines load files that we created on step 3.

5. In the WordPress console select Appearance > Widgets and add Text widget:

simpleweather-text-widget

<!-- Docs at http://http://simpleweatherjs.com -->
<div id="weatherBeijing" class="weather"></div>
<div id="weatherShanghai" class="weather" style='display:none;'></div>
<div id="weatherHongKong" class="weather" style='display:none;'></div>
<div id="weatherShenzhen" class="weather" style='display:none;'></div>
<div id="weatherGuangzhou" class="weather" style='display:none;'></div>
<div id="weatherHangzhou" class="weather" style='display:none;'></div>
<select id='purpose'>
<option value="0">Beijing</option>
<option value="1">Shanghai</option>
<option value="2">Hong Kong</option>
<option value="3">Shenzhen</option>
<option value="4">Guangzhou</option>
<option value="5">Hangzhou</option>
</select>

6. Here is the my simple-weather.js and simple-weather.css files. Here is no rocket science:

simple-weather.js

// v3.1.0
//Docs at http://simpleweatherjs.com
jQuery(document).ready(function() {
  jQuery('#purpose').on('change', function() {
      if (this.value == '0') {
          jQuery('#weatherBeijing').fadeIn();
          jQuery('#weatherShanghai').hide();
          jQuery('#weatherHongKong').hide();
          jQuery('#weatherShenzhen').hide();
          jQuery('#weatherGuangzhou').hide();
          jQuery('#weatherHangzhou').hide();
      }  else if (this.value == '1') {
          jQuery('#weatherBeijing').hide();
          jQuery('#weatherShanghai').fadeIn();
          jQuery('#weatherHongKong').hide();
          jQuery('#weatherShenzhen').hide();
          jQuery('#weatherGuangzhou').hide();
          jQuery('#weatherHangzhou').hide();
      } else if (this.value == '2') {
          jQuery('#weatherBeijing').hide();
          jQuery('#weatherShanghai').hide();
          jQuery('#weatherHongKong').fadeIn();
          jQuery('#weatherShenzhen').hide();
          jQuery('#weatherGuangzhou').hide();
          jQuery('#weatherHangzhou').hide();
      } else if (this.value == '3') {
          jQuery('#weatherBeijing').hide();
          jQuery('#weatherShanghai').hide();
          jQuery('#weatherHongKong').hide();
          jQuery('#weatherShenzhen').fadeIn();
          jQuery('#weatherGuangzhou').hide();
          jQuery('#weatherHangzhou').hide();
      } else if (this.value == '4') {
          jQuery('#weatherBeijing').hide();
          jQuery('#weatherShanghai').hide();
          jQuery('#weatherHongKong').hide();
          jQuery('#weatherShenzhen').hide();
          jQuery('#weatherGuangzhou').fadeIn();
          jQuery('#weatherHangzhou').hide();
      } else if (this.value == '5') {
          jQuery('#weatherBeijing').hide();
          jQuery('#weatherShanghai').hide();
          jQuery('#weatherHongKong').hide();
          jQuery('#weatherShenzhen').hide();
          jQuery('#weatherGuangzhou').hide();
          jQuery('#weatherHangzhou').fadeIn();
      }
    });
  
// code for Beijing
    jQuery.simpleWeather({
    location: '',
    woeid: '2151330',
    unit: 'c',
    success: function(weather) {
        html = '<div id="weather-icon"><img src="'+weather.image+'"></div>'
        html += '<div id="weather-title">'+weather.temp+'&deg;'+weather.units.temp+'</div>';
        html += '<table class="weather-forecast"><tr><th class="weather-'+weather.forecast[1].day+'">'+weather.forecast[1].day+'</th><th class="weather-'+weather.forecast[2].day+'">'+weather.forecast[2].day+'</th><th class="weather-'+weather.forecast[3].day+'">'+weather.forecast[3].day+'</th><th class="weather-'+weather.forecast[4].day+'">'+weather.forecast[4].day+'</th><th class="weather-'+weather.forecast[5].day+'">'+weather.forecast[5].day+'</th></tr>';
        
        html += '<tr><td><img src="'+weather.forecast[1].thumbnail+'"><br />'+weather.forecast[1].low+'&deg;'+weather.units.temp+'<br />'+weather.forecast[1].high+'&deg;'+weather.units.temp+'</td><td><img src="'+weather.forecast[2].thumbnail+'"><br />'+weather.forecast[2].low+'&deg;'+weather.units.temp+'<br />'+weather.forecast[2].high+'&deg;'+weather.units.temp+'</td><td><img src="'+weather.forecast[3].thumbnail+'"><br />'+weather.forecast[3].low+'&deg;'+weather.units.temp+'<br />'+weather.forecast[3].high+'&deg;'+weather.units.temp+'</td><td><img src="'+weather.forecast[4].thumbnail+'"><br />'+weather.forecast[4].low+'&deg;'+weather.units.temp+'<br />'+weather.forecast[4].high+'&deg;'+weather.units.temp+'</td><td><img src="'+weather.forecast[5].thumbnail+'"><br />'+weather.forecast[5].low+'&deg;'+weather.units.temp+'<br />'+weather.forecast[5].high+'&deg;'+weather.units.temp+'</td></tr>';
        
        html += '</table>';
  
      jQuery("#weatherBeijing").html(html);
    },
    error: function(error) {
      jQuery("#weatherBeijing").html('<p>'+error+'</p>');
    }
  });
 
// code for Shanghai   
    jQuery.simpleWeather({
    location: '',
    woeid: '2151849',
    unit: 'c',
    success: function(weather) {
        html = '<div id="weather-icon"><img src="'+weather.image+'"></div>'
        html += '<div id="weather-title">'+weather.temp+'&deg;'+weather.units.temp+'</div>';
        html += '<table class="weather-forecast"><tr><th class="weather-'+weather.forecast[1].day+'">'+weather.forecast[1].day+'</th><th class="weather-'+weather.forecast[2].day+'">'+weather.forecast[2].day+'</th><th class="weather-'+weather.forecast[3].day+'">'+weather.forecast[3].day+'</th><th class="weather-'+weather.forecast[4].day+'">'+weather.forecast[4].day+'</th><th class="weather-'+weather.forecast[5].day+'">'+weather.forecast[5].day+'</th></tr>';
        
        html += '<tr><td><img src="'+weather.forecast[1].thumbnail+'"><br />'+weather.forecast[1].low+'&deg;'+weather.units.temp+'<br />'+weather.forecast[1].high+'&deg;'+weather.units.temp+'</td><td><img src="'+weather.forecast[2].thumbnail+'"><br />'+weather.forecast[2].low+'&deg;'+weather.units.temp+'<br />'+weather.forecast[2].high+'&deg;'+weather.units.temp+'</td><td><img src="'+weather.forecast[3].thumbnail+'"><br />'+weather.forecast[3].low+'&deg;'+weather.units.temp+'<br />'+weather.forecast[3].high+'&deg;'+weather.units.temp+'</td><td><img src="'+weather.forecast[4].thumbnail+'"><br />'+weather.forecast[4].low+'&deg;'+weather.units.temp+'<br />'+weather.forecast[4].high+'&deg;'+weather.units.temp+'</td><td><img src="'+weather.forecast[5].thumbnail+'"><br />'+weather.forecast[5].low+'&deg;'+weather.units.temp+'<br />'+weather.forecast[5].high+'&deg;'+weather.units.temp+'</td></tr>';
        
        html += '</table>';
  
      jQuery("#weatherShanghai").html(html);
    },
    error: function(error) {
      jQuery("#weatherShanghai").html('<p>'+error+'</p>');
    }
  });
    
// code for Hong Kong
    jQuery.simpleWeather({
    location: '',
    woeid: '2165352',
    unit: 'c',
    success: function(weather) {
        html = '<div id="weather-icon"><img src="'+weather.image+'"></div>'
        html += '<div id="weather-title">'+weather.temp+'&deg;'+weather.units.temp+'</div>';
        html += '<table class="weather-forecast"><tr><th class="weather-'+weather.forecast[1].day+'">'+weather.forecast[1].day+'</th><th class="weather-'+weather.forecast[2].day+'">'+weather.forecast[2].day+'</th><th class="weather-'+weather.forecast[3].day+'">'+weather.forecast[3].day+'</th><th class="weather-'+weather.forecast[4].day+'">'+weather.forecast[4].day+'</th><th class="weather-'+weather.forecast[5].day+'">'+weather.forecast[5].day+'</th></tr>';
        
        html += '<tr><td><img src="'+weather.forecast[1].thumbnail+'"><br />'+weather.forecast[1].low+'&deg;'+weather.units.temp+'<br />'+weather.forecast[1].high+'&deg;'+weather.units.temp+'</td><td><img src="'+weather.forecast[2].thumbnail+'"><br />'+weather.forecast[2].low+'&deg;'+weather.units.temp+'<br />'+weather.forecast[2].high+'&deg;'+weather.units.temp+'</td><td><img src="'+weather.forecast[3].thumbnail+'"><br />'+weather.forecast[3].low+'&deg;'+weather.units.temp+'<br />'+weather.forecast[3].high+'&deg;'+weather.units.temp+'</td><td><img src="'+weather.forecast[4].thumbnail+'"><br />'+weather.forecast[4].low+'&deg;'+weather.units.temp+'<br />'+weather.forecast[4].high+'&deg;'+weather.units.temp+'</td><td><img src="'+weather.forecast[5].thumbnail+'"><br />'+weather.forecast[5].low+'&deg;'+weather.units.temp+'<br />'+weather.forecast[5].high+'&deg;'+weather.units.temp+'</td></tr>';
        
        html += '</table>';
  
      jQuery("#weatherHongKong").html(html);
    },
    error: function(error) {
      jQuery("#weatherHongKong").html('<p>'+error+'</p>');
    }
  });
    
// code for Shenzhen
    jQuery.simpleWeather({
    location: '',
    woeid: '2161853',
    unit: 'c',
    success: function(weather) {
        html = '<div id="weather-icon"><img src="'+weather.image+'"></div>'
        html += '<div id="weather-title">'+weather.temp+'&deg;'+weather.units.temp+'</div>';
        html += '<table class="weather-forecast"><tr><th class="weather-'+weather.forecast[1].day+'">'+weather.forecast[1].day+'</th><th class="weather-'+weather.forecast[2].day+'">'+weather.forecast[2].day+'</th><th class="weather-'+weather.forecast[3].day+'">'+weather.forecast[3].day+'</th><th class="weather-'+weather.forecast[4].day+'">'+weather.forecast[4].day+'</th><th class="weather-'+weather.forecast[5].day+'">'+weather.forecast[5].day+'</th></tr>';
        
        html += '<tr><td><img src="'+weather.forecast[1].thumbnail+'"><br />'+weather.forecast[1].low+'&deg;'+weather.units.temp+'<br />'+weather.forecast[1].high+'&deg;'+weather.units.temp+'</td><td><img src="'+weather.forecast[2].thumbnail+'"><br />'+weather.forecast[2].low+'&deg;'+weather.units.temp+'<br />'+weather.forecast[2].high+'&deg;'+weather.units.temp+'</td><td><img src="'+weather.forecast[3].thumbnail+'"><br />'+weather.forecast[3].low+'&deg;'+weather.units.temp+'<br />'+weather.forecast[3].high+'&deg;'+weather.units.temp+'</td><td><img src="'+weather.forecast[4].thumbnail+'"><br />'+weather.forecast[4].low+'&deg;'+weather.units.temp+'<br />'+weather.forecast[4].high+'&deg;'+weather.units.temp+'</td><td><img src="'+weather.forecast[5].thumbnail+'"><br />'+weather.forecast[5].low+'&deg;'+weather.units.temp+'<br />'+weather.forecast[5].high+'&deg;'+weather.units.temp+'</td></tr>';
        
        html += '</table>';
  
      jQuery("#weatherShenzhen").html(html);
    },
    error: function(error) {
      jQuery("#weatherShenzhen").html('<p>'+error+'</p>');
    }
  });
    
// code for Guangzhou
    jQuery.simpleWeather({
    location: '',
    woeid: '2161838',
    unit: 'c',
    success: function(weather) {
        html = '<div id="weather-icon"><img src="'+weather.image+'"></div>'
        html += '<div id="weather-title">'+weather.temp+'&deg;'+weather.units.temp+'</div>';
        html += '<table class="weather-forecast"><tr><th class="weather-'+weather.forecast[1].day+'">'+weather.forecast[1].day+'</th><th class="weather-'+weather.forecast[2].day+'">'+weather.forecast[2].day+'</th><th class="weather-'+weather.forecast[3].day+'">'+weather.forecast[3].day+'</th><th class="weather-'+weather.forecast[4].day+'">'+weather.forecast[4].day+'</th><th class="weather-'+weather.forecast[5].day+'">'+weather.forecast[5].day+'</th></tr>';
        
        html += '<tr><td><img src="'+weather.forecast[1].thumbnail+'"><br />'+weather.forecast[1].low+'&deg;'+weather.units.temp+'<br />'+weather.forecast[1].high+'&deg;'+weather.units.temp+'</td><td><img src="'+weather.forecast[2].thumbnail+'"><br />'+weather.forecast[2].low+'&deg;'+weather.units.temp+'<br />'+weather.forecast[2].high+'&deg;'+weather.units.temp+'</td><td><img src="'+weather.forecast[3].thumbnail+'"><br />'+weather.forecast[3].low+'&deg;'+weather.units.temp+'<br />'+weather.forecast[3].high+'&deg;'+weather.units.temp+'</td><td><img src="'+weather.forecast[4].thumbnail+'"><br />'+weather.forecast[4].low+'&deg;'+weather.units.temp+'<br />'+weather.forecast[4].high+'&deg;'+weather.units.temp+'</td><td><img src="'+weather.forecast[5].thumbnail+'"><br />'+weather.forecast[5].low+'&deg;'+weather.units.temp+'<br />'+weather.forecast[5].high+'&deg;'+weather.units.temp+'</td></tr>';
        
        html += '</table>';
  
      jQuery("#weatherGuangzhou").html(html);
    },
    error: function(error) {
      jQuery("#weatherGuangzhou").html('<p>'+error+'</p>');
    }
  });
    
// code for Hangzhou
    jQuery.simpleWeather({
    location: '',
    woeid: '2132574',
    unit: 'c',
    success: function(weather) {
        html = '<div id="weather-icon"><img src="'+weather.image+'"></div>'
        html += '<div id="weather-title">'+weather.temp+'&deg;'+weather.units.temp+'</div>';
        html += '<table class="weather-forecast"><tr><th class="weather-'+weather.forecast[1].day+'">'+weather.forecast[1].day+'</th><th class="weather-'+weather.forecast[2].day+'">'+weather.forecast[2].day+'</th><th class="weather-'+weather.forecast[3].day+'">'+weather.forecast[3].day+'</th><th class="weather-'+weather.forecast[4].day+'">'+weather.forecast[4].day+'</th><th class="weather-'+weather.forecast[5].day+'">'+weather.forecast[5].day+'</th></tr>';
        
        html += '<tr><td><img src="'+weather.forecast[1].thumbnail+'"><br />'+weather.forecast[1].low+'&deg;'+weather.units.temp+'<br />'+weather.forecast[1].high+'&deg;'+weather.units.temp+'</td><td><img src="'+weather.forecast[2].thumbnail+'"><br />'+weather.forecast[2].low+'&deg;'+weather.units.temp+'<br />'+weather.forecast[2].high+'&deg;'+weather.units.temp+'</td><td><img src="'+weather.forecast[3].thumbnail+'"><br />'+weather.forecast[3].low+'&deg;'+weather.units.temp+'<br />'+weather.forecast[3].high+'&deg;'+weather.units.temp+'</td><td><img src="'+weather.forecast[4].thumbnail+'"><br />'+weather.forecast[4].low+'&deg;'+weather.units.temp+'<br />'+weather.forecast[4].high+'&deg;'+weather.units.temp+'</td><td><img src="'+weather.forecast[5].thumbnail+'"><br />'+weather.forecast[5].low+'&deg;'+weather.units.temp+'<br />'+weather.forecast[5].high+'&deg;'+weather.units.temp+'</td></tr>';
        
        html += '</table>';
  
      jQuery("#weatherHangzhou").html(html);
    },
    error: function(error) {
      jQuery("#weatherHangzhou").html('<p>'+error+'</p>');
    }
  });
});

simple-weather.css

/*
  Docs at http://http://simpleweatherjs.com

  Look inspired by http://www.degreees.com/
  Used for demo purposes.

  Weather icon font from http://fonts.artill.de/collection/artill-weather-icons

  DO NOT hotlink the assets/font included in this demo. If you wish to use the same font icon then download it to your local assets at the link above. If you use the links below odds are at some point they will be removed and your version will break.
*/

@font-face {
    font-family: 'weather';
    src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.eot');
    src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.eot?#iefix') format('embedded-opentype'),
         url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.woff') format('woff'),
         url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.ttf') format('truetype'),
         url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.svg#artill_clean_weather_iconsRg') format('svg');
    font-weight: normal;
    font-style: normal;
}
.weather {
  width: 100%;
  margin: 0px auto;
  text-align: center;
  text-transform: uppercase;
}

.weather h2 {
  margin: 0 0 8px;
  color: #fff;
  font-size: 50px;
  font-weight: 300;
  text-align: center;
  text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15);
}

#weather-title {
    margin: 0 0 8px;
    color: #3A3A3A;
    font-size: 500%;
    /*font-weight: 500;*/
    text-align: right;
    text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15);
    margin: -140px 0 0 0;
}

.weather ul {
  margin: 0;
  padding: 0;
}

.weather li {
  background: #fff;
  background: rgba(255,255,255,0.90);
  padding: 20px;
  display: inline-block;
  border-radius: 5px;
}

.weather .currently {
  margin: 0 20px;
}

.weather-forecast {
    width: 100%;
    border: none;
    table-layout: fixed;
}

td {
    text-align: center;
}

th {
    text-align: center;
}

Full documentation see on simpleWeather website.

It’s really simple and easy to use.

Leave a Reply