Using the Shortcode / Attribute Guide

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

Default: 0

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. awe-select-city

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"]

Default: wide

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

Default: F

[awesome-weather units="C"]
[awesome-weather units="F"]
[awesome-weather units="auto"]

Default: Location Search Field

You can change the banner title field.

[awesome-weather override_title="Montreal, Canada"]
[awesome-weather override_title="Whatever"]

Default: 5

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"]

Default: false

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"]

Default: false

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="" extended_text="See More Weather"]

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"]

Default: false

For a custom background image simply insert the URL to your image.

[awesome-weather background="http://urltoimage.jpg"]

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"]

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"]

Default: #ffffff

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)"]

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"]

Default: empty

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;"]

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.

[awesome-weather locale="es"]
[awesome-weather locale="ru"]
[awesome-weather locale="zh_tw"]

Default: 0

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"]

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"]

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"]

Default: 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"]

Default: true

When using ajax, a loader appears before it loads. You can turn this off.

[awesome-weather loader="false"]

Default: empty

v2.0+ When loading through AJAX a new wrapper gets added around the widget. You can target it with specific inline styles.

[awesome-weather inline_style_wrap="padding: 20px;"]

Default: false

Added in 1.2.5 – Allows users to bypass the HTML5 Geolocation call and go straight to the Search form to lookup their location.

[awesome-weather skip_geolocate="1"]