The Awesome Weather Widget can also be used anywhere through the shortcode or even using a PHP function in a theme.
The shortcode is [awesome-weather].
If you wanted to do the same thing with PHP you can use the function:
awesome_weather_shortcode( $atts_array ).
Both require a set of attributes (simplified to $atts in my plugin) that change its behavior. Here are the options:
Attribute | Default Value |
---|---|
owm_city_id | 0 |
size | wide |
units | F |
override_title | Location Search Field |
forecast_days | 5 |
hide_stats | false |
show_link | false |
custom_bg_color | depending on weather |
background | false |
background_by_weather | false |
background_by_weather_ext | jpg |
text_color | #ffffff |
hide_attribution | false |
inline_style | empty |
locale | value of get_locale() |
show_icons | 0 |
use_user_location | false |
allow_user_to_change | false |
ajax | 1 |
loader | true |
inline_style_wrap | empty |
skip_geolocate | false |
Each city has a City ID associated with it. The easiest way to get one is to load a temporary Awesome Weather widget onto your site and use the search box in the settings to find your city and then copy the ID it provides. You can then delete the widget.
Once you have your city ID you can then add it to your shortcode like this. Please include the location attribute as well. This will be the title of your widget. More information about finding your City ID.
[awesome-weather owm_city_id="4699066" location="Houston, US"]
Used to change the template of the widget. This is also what you would use when calling a custom template like: size="slim"
[awesome-weather size="wide"] [awesome-weather size="tall"] [awesome-weather size="micro"] [awesome-weather size="showcase"] [awesome-weather size="long"] [awesome-weather size="boxed"] [awesome-weather size="tall"] [awesome-weather size="material"] [awesome-weather size="basic"] [awesome-weather size="custom"] // WHATEVER YOUR CUSTOM LAYOUT IS
[awesome-weather units="C"] [awesome-weather units="F"] [awesome-weather units="auto"]
override_title
Default: Location Search Field
You can change the banner title field.
[awesome-weather override_title="Montreal, Canada"] [awesome-weather override_title="Whatever"]
You can change the number of forecast days available by including setting a number or set to ‘hide’ to not show the section.
[awesome-weather forecast_days="hide"] [awesome-weather forecast_days="3"]
You can hide the stats (or description) section. This is the part that shows the current wind speed, humidity, etc.
[awesome-weather hide_stats="1"]
You can show a link to the weather providers website that shows an extended forecast. You can customize the text and url with two other attributes: extended_url and extended_text.
[awesome-weather show_link="1"] [awesome-weather show_link="1" extended_url="https://openweathermap.org/city/4699066" extended_text="See More Weather"]
custom_bg_color
Default: depending on weather
You can change the look of your widget through CSS or through the background fields. Simply insert a hex, rgba or ‘transparent’ value in the attribute
[awesome-weather custom_bg_color="#ccc"] [awesome-weather custom_bg_color="#acacac"] [awesome-weather custom_bg_color="rgba(255,255,255,0.5)"] [awesome-weather custom_bg_color="rgba(0,0,0,0.1)"] [awesome-weather custom_bg_color="transparent"]
For a custom background image simply insert the URL to your image.
[awesome-weather background="http://urltoimage.jpg"]
background_by_weather
Default: false
Theis attribute can have different background images based on the current weather. For more information on this, check out the help document.
[awesome-weather background_by_weather="1"]
background_by_weather_ext
Default: jpg
By default, my plugin looks for jpeg images to do the background by weather option. If you wanted to put custom items in your theme, you can change the extension of the files to look for here.
[awesome-weather background_by_weather_ext="gif"] [awesome-weather background_by_weather_ext="png"]
You can easily change the text of the widget without CSS using this attribute If you would like to use CSS, you would add the following to your theme style.css: .awesome-weather-wrap, .awesome-weather-wrap strong { color: #000; }
[awesome-weather text_color="#000"] [awesome-weather text_color="rgba(0,0,0,0.5)"]
hide_attribution
Default: false
If you want to hide the ‘Weather by OpenWeatherMaps’ message at the bottom of the widget you would use this attribute.
[awesome-weather hide_attribution="1"]
If you want to add some CSS to just one widget, you could use your style.css file or just put the styles into this attribute. This will be added to the main wrapper element of the widget.
[awesome-weather inline_style="width:300px;height:200px;color:#000;font-size:2em;"]
locale
Default: value of get_locale()
You can set the locale used to grab weather data. Each provider has a specific list of options. Here is the list for OpenWeatherMap.
// OPENWEATHERMAPS [awesome-weather locale="es"] [awesome-weather locale="ru"] [awesome-weather locale="zh_tw"]
You can use weather icons associated with the weather. Note that each template shows and hides the icons differently. Some use them in the description some don’t and some don’t show them in the forecast. This is intentional.
[awesome-weather show_icons="1"]
use_user_location
Default: false
You can ping the users IP address to get their current location and show weather based on that data.
[awesome-weather use_user_location="1"]
allow_user_to_change
Default: false
This adds the pin icon in the corner which attempts to use HTML5 geolocation and then falls back to a search box.
[awesome-weather allow_user_to_change="1"]
You can opt to load your widget using AJAX. This will make your widget load on the page only after the rest of the stuff on the page has loaded. This results in faster page loads and happier clients. It is recommended to use an id
attribute as well, to make sure the widget loads in the proper widget wrapper.
[awesome-weather ajax="1"]
When using ajax, a loader appears before it loads. You can turn this off.
[awesome-weather loader="false"]