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 For Plugin
owm_city_id 0 BOTH
size wide BOTH
units F BOTH
override_title Location Search Field BOTH
forecast_days 5 BOTH
hide_stats false BOTH
show_link false BOTH
custom_bg_color depending on weather BOTH
background false BOTH
background_by_weather false BOTH
background_by_weather_ext jpg BOTH
text_color #ffffff BOTH
hide_attribution false BOTH
inline_style empty BOTH
locale value of get_locale() BOTH
custom_template_name empty PRO
show_icons 0 PRO
use_user_location false PRO
allow_user_to_change false PRO
ajax 0 PRO
loader true PRO
inline_style_wrap empty PRO
skip_geolocate false PRO

owm_city_id
Default: 0
Plugin: Both

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

size
Default: wide
Plugin: Both

Used to change the template of the widget.

//FREE & PRO
[awesome-weather size="wide"]
[awesome-weather size="tall"]

// PRO
[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"] // USED FOR CUSTOM LAYOUTS

units
Default: F
Plugin: Both

// FREE & PRO
[awesome-weather units="C"]
[awesome-weather units="F"]

// PRO
[awesome-weather units="auto"]

override_title
Default: Location Search Field
Plugin: Both

You can change the banner title field.

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

forecast_days
Default: 5
Plugin: Both

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

hide_stats
Default: false
Plugin: Both

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

show_link
Default: false
Plugin: Both

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
Plugin: Both

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

background
Default: false
Plugin: Both

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

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

background_by_weather
Default: false
Plugin: Both

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
Plugin: Both

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

text_color
Default: #ffffff
Plugin: Both

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
Plugin: Both

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

inline_style
Default: empty
Plugin: Both

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()
Plugin: Both

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

custom_template_name
Default: empty
Plugin: Pro

When creating a custom template, you’ll need to set size="custom" and add this attribute. Set the value to match the name of the file in your theme like this: awe-your_name.php

// matching: awe-slim.php in your theme folder
[awesome-weather size="custom" custom_template_name="slim"]

// matching: awe-hero.php
[awesome-weather size="custom" custom_template_name="hero"]

show_icons
Default: 0
Plugin: Pro

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
Plugin: Pro

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
Plugin: Pro

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

ajax
Default: 0
Plugin: Pro

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

loader
Default: true
Plugin: Pro

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

[awesome-weather loader="false"]

inline_style_wrap
Default: empty
Plugin: Pro

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

skip_geolocate
Default: false
Plugin: Pro

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